0
BUTAJAX + JS + window.history - Utilisation de Back-Forward Navigation
- Pour utiliser Ajax pour récupérer les pages
- Utilisez JS pour mettre à jour la fenêtre url
- Utilisez Fenêtre d'historique pour sauver Ajax page pour la navigation vers l'avant et vers l'arrière sans recharger la page
- Modifiez les attributs de la barre de navigation (couleur en changeant de classe) avec les clics de clic et de recul.
fonctionnement
1, 2 et 3 fonctionnent.
PROBLÈME + QUESTION
Comment faire fonctionner # 4? À savoir, comment modifier les attributs de classe de l'élément de liste de navigation en utilisant des clics en arrière-plan pour faire correspondre les pages affichées?
JAVASCRIPT CODE - avec JQuery
<script>
$(function(){
$("a[RAJAX='RAJAX']").click(function(e){
e.preventDefault();
// if comment-uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; if commented, html5 nonsupported browsers will reload the page to the specified link.
//get the link location that was clicked
pageurl = $(this).attr('href');
clickItem = $("header .navbar #menu-main-menu .dropdown-menu").find($(this)).parent(".menu-item").parent(".dropdown-menu").parent(); //BSR
//to get the ajax content and display in div with id 'content'
$.ajax({url:pageurl+'?RAJAX=RAJAX',success: function(data){
$('#content').html(data);
}});
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
$(".dropdown").removeClass("activate-color");
clickItem.addClass("activate-color");
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?RAJAX=RAJAX',success: function(data){
$('#content').html(data);
}});
});
</script>
HTML CODE - avec Bootstrap.css
<header>
<div class="navbar navbar-default navbar-fixed-top">
<ul id="menu-main-menu" class="nav navbar-nav">
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link1">Link-1</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link2">Link-2</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link3">Link-3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link4">Link-4</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link5">Link-5</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link6">Link-6</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link7">Link-7</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link8">Link-8</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link9">Link-9</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link10">Link-10</a></li>
</ul>
</li>
</ul>
</div> <!-- end .navbar -->
</header> <!-- end header -->
<div class="container body-container">
<div id="content" class="clearfix row custom-homepage" style="padding:10px;">
AJAX CONTENT SPACE
</div>
</div>