[AJAX] 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

[AJAX] Script Javascript Galleria + Raffraichissement zone en Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager