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

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

<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

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

peut être remplacé par

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 :

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

<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. :wink:

 

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

document.getElementById('affiche')

Par

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 :

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 :

//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 :mrgreen: !
Au cas ou je me serait planté :

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 :

<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

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

par

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;

 

[Leonick]

il t'indique bien l'erreur "keyVar is not defined" tu utilises keyVar sans l'avoir définie dans ta fonction

 

[tryan]

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

 

[UsagiYojimbo]

Remplace keyVar par item_div (un copié-collé raté).

 

[spout]

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

 

[Leonick]

Comme UsagiYojimbo te l'a conseillé, un framework JS c'est bien.

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

 

[tryan]

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

        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 .

 

[spout]

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.

 

[tryan]

Merci de tes réponses spout

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

 

[spout]

Si je mets un "é" dans l'attribut "alt" de l'image, IE8 n'en veut pas!

Je viens de reproduire ce "bug", c'est parce que le retour de bookmark.php doit être encodé en UTF-8.