Actualiser multiples div en ajax ?

[tryan]

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: Tout sélectionner

<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: Tout sélectionner

<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: Tout sélectionner

document.getElementById('affiche' + '1').innerHTML = xhr.responseText;

peut être remplacé par

Code: Tout sélectionner

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: Tout sélectionner

for( i=0; i<n; i++){
document.getElementById('affiche' + i).innerHTML = xhr.responseText;
}

Code: Tout sélectionner

<div id="affiche1">***</div>
<div id="affiche2">***</div>
<div id="affiche3">***</div>
etc...

Tout coup de pouce est bienvenue

merci

[UsagiYojimbo]

Et ton n, tu le définis comment ?

[tryan]

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 ?

[UsagiYojimbo]

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.

[tryan]

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

[UsagiYojimbo]

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.

[Leonick]

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

+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.

[UsagiYojimbo]

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

[tryan]

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: Tout sélectionner

document.getElementById('affiche')

Par

Code: Tout sélectionner

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

[UsagiYojimbo]

La doc (lien que je t'ai envoyé dit :

Code: Tout sélectionner

Renvoie un ensemble d'éléments portant le nom de classe donné


Si tu as plusieurs éléments qui possèdent cette classe, tu es donc face à un array qu'il va te falloir parcourir : http://community.invisionpower.com/topic/168975-javascript-foreach-equivalent/

[tryan]

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 .

[UsagiYojimbo]

Pas testé mais ça devrait le faire :

Code: Tout sélectionner

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


[tryan]

Tu est encore plus têtu que moi !
Au cas ou je me serait planté :

Code: Tout sélectionner

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: Tout sélectionner

<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

[UsagiYojimbo]

Me suis raté dans mes copier-coller, et il y a une erreur dans l'intitulé de la fonction.

Remplace

Code: Tout sélectionner

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


par

Code: Tout sélectionner

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 ?

[tryan]

J'ai remplacé et ça ne change rien. De plus, je ne vais pas te rassurer ... je n'utilise pas Firebug mais je viens de l'installer.

keyVar is not defined
ajax(page="page2.php", fonction="id=25")page1.php (ligne 23)
javascript:ajax('page2.php',%20'id=25');()javasc...d=25'); (ligne 1)
[Stopper sur une erreur] a_div[keyVar].innerHTML = xhr.responseText;