Navigation Ajax et scripts de la page

Version imprimable

Bonjour à tous,

J'ai mis en place une navigation en ajax sur un nouveau projet.

Sur mon index.php, j'ai une balise :

Code:

<div id="contenu"></div>

Lorsque je clique sur un lien du menu de ma page index.php, cela déclenche la navigation ajax qui effectue le traitement suivant :

Code:

$("#contenu").append("adresse/de/la/page/cible.php");

Ainsi, je récupère le contenu de mes pages sans recharcher complètement ma page.

Ce système fonctionne bien sauf que certains composants javascript s'initialisent mal.

Par exemple, le composant FullCalendar (http://arshaw.com/fullcalendar/) ne s'affiche pas bien. Seul l'en-tête du calendrier s'affiche et il faut que je clique sur la vue désirée pour qu'elle apparaisse alors que normalement une vue est affichée par défaut.
Dans ce cas précis, ma page cible est composée comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 <link href="fullcalendar.css" rel="stylesheet"> <link href="fullcalendar.print.css" rel="stylesheet" media="print"> <div id="calendar"></div> <script src="fullcalendar.min.js"></script> <script> $('#calendar').fullCalendar(); </script>
En dehors de la navigation ajax, cela fonctionne bien.

Et j'ai ce problème avec plusieurs composants.

J'en appelle donc à votre expertise afin de savoir si certains d'entre vous ont déjà rencontré ce problème et s'ils connaissent une astuce pour que cela se passe bien.

Merci d'avance.

04/08/2014, 10h50
ben01n
J'ai trouvé la cause du problème.

Lorsque je déclenche le changement de page, je fait comme suit :
Code:

1 2 3 4 5 6 $(".contenu").fadeOut(500,function(){ $(".contenu").empty(); $(".contenu").html("adresse/de/la/page/cible.php"); $(".contenu").fadeIn(500); })
Si j'enlève les fadeout et fadein pour ne garder que le empty et le html, cela fonctionne parfaitement.
Le problème est que je perd l'effet de transition entre mes pages...
Rete à trouver comment faire pour que cela fonctionne en gardant mes effets de transition...
Si vous avez des idées...

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$(".contenu").fadeOut( 500, function(){
    var jObj = $( this );
 
    // AJAX load()
    // fadeIn() après le chargement et exécution du script
 
    jObj
	.empty()
	.load( "adresse/de/la/page/cible.php", function(){
	   jObj.fadeIn( 500 );
	});
});

05/08/2014, 08h48
ben01n

Merci d'avoir pris le temps de me répondre.

Néanmoins, le résultat est le même avec ce code : la transition de page se fait bien mais les composants JS se chargent mal.

Je me demande si ce n'est pas parce que les composants ne peuvent pas générer leur contenu sur des div qui sont masqués....
07/08/2014, 00h11
danielhagnoul

Bonsoir

Si du code doit agir sur les éléments HTML qui viennent d'être chargés il faut utiliser la forme dynamique de la méthode on().