11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai actuellement mis en place de l'ajax sur mon site pour la navigation. Je charge donc à chaque fois une div "content". Par contre j'ai un soucis lorsque cette div contient des liens qui doivent également appeler de l'ajax.
Quand je clique sur l'un de ces liens, la page se recharge et n'utilise pas de javascript .. j'ai donc essayé d'utiliser la fonction $getscript ce qui fonctionne jusqu'à un certain moment. Vu que dorénavant je recharge la fonction ajax dans mon ajax au fur à mesure que je navigue l'appel est doublé ...

Voici mon code au cas ou :

$(document).ready(function()
{
	//Clique sur un lien
	$('a:not(.thickbox)').click(function() 
	{
		var $t = $(this);
		
		load_content($t.attr('title'),$t.attr('href'));
		
		//On change l'état des liens
		$('a').removeClass('hover');
		$(this).addClass('hover');

		if($t.attr('href') == '/user/profil' ||  $t.attr('href') == '/file')
		{
			$('div#nav_profil').addClass('hover');
		}
		else
		{
			$('div#nav_profil').removeClass('hover');
		}
		//On ne suit pas le lien
		return false;
	});
	
	//Upload d'un fichier
	var bar = $('.bar');
	var percent = $('.percent');
	var status = $('#status');
	
	$('form').ajaxForm(
	{	
		beforeSend: function() 
		{
			$('.progress').css('display', 'block');
			status.empty();
			var percentVal = '0%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		uploadProgress: function(event, position, total, percentComplete) 
		{
			var percentVal = percentComplete + '%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		complete: function(xhr) 
		{
			$.ajaxSetup({ cache: true });	
			
			setTimeout('refresh_div("user/ajax_profil", "more-infos")', 100);
			load_content(document.title,document.URL);
		}
	});  
});

function load_content(title,url,skipHistory) 
{	
	$.ajax(
	{
		url: url,
		cache: true,
		beforeSend : function() { // Pour le loader
			$("#content").append('<div id="loader"></div>');
		},
		success: function(html) 
		{
			//On met à jour le itre de la page
			document.title = title;
			//On défini l'objet d'état
			var stateObj = {
				title: title,
				url: url
			};
			//Si la variable skipHistory est à false, on lance la méthode pushstate
			if (!skipHistory) 
			{
				//On vérifie que la fonction pushState est bien définie
				if (typeof window.history.pushState == 'function') 
				{
					window.history.pushState(stateObj,title,url);
				}
			}			
			
			//On charge le contenu
			$('#content').html(html).fadeIn("slow");
			
			$.ajaxSetup({ cache: true });	
			
			var findinput = $("#content").find("input:radio, input:file");
			
			if (findinput.length != 0) 
			{
				$.getScript("/js/javascript.js?param4=Les mots de passe ne sont pas identique");
			}
			
			var findthickbox = $("#content").find(".thickbox");
			
			if (findthickbox.length != 0) 
			{
				$.getScript("/js/thickbox.js?param3=Fermer&ou Appuyer sur Echap");
			}
			
			var findlink = $("#content").find("a");
			
			if (findlink.length != 0) 
			{
				$.getScript("/js/ajax.js");
			}
			
			var findsound = $("#content").find(".ui360");
			
			if (findsound.length != 0) 
			{
				$.getScript("/js/soundmanager2.js");		
			}
		},
	})
}

//On détecte les événement sur la pile de l'historique
window.onpopstate = function(event) 
{
	//Si event.state est définie (c'est à dire que la page précédente fait partie de l'historique courant), on charge le contenu
	if (event.state) 
	{
		load_content(event.state.title, window.location.pathname, true);
	} 
	else 
	{
		//Si event.state n'est pas définie, on créer un nouvel objet d'état
		var stateObj = {
			title: document.title,
			url: window.location.pathname 
		};
		//On modifie l'entrée actuelle
		window.history.replaceState(stateObj,document.title,window.location.pathname);
	}
}	

Modifié par Sabe67 (16 Aug 2012 - 17:07)