jQuery, Ajax gallerie et pages

Version imprimable

Bonjour,

Désolé de vous importuner avec une question de débutant mais voilà, j'ai un petit soucis sur lequel je tourne un peu en rond (je vois bien des débuts d'explication mais je n'arrive pas à le résoudre tout seul).

Pour faire simple, j'ai une galerie photo avec x nbre de miniatures à afficher sur plusieurs pages. Mon script jQuery ci-dessous s'exécute sans aucun problème sur la 1ere page mais lorsque je vais sur les autres, ça ne fonctionne plus car seul la DIV contenant mes miniatures est modifié .. Donc je rame alors que ça doit être tout bête, non ?

Voici le code jQuery exécuté sur ma page galerie :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27  <script type="text/javascript"> var $j = jQuery.noConflict(); $j(function () { $j('div.galerie_photo').hide(); // Cache les images du div associé }); var i = 0; // Initialisation var int = 0; // Fix IE $j(window).bind("load", function() { // Le chargement commencera lorsque le document sera complètement chargé var int = setInterval("doThis(i)",150);// Vitesse d'affichage en ms }); function doThis() { var imgs = $j('div.galerie_photo').length; // Comptage du nbre d'images dans la DIV if (i >= imgs) { clearInterval(int); } $j('div.galerie_photo:hidden').eq(0).fadeIn(150); // Apparition des images une à une i++; } </script>
Le code qui permet de passer d'une page à l'autre :
Code:

1 2 3 4 5 6 7 8 9 10 function nextPage(page, recherche, categorie, souscategorie, nbpix) { var url = 'func/aff_galerie_ng.php'; var pars = 'page='+page; var target = 'cadre_galerie'; document.getElementById('cadre_galerie').innerHTML = ""; var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars}); }
Merci d'avance à vous ;)

Pour info mon Ajax.Updater va être remplacer par la fonction jQuery équivalente $.ajax .. Marre d'utiliser Prototype et là je suis décidé :aie:

18/05/2011, 10h04
kazarn

Bon à priori je vais tout changer et faire directement ce qu'il faut dans ma fonction nextPage, modifier en full jQuery pour l'occasion.

je reviens vers vous quand le code sera à jour .. Si en attendant certains peuvent m'expliquer pourquoi et comment faire pour que cette solution puisse marcher, je suis malgré tout preneur.

merci ;)

Bon vu que je n'ai pas eu de réponses ( :cry: ), j'ai pris mon courage à deux mains et j'ai résolu partiellement le problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function nextPage(page, recherche, categorie, souscategorie, nbpix)
{
	(function ($) 
	{
		$("#notice_div").html('<b>Chargement en cours ...</b>'); 
 
		$.ajax({
				type: 'GET',
				url: 'func/aff_galerie_ng.php',
				data: "page=" + page + "&recherche=" + recherche + "&categorie=" + categorie + "&souscategorie=" + souscategorie + "&nbpix=" + nbpix,
				timeout: 2000,
				success: function(data)
				{
					$("#cadre_galerie").hide().html(data).fadeIn(); 
					$("#notice_div").html(''); 
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) 
				{
				  $("#notice_div").html('Probleme avec le serveur.');
				  window.setTimeout(update, 60000);
				}
			});
	})(jQuery);
}

Si jamais vous avez des suggestions concernant ce code, n'hésitez pas :ccool:

Bonsoir

Pour le premier message, en jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script> 
    var i = 0, int = 0, imgs = 0;
 
    function doThis(){
        if (i > imgs) {
            clearInterval(int);
        } else {
            $('div.galerie_photo:hidden').eq(0).fadeIn(150); // Apparition des images une à une
            i++;
        }
    }
 
    $(function(){
        // le dom est chargé
 
        $('div.galerie_photo').hide(); // Cache les images du div associé
 
        imgs = $('div.galerie_photo').length; // Comptage du nbre d'images dans la DIV
    });
 
    $(window).load(function(){
        // Le document est complètement chargé
 
        int = setInterval(function(){
            doThis();
        }, 150); // Vitesse d'affichage en ms
    });
</script>

19/05/2011, 09h11
kazarn

Je vais essayer pour voir ce que ça donne, merci pour ta réponse. Pour mon nouveau code en revanche, c'est pas trop salement codé ? :roll:

Bonjour

Citation:

Je vais essayer pour voir ce que ça donne, merci pour ta réponse.

Ce code et le précédent sont des suggestions. Dans mon langage cela signifie que je n'ai pas eu la possibilité de tester les codes (n'ayant pas le contexte HTML, CSS et jQuery) et que des erreurs ne sont pas exclues.

Citation:

Pour mon nouveau code en revanche, c'est pas trop salement codé ?

On fera de vous un utilisateur convaincu des bienfaits de jQuery. ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function nextPage(page, recherche, categorie, souscategorie, nbpix){
	//var url = 'func/aff_galerie_ng.php', pars = 'page='+page, target = 'cadre_galerie';
 
    // http://api.jquery.com/empty/
	$('cadre_galerie').empty();
 
	// var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
 
    // http://javascript.developpez.com/faq/jquery/?page=Ajax#AjaxRequest
 
    // "page=" + page + "&recherche=" + recherche + "&categorie=" + categorie + "&souscategorie=" + souscategorie + "&nbpix=" + nbpix
 
    $.get('func/aff_galerie_ng.php', "page=" + page + "&recherche=" + recherche + "&categorie=" + categorie + "&souscategorie=" + souscategorie + "&nbpix=" + nbpix, function(data, textStatus, jqXHR) {
        console.log(data, textStatus, jqXHR);
 
        // succès de la transaction, on doit traiter le contenu de data
 
    }).error(function(jqXHR, textStatus, errorThrown){
        console.log(jqXHR, textStatus, errorThrown);
 
        // échec de la transaction, gérer la catastrophe
 
    }).complete(function(jqXHR, textStatus){
        console.log(jqXHR, textStatus);
 
        // la transaction s'est terminée par un succès ou par un échec
    });
}

20/05/2011, 09h24
kazarn

Merci beaucoup, je regarde tout ça ce soir ;)