11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous et bonne année!

Voici un code que j'ai sur un site pour charger les pages en ajax sans recharger la totalité de la page :

		$(document).ready(function(){
			$("#menu ul li a").click(function(e){
				var lien = $(this).attr("href");
				var titre = $(this).attr("title");
				$.ajax({
					url: lien + "?request=ajax",
					success: function(data){
						$("#contenu").fadeOut("fast", function(){
							$("#contenu").html(data);
							history.pushState('', titre, lien);
							document.title = titre;
							$("#contenu").fadeIn("fast");
						});
					}
				});
				e.preventDefault();
			});
			window.onpopstate = function(event) {
				$.ajax({
					url: location.pathname + "?request=ajax",
					success: function(data){
						$("#contenu").fadeOut("fast", function(){
							$("#contenu").html(data);
							$("#contenu").fadeIn("fast");
						});
					}
				});
			};

		});


J'aimerais y apporter deux modifications mais je suis une bille en programmation et je n'ai malheureusement pas le temps d'apprendre le javascript donc je tente pour voir si une âme charitable pourrait m'aider. Smiley smile
Je voudrais juste rajouter un test pour qu'il ne recharge pas la page si c'est déjà celle ci qui est chargée.
Et je voudrais relancer la même fonction après le chargement d'une seul des pages car elle contient des liens en ajax elle aussi et j'ai d'autres pages avec des liens externe donc sans ajax.
Si vous pouviez m'aider ce serait vraiment sympa j'ai conscience que ce n'est que deux tests avec des if mais je dois avouer qu'en JS je nage complétement.

Merci
Bonsoir,

Pour la première partie de votre question, je suggère d'ajouter une classe sur le liens pour dire que ce dernier est chargé (pourquoi pas après rajouter un style css pour indiquer qu'il est actif).


$(document).ready(function(){
	$("#menu ul li a").click(function(e){
                if ($(this).hasClass("current")){
                       return;
                }
                var element = $(this);
		var lien = $(this).attr("href");
		var titre = $(this).attr("title");
		$.ajax({
			url: lien + "?request=ajax",
			success: function(data){
                                $(this).addClass("current");
				$("#contenu").fadeOut("fast", function(){
					$("#contenu").html(data);
					history.pushState('', titre, lien);
					document.title = titre;
					$("#contenu").fadeIn("fast");
				});
			}
		});
		e.preventDefault();
	});
	window.onpopstate = function(event) {
		$.ajax({
			url: location.pathname + "?request=ajax",
			success: function(data){
			       $("#contenu").fadeOut("fast", function(){
			       $("#contenu").html(data);
					$("#contenu").fadeIn("fast");
				});
			}
		});
	};

});


Pour la seconde partie je ne comprends pas trop, désolé.
En espérant vous avoir du moins partiellement aidé.