Discussion :

[ben01n]

Bonjour à tous,

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[ben01n]

J'ai trouvé la cause du problème.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
	});
});

[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....

[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().