jQuery, Ajax gallerie et pages [Résolu]

[kazarn]

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
<!-- Preload IMG -->
<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é

[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

[kazarn]

Bon vu que je n'ai pas eu de réponses ( ), 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

[danielhagnoul]

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>

[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é ?

[danielhagnoul]

Bonjour

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.

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

[kazarn]

Merci beaucoup, je regarde tout ça ce soir