tengo el sgte. problema, cuando aprieto F5 o refresco la pagina con el boton del browser, este me manda al link de la url pero perdiendo parte del contenido.
Al seleccionar el boton page1 se carga en la parte de abajo el contenido lo cual esta OK (AJAX)
pero al apretar el F5 o el boton refresh del navegador solo muestra la parte de la page1 y no junto con el index
los botones forward y back funcionan OK, solo me falta lo del boton refrescar, esto esta hecho con el objeto de history en html5 y js
archivo index.jsf
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" >
<h:head>
<title>CNR</title>
<script type="text/javascript" src="../resources/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//jQuery.noConflict();
</script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
img.ajax-loader
{
position: absolute;
top: 45%;
left: 45%;
display: none;
}
</style>
</h:head>
<h:body>
<img class="ajax-loader" src="http://www.forosdelweb.com/f13/resources/images/spinner.gif" alt="loading..." />
<div id="header">
<nav>
<ul>
<li><strong>index</strong></li>
<li><a id="aHistoryPage1" href="page1.jsf">page1</a></li>
<li><a id="aHistoryPage2" href="page2.jsf">page2</a></li>
</ul>
</nav>
<button id="previous">Previous</button>
<button id="forward">Forward</button>
<p>Number of pages in the history stack: <span></span></p>
</div>
<div id="contenido"></div>
</h:body>
</html>
Código PHP:
$(document).ready(function (){
$('#previous').click(function(){
window.history.back();
});
$('#forward').click(function(){
window.history.forward();
});
function loadView(view,elementResponse,titulo,debug) {
if(elementResponse == "" || elementResponse == "undefined"){
console.log("Debes ingresar un elemento para mostrar/cargar la respuesta desde el servidor");
return false;
}
if(titulo == "" || titulo == "undefined"){
titulo = jQuery("title").text();
}
if(titulo == "" || titulo == "undefined"){
debug=false;
}
if(window.history.state == null){
elementResponse.html("");
return "index.jsf";
}else
if (typeof window.history.pushState == 'function') {
// if(keyCode==116){
// window.history.replaceState("page1.jsf", "", "page1.jsf");
// }
elementResponse.load(view);
$('.ajax-loader').show();
$.ajax({
url: view + '?type=ajax', success: function (data) {
elementResponse.html(data);
$('.ajax-loader').hide();
}
});
jQuery("title").html(titulo);
}
if(debug==true){
console.log(window.history.length);
}
window.onpopstate = function(event){
loadView(window.history.state,elementResponse,"",debug);
};
}
$('#aHistoryPage1,#aHistoryPage2').on('click',function(event) {
window.history.pushState($(this).attr('href'), null, $(this).attr('href'));
loadView($(this).attr('href'),jQuery("#contenido"),"",false);
return event.preventDefault();
});
//window.history.replaceState($('strong').text(), null, $('strong').text());
//printHistoryLength();
});
Código PHP:
<div>
hola soy la pagina 111
</div>
gracias
