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 :
Modifié par Sabe67 (16 Aug 2012 - 17:07)
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)