11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Navigation ajax d'une div ?

Bonsoir !
Je suis en train d'essayer de mettre une navigation ajax sur mon site qui utilise un script.
Le script n'est pas énormément modifiable donc j'essaie de modifier surtout le code que j'ajoute.

Voila j'ai le code ci dessous. Il fonctionne tres bien. Le seul probleme est qu'il m'affiche toute la page (avec le header et le footer). Normal puisque les pages du script sont faites comme ça.

Seulement je voudrais qu'il ne m'affiche qu'une div du fichier. Par exemple je voudrais qu'il m'affiche la div qui porte le nom 'content'.Cela est t'il possible ?

Si oui, je suppose que c'est sur la ligne en rouge. Mais comment faire ?

$(document).ready(function(){
	$("#menu a").click(function(){
		[#red]page=$(this).attr("href");[/#]
		$.ajax({
			url: page,
			cache:false,
			success:function(html){
				afficher(html);			
			},
			error:function(XHTMLHttpRequest,textStatus, errorThrown){
				alert(textStatus);
			}
		})
		return false;
	});
});

function afficher(data){
	$("#ajax").fadeOut(500,function(){
		$("#ajax").empty();
		$("#ajax").append(data);
		$("#ajax").fadeIn(1000);
	})
}


Merci d'avance aux personnes qui se pencheront sur mon probleme. Smiley lol
Modifié par jejemo (04 Jun 2010 - 22:25)
super !!!! Smiley eek Smiley biggrin Smiley biggrin
Oh je suis trop content merci c'est trop bien ! Je pensais galérer avec ça.

Ca marche super en effet.

Par contre je voudrais garder l'effet fadeOut et fadeIn.

Comment je peux les rajouter correctement ?
J'ai essayer comme ça mais ça fait un effet bizarre.

$(document).ready(function(){       
   $("#menu a").click(function(){       
    page=($(this).attr("href"));   
	$("#ajax").load(page+" #ajax").fadeOut(500,function(){
		$("#ajax").load(page+" #ajax").empty();
		$("#ajax").load(page+" #ajax").append(page+" #ajax");
		$("#ajax").load(page+" #ajax").fadeIn(1000);
	})
    return false;   
   });  
});


Aussi des fois lorsque je clic j'ai l'adresse de la dic qui s'affiche avant d'avoir son contenu.
Est-il possible déviter cela ? C'est le temps que la div se charge c'est ça ?

Si non, peut-on mettre un loader à la place de l'adresse le temps que ça charge ?

Merci 1000fois à toi spiral123 !!! Smiley biggrin
Pas encore testé mais je pense que je ferai comme ca : 


$("#ajax").fadeTo('fast',0.2).load(page+" #ajax").fadeTo('normal',1);


Sinon, attention quand même car ton généré avec cette fonction contient deux <div id='ajax'>
Ce qui évidement n'est pas valide Smiley smile
Encore merci!
Ca marche parfaitement bien !
Il n'y a plus d'adresse qui s'affiche entre les chargement.

a écrit :
Sinon, attention quand même car ton généré avec cette fonction contient deux <div id='ajax'>
Ce qui évidement n'est pas valide smile


Ah d'accord. Que puis-je faire pour y remédier ?
Tu englobe ta div #ajax dans une div par exemple #dynamic
Et tu changes le code comme suit : 

$("#dynamic").fadeTo('fast',0.2).load(page+" #ajax").fadeTo('normal',1);


Et là tout est correct ^^
Sujet clos
Aller à