Script Javascript Galleria + Raffraichissement zone en Ajax

laurent__ · 22/08/2011, 17h35

Bonjour à toutes et à tous,

Ayant parcouru et re-parcouru mes sources, je ne parviens pas à résoudre le problème que je rencontre.

Je suis en train de réaliser un projet que j'ai depuis quelques temps déjà. Pour cela, je combine l'utilisation d'Ajax pour le raffraichissement du contenu et le script Galleria pour mettre en place une galerie photo souple.

Le raffraichissement du contenu via le menu fonctionne correctement en AJAX. Là dessus, je n'ai rencontré aucun soucis. En revanche, la galerie photo ne s'affiche plus sous forme de miniatures mais les photos s'affichent normalement.

Pour charger le fichier, j'utilise XHRConnection.
Existe-t-il une incompatibilité entre l'utilisation des deux technologies (Ajax et JS) ? Cela me parait étrange malgré tout.

Par contre, le comble, c'est que lorsque je vais sur la page en chemin absolu (via url), la galerie fonctionne comme il se doit.

J'avoue être perdu.

Quelqu'un a-t-il déjà été confronté à ce genre de soucis ?

Merci,
Laurent.

J'utilise Galleria telle qu'elle est http://galleria.aino.se/download/
Fonction ajoutée à la fin du JS

Code :

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

1
2
3
4
5
6
7
function chargeFichier(nb) {
	var XHR = new XHRConnection();
	XHR.setRefreshArea('corps');
        if(nb==1){XHR.sendAndLoad("accueil.php", "GET");}
        if(nb==2){XHR.sendAndLoad("galerie.php", "GET");}
        if(nb==3){XHR.sendAndLoad("cv.php", "GET");}
	return true;

Et voici le code du fichier galerie.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="galerie/galleria-1.2.5.min.js"></script>
    </head>
    <body>
        <div class="entete-rub"><span class="entete-rub-lettrine">G</span>alerie</div>
        <div id="gallery">
            <img src="galerie/photo1.jpg">
            <img src="galerie/photo2.jpg">
            <img src="galerie/photo3.jpg">
        </div>
        <script>
            Galleria.loadTheme('galerie/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 500,
                height: 500
            });
        </script>
    </body>
</html>

Bovino · 23/08/2011, 08h21

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

laurent__ · 24/08/2011, 00h10

Bonjour,
J'ai trouvé une solution à mon problème. Peut-être n'est-elle pas la meilleure, mais elle fonctionne comme je le souhaite.

Pour ceux qui serait dans le même cas que moi, j'ai remplacé l'instruction liée à mon onglet-menu galerie comme suit

Ancien code :

Code :

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

1
2
3
4
5
6
7
8
function chargeFichier(nb) {
	var XHR = new XHRConnection();
	XHR.setRefreshArea('corps');
        if(nb==1){XHR.sendAndLoad("accueil.php", "GET");}
        if(nb==2){XHR.sendAndLoad("galerie.php", "GET");}
        if(nb==3){XHR.sendAndLoad("cv.php", "GET");}
	return true;
}

Nouveau code :

Code :

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

1
2
3
4
5
6
7
8
function chargeFichier(nb) {
	var XHR = new XHRConnection();
	XHR.setRefreshArea('corps');
        if(nb==1){XHR.sendAndLoad("accueil.php", "GET");}
        if(nb==2){document.location.href="index.php?galerie";}
        if(nb==3){XHR.sendAndLoad("cv.php", "GET");}
	return true;
}

et j'ai ajouté un simple

Code :

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

<?php if(isset($_GET['galerie'])){ include('galerie.php');} ?>

dans ma page d'accueil, de cette manière, le javascript de la galerie est exécuté malgré tout.

Je répète que ce n'est pas forcément ce qu'il y a de plus propre, mais cela reste fonctionnel.

Auteur · 25/08/2011, 11h50

bonjour,

pour avoir discuté avec laurent__ sur le chat, je voudrais ajouter un complément d'information sur son problème.

Comme il l'a indiqué dans son premier message le fichier qu'il appelle par une requête ajax est galerie.php qui contient dans le code ces balises scripts :

Code html :

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

1
2
3
4
5
6
7
        <script>
            Galleria.loadTheme('galerie/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 500,
                height: 500
            });
        </script>

Malheureusement, ce bout de code n'est pas exécuté après l'envoi de la requête AJAXif(nb==2){XHR.sendAndLoad("galerie.php", "GET");} (c'est considéré comme du texte).

La solution pour laurent__ serait donc d'inclure le script contenu dans galerie.php dans une fonction qui serait ensuite appelée après l'exécution de la requête AJAX (une fonction callback).

N'étant pas familier avec AJAX et ne connaissant pas la bibliothèque XHRConnection.js utilisée ici pour la gestion de l'objet XHR, je n'ai pas pu l'aider sur ce point.

Si vous avez donc des idées pour résoudre ce problème (qu'il a certes résolu d'une autre manière) tout en utilisant AJAX n'hésitez pas à poster votre solution

23/08/2011, 08h21	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Pourquoi les événements disparaissent après une mise à jour avec AJAX ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email