Actualiser multiples div en ajax ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tryan, 8 Février 2011.

  1. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Bonjour,

    Je cherche à actualiser en temps réelle de multiples div commencent par le même "id" en partant de la base ci-dessous
    Code:
    <script type="text/javascript">
    function ajax(page, fonction)
    {
        var xhr=null;
        if (window.XMLHttpRequest) { 
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) 
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open("GET", "" + page + "?" + fonction + "", false);
        xhr.send(null);
        document.getElementById('affiche' + '1').innerHTML = xhr.responseText;
    }
    </script>
    Code:
    <div id="affiche1">
    <? 
    if($moncookie[1]==1){
    	echo 'Annonce sauvegardé.';
    }
    else{
    	echo '<a href="javascript:ajax(\'page2.php\', \'id=1\');">Sauvegarder cette annonce?</a>';
    }
    ?>
    </div>
    Le lien vers page2.php me permet de créer un cookie du style "moncookie[id]".
    Partant du principe que la ligne suivant
    Code:
    document.getElementById('affiche' + '1').innerHTML = xhr.responseText;
    peut être remplacé par
    Code:
    document.getElementById('affiche' + i).innerHTML = xhr.responseText;
    Je suppose qu'il est donc possible d'effectuer une boucle comme ci-dessous (je ne sais pas ou ni comment) de façon à pouvoir actualiser de multiples div :
    Code:
    for( i=0; i<n; i++){ 
    document.getElementById('affiche' + i).innerHTML = xhr.responseText;
    }
    Code:
    <div id="affiche1">***</div>
    <div id="affiche2">***</div>
    <div id="affiche3">***</div>
    etc...
    Tout coup de pouce est bienvenue :)

    merci
     
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Et ton n, tu le définis comment ?
     
  3. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Et bien ..bonne question !
    En même temps comme je patauge entre ajax et javascript, c'est bien pour ça que je pose des questions ^^.
    Doit bien avoir moyen de boucler ou je ne sais quoi d'autre pour ouvrir des "div" commencent par le même "id" non ?
     
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Le plus simple à ce niveau : tu ne joues pas avec les id (vu que tu n'en connais pas forcément le nombre), mais avec les classes CSS, et tu utilises jquery pour cible toutes les div affectées à la même classe.

    Et du coup tu en profites pour te former sur un framework javascript, plutôt que de réinventer la poudre à chaque fois.
     
  5. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Je fais un petit rectificatif, je connais le nombre d'id utilisé puisqu'ils sortent d'un bd. Je connais également les id et valeur utilisé par les cookies. Crois tu vraiment qu'il soit nécessaire de se former à un framwork genre jquery alors que j'en aurais que très peut l'utilité ?
     
  6. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Tu en aurais grave l'utilité car ça simplifierait énormément ton code, et c'est nettement plus pérenne que l'appel à l'ancien à l'objet XMLHttpRequest, et à son équivalent sur IE.
     
  7. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    +1
    pourquoi vouloir charger un énorme fichier js quand on n'a besoin que d'une dizaine de ligne js ? d'un côté, tous les webmasters cherchent à réduire la taille de leurs pages et d'un autre côté, ils chargent des js de plus en plus gros. :wink:
     
  8. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Certes, mais en utilisant un framework js, on s'affranchit de pas mal de problème de compatibilité entre navigateurs.

    Pour ta question tryan, plutôt que de boucler sur tes id, tu peux aussi comme je le disais plus haut affecter une classe identique à toutes les div que tu veux modifier, et utiliser https://developer.mozilla.org/fr/DOM/document.getElementsByClassName pour en récupérer la liste afin de la parcourir
     
  9. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Salut,

    Bon, je teste et re-teste avec "document.getElementsByClassName" mais je suis toujours confronté au faite que mes div ne s'actualisent pas automatiquement. En gros, j'ai remplacé :
    Code:
    document.getElementById('affiche')
    Par
    Code:
    document.getElementsByClassName('affiche')
    Et changé mes "id" de mes "div" par des "class." Si j'ai une seule class, ça fonctionne, à partir de 2 ça ne marche plus!
    En même temps comme je suis un peut une brèle dans le domaine, je fais sans doute n'importe quoi! Si tu as un exemple concret sous le coude, je suis preneur.

    Juste pour bien me faire comprendre, voici 2 exemples de ce que je cherche à réaliser (système de sauvegarde des annonces par le biais des images sous forme d'étoile) :
    -http://www.tesannonces.com/
    -http://www.toutypasse.com/vehicules-c1
     
  10. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
  11. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Merci de tes réponses UsagiYojimbo mais je crains devoir en rester là :( . Pour le moment ça dépasse mes limites et je teste comme un "con" sans comprendre ce que je fais et forcément je n'aboutis à rien.

    Merci quand même pour l'orientation ;).
     
  12. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Pas testé mais ça devrait le faire :

    Code:
    //get list of div with affiche class
    var a_div = document.getElementByClassName('affiche').innerHTML = xhr.responseText;
    //associate ajax reponse with each of the affiche div
    for ( item_div in a_div ) {
       a_div[keyVar].innerHTML = xhr.responseText;
    }
    
     
  13. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Tu est encore plus têtu que moi :mrgreen: !
    Au cas ou je me serait planté :
    Code:
    function ajax(page, fonction)
    {
    	var xhr=null;
    	if (window.XMLHttpRequest) {
    		xhr = new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject)
    	{
    		xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xhr.open("GET", "" + page + "?" + fonction + "", false);
    	xhr.send(null);
    	//document.getElementById('affiche' + '1').innerHTML = xhr.responseText;
    	//get list of div with affiche class
    	var a_div = document.getElementByClassName('affiche').innerHTML = xhr.responseText;
    	//associate ajax reponse with each of the affiche div
    	for ( item_div in a_div ) {
    		a_div[keyVar].innerHTML = xhr.responseText;
    	}
    
    }
    
    Ensuite je fais une succession de 2 div :
    Code:
    <div class="affiche">mon code php voir précédent post</div>
    <div class="affiche">mon code php voir précédent post</div>
    Résultat :
    Le contenu des div ne s'actualisent pas.
    Pour mes testes -> -http://pole-annonces.com/test%20ajax/page1.php
     
  14. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Me suis raté dans mes copier-coller, et il y a une erreur dans l'intitulé de la fonction.

    Remplace

    Code:
    var a_div = document.getElementByClassName('affiche').innerHTML = xhr.responseText;
    
    par

    Code:
    var a_div = document.getElementsByClassName('affiche');
    
    Rassures-moi, tu bosses bien sur Firefox avec le plugin Firebug de manière à identifier tous les bugs JS et autres prises de têtes ?
     
  15. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    J'ai remplacé et ça ne change rien. De plus, je ne vais pas te rassurer ... je n'utilise pas Firebug :oops: mais je viens de l'installer.

     
  16. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    il t'indique bien l'erreur "keyVar is not defined" tu utilises keyVar sans l'avoir définie dans ta fonction
     
  17. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Oui, j'avais bien comprit l'erreur mais de la à y remédier seul ... impossible! Je ne pige rien du tout au bout de code de UsagiYojimbo. Je crois comprendre qu'il créé en premier un tableau puis qu'il boucle dessus et encore ...
     
  18. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    Remplace keyVar par item_div (un copié-collé raté).
     
  19. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 161
    J'aime reçus:
    338
    Comme UsagiYojimbo te l'a conseillé, un framework JS c'est bien.
    Et +1 pour Firebug, je me demande comment on faisait sans avant...

    Je viens de faire un exemple (+code source) de ce que tu veux faire en quelques lignes avec jQuery:
    http://bit.ly/fjwHlu
     
  20. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    sauf que ces frameworks amènent leurs lots de "problèmes" js. Regardez dans la console js (via webdevelopertoolbar ?) et affichez tous les avertissements, on s'aperçoit ainsi que jquery (mais ceux de gg aussi), laissent beaucoup de problèmes sous-jacents
     
  21. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Bonjour,

    @UsagiYojimbo : modification faite, lorsque je clique sur un lien, tout les liens disparaissent. Il faut actualiser la page manuellement pour que le lien cliqué passe à "sauvegardé" et que les autres s'affichent normalement.

    @spout: excellent, ça fonctionne du premier coup :wink: ! Cependant 3 questions me "taraudes" l'esprit :
    1- Faut il laisser l'appel à -http://code.jquery.com/jquery-1.5.min.js ou plutôt le télécharger sur son propre serveur?
    2- En remplacent le texte par une image, ça fonctionne sous FF mais pas sous IE8 ..why?
    3-Pourquoi ne peut on pas utiliser la même fonction juste en changent certains éléments de celle-ci comme ci-dessous ?:
    Code:
            function bookmark(id){
                $.post("bookmark.php", { id: id }, function(data) {
                     $('#bookmark-' + id).html(data);
                   });
            }
    		        function close(id){
                $.post("close.php", { id: id }, function(data) {
                     $('#close-' + id).html(data);
                   });
            }
    
    Ceci dit, merci pour vos aides :D .
     
  22. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 161
    J'aime reçus:
    338
    1) A toi de voir, la version hébergée (CDN), plus de chances que les visiteurs l'aient déjà en cache, mais dépend de la disponibilité d'un autre serveur.
    2) Je viens de tester dans l'exemple que je t'ai fourni, ça fonctionne chez moi (IE8, FF 3.6.13, Chrome 9 Beta)
    3) Probablement car "close" est un mot réservé en JS.
     
  23. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Merci de tes réponses spout :D

    Pour la question 2, j'ai trouvé l'erreur et elle est un peut "zarbi". Si je mets un "é" dans l'attribut "alt" de l'image, IE8 n'en veut pas!
    Par ailleurs, je ne savais pas que certains mots était réservé en JS.

    Merci pour le coup de pouce, je vais enfin pouvoir finaliser mon site :wink: .
     
  24. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 161
    J'aime reçus:
    338
    Je viens de reproduire ce "bug", c'est parce que le retour de bookmark.php doit être encodé en UTF-8.
     
Chargement...
Similar Threads - Actualiser multiples div Forum Date
Actualiser un script php toutes les 10 secondes Développement d'un site Web ou d'une appli mobile 6 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
Index Google difficile à réactualiser Problèmes de référencement spécifiques à vos sites 22 Novembre 2018
google search me dit d'actualiser wordpress Problèmes de référencement spécifiques à vos sites 14 Février 2017
Google met beaucoup de temps à actualiser les données de mon site Problèmes de référencement spécifiques à vos sites 9 Septembre 2014
[Google news] Actualiser un article ? Référencement Google 26 Avril 2014
Actualiser base de donnée sans actualiser la page Développement d'un site Web ou d'une appli mobile 19 Juin 2013
Actualiser le contenu d'un div chaque 3 secondes Développement d'un site Web ou d'une appli mobile 14 Septembre 2012
Actualiser un div par onclick? Développement d'un site Web ou d'une appli mobile 28 Juin 2012
[JS] Actualiser options <select> après choix d'un autre <select> Développement d'un site Web ou d'une appli mobile 28 Juin 2012
Actualiser ses pages Débuter en référencement 1 Décembre 2011
Faut il actualiser ou pas des pages indexees sous blogger Débuter en référencement 14 Avril 2009
comment actualiser la page en php à chaque seconde Développement d'un site Web ou d'une appli mobile 18 Mars 2009
Actualiser un champ dans d'une table Développement d'un site Web ou d'une appli mobile 10 Mars 2009
Fermer et actualiser au même temps Développement d'un site Web ou d'une appli mobile 20 Avril 2007
PHP->Actualiser une page Développement d'un site Web ou d'une appli mobile 28 Décembre 2006
Page menu et "actualiser la page courante" Débuter en référencement 27 Octobre 2006
rentable d'actualiser de vieilles pages ou non Débuter en référencement 18 Juillet 2006
Upload, obligé d'actualiser pour voir le résultat Développement d'un site Web ou d'une appli mobile 19 Avril 2006
Compteur temp réel sans actualiser Développement d'un site Web ou d'une appli mobile 19 Novembre 2005