Hola, me gustaría implementar la navegación ajax, de tal manera que pueda tener un video en reproducción en el <header> mientras el usuario salta a otra página, al cambiar de página esta no se cargara completamente, en su defecto me gustaría reemplazar el contenido de la etiqueta <main> por el contenido de la etiqueta <main> de la nueva pagina elegida, a la vez que se actualiza la barra de direcciones con el enlace elegido por el usuario para que parezca que realmente ha cambiado la pagina entera, gracias
lo he intentado con los siguientes archivos que son parte de mi front-controller, pero al probarlo, hace algo estraño, carga la pagina entera y mientras empieza a reproducir el video sigue reproduciendo el video de la anterior pagina cargada
.htaccess
Código:
#RewriteEngine on
#RewriteCond $1 !^(index\.php|favicon.ico|robots\.txt)
#RewriteRule ^(.*)$ index.php?/$1 [L]
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.+)$ index.php?$1 [QSA,L]
AddDefaultCharset utf-8
index.php
Código PHP:
<?php
ini_set('display_errors', 1);
header('Content-Type: text/html; charset=UTF-8');
define('DS', DIRECTORY_SEPARATOR);
define('ROOT', realpath(dirname(__FILE__)).DS);
define('BASE_URL', "//$_SERVER[HTTP_HOST]/fc/");
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', '');
define('DB_CHAR', 'utf8');
$argumentos = array_values(array_filter(explode('/', $_SERVER['QUERY_STRING'])));
$controlador = ($controlador = array_shift($argumentos))?$controlador:'index';
$metodo = basename(($metodo = array_shift($argumentos))?$metodo:'index','.html');
foreach(glob('./controladores/'.'*.php') as $archivo1) {
foreach(glob('./vistas/'.basename($archivo1,'.php').'/'.'*.phtml') as $archivo2) {
if (in_array(basename($archivo2,'.phtml'), array('borrar','crear','editar'))) {
$ediciones[basename($archivo1,'.php')][basename($archivo2,'.phtml')] = basename($archivo2,'.phtml').'.html';
} else {
$vistas[basename($archivo1,'.php')][basename($archivo2,'.phtml')] = (basename($archivo2,'.phtml')<>'index')?basename($archivo2,'.phtml').'.html':null;
}
}
}
unset($vistas['index']);
echo '<br><br><br>';
$index=array(
'nombre'=>'ANHIDA',
'lema'=>'Asociación de Niños con Hiperactividad y/o Déficit de Atención',
);
include ROOT.'plantillas/plantilla/index.phtml';
?>
plantillas/plantilla/index.phtml
Código PHP:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?=ucfirst($index['nombre'])?></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//bootswatch.com/slate/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?=BASE_URL?>"><?=ucfirst($index['nombre'])?></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="<?=$controlador=='index'?'active':null?>"><a href="<?=BASE_URL?>">Portada</a></li>
<?php foreach ($vistas as $llave1 => $archivo1): ?>
<?php if (count($vistas[$llave1]) == 1): ?>
<?php foreach ($archivo1 as $llave2 => $archivo2): ?>
<li class="<?=($controlador==$llave1)?'active':null?>"><a href="<?=BASE_URL?><?=$llave1?>/<?=$archivo2?>"><?=ucfirst($llave1)?></a></li>
<?php endforeach ?>
<?php else: ?>
<li class="<?=($controlador==$llave1)?'active':null?>" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><?=ucfirst($llave1)?> <b class="caret"></b></a>
<ul class="dropdown-menu">
<?php foreach ($archivo1 as $llave2 => $archivo2): ?>
<li class="<?=($controlador==$llave1&&$metodo==$llave2)?'active':null?>"><a href="<?=BASE_URL.$llave1.DS.$archivo2?>"><?=ucfirst($llave2)?></a></li>
<?php endforeach ?>
</ul>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if (isset($ediciones[$controlador])): ?>
<?php foreach ($ediciones[$controlador] as $llave => $edicion): ?>
<li class="<?=($metodo==$llave)?'active':null?>"><a href="<?=BASE_URL.$controlador.DS.$edicion?>"><?=ucfirst($llave)?></a></li>
<?php endforeach ?>
<?php endif ?>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron" style="padding:0 5px;">
<figure class="text-center">
<object style="width:500px; height:281px; max-width:100%;"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=82376380&force_embed=1&server=vimeo.com&show_title=1&show_byline=0&show_portrait=1&color=ff9933&fullscreen=1&autoplay=1&loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=82376380&force_embed=1&server=vimeo.com&show_title=1&show_byline=0&show_portrait=1&color=ff9933&fullscreen=1&autoplay=1&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height="281"></embed></object>
<!--h1 class="text-center"><?=ucfirst($index['nombre'])?></h1>
<figcaption><?=$index['lema']?></figcaption-->
</figure>
</div>
<!--div class="row">
<div class="col-md-4">
<pre>$vistas => <?php print_r($vistas) ?></pre>
</div>
<div class="col-md-4">
<pre>$ediciones => <?php print_r($ediciones) ?></pre>
</div>
<div class="col-md-4">
<pre>$index => <?php print_r($index) ?></pre>
</div>
</div-->
<?php include ROOT."controladores/$controlador.php"; ?>
<?php call_user_func($metodo, $argumentos); ?>
</div>
<footer class="text-center"><?=$index['lema']?></footer>
<script src="//code.jquery.com/jquery.js"></script>
<script src="<?=BASE_URL.'plantillas'.DS.'plantilla'.DS.'ajax.js'?>"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
plantillas/plantilla/ajax.js
Código:
//<![CDATA[
$(document).ready(function(){
$('nav a').click(function(event) {
event.preventDefault(); // evitar la acción del link al href
var url = $(this).attr('href');
$('main').load(url + ' main');
});
$('#previous').click(function(){
window.history.back();
});
$('#forward').click(function(){
window.history.forward();
});
function loadView(view){
$('nav').load('views/'+view+'.php');
}
function printHistoryLength(){
$('span').text(window.history.length);
}
$('nav').on('click','a',function(event){
if (typeof window.history.pushState == 'function') {
event.preventDefault();
var view = $(this).attr('href');
window.history.pushState(view, null, view);
loadView(view);
printHistoryLength();
}
});
window.history.replaceState($('strong').text(), null, $('strong').text());
printHistoryLength();
window.onpopstate = function(event){
loadView(window.history.state);
};
});
//]]>