Actualiser multiples div en ajax ?

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

 

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 ?

 

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

 

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

 

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 .

 

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

 

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.

 

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

 

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 .

 

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