Actualiser multiples div en ajax ?

WRInaute passionné
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
 
WRInaute passionné
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 ?
 
WRInaute accro
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.
 
WRInaute passionné
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é ?
 
WRInaute accro
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.
 
WRInaute accro
tryan a dit:
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:
 
WRInaute passionné
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
 
WRInaute passionné
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 ;).
 
WRInaute accro
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;
}
 
WRInaute passionné
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
 
WRInaute accro
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 ?
 
WRInaute passionné
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.

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;
 
WRInaute passionné
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 ...
 
WRInaute accro
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
 
WRInaute accro
spout a dit:
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
 
WRInaute passionné
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 .
 
WRInaute accro
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.
 
WRInaute passionné
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: .
 
Discussions similaires
Haut