Actualiser multiples div en ajax ?

[tryan]

Bonjour,

Pour commencer, je suis nul en ajax!

page1.php :
J'envoie une requête à "page2.php" qui transmet un "id" et je récupère la réponse dans "div=affiche".

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<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').innerHTML = xhr.responseText;
 
}
 
</script>
 
<div id="affiche">
<? 
if($moncookie[24]==24){
	echo 'Annonce sauvegardé.';
}
else{
	echo '<a href="javascript:ajax(\'page2.php\', \'id=24\');">Sauvegarder cette annonce?</a>';
}
?>
</div>

page2.php :
Cette page est chargé de créer des cookies en fonction de "l'id" reçut.

Code :

1
2
3
4
5
 
<?php
$id = $_GET['id'];
setcookie("moncookie[$id]", "$id", time()+60*60*24*365);
?>

Jusque la, pas de soucis!
Comme j'ai plusieurs "id", j'ai forcément plusieurs cookies de créés mais comme mon div utilise un "unique id" seul le premier fonctionne.

Comment transformer mon code pour que je puisse utiliser une suite de div associé chacun à un identifiant unique du style :

<div id="affiche1">
mon texte
</div>
<div id="affiche2">
mon texte
</div>
<div id="affiche3">
mon texte
</div>

?

Merci

[tryan]

Re,

J'avance un petit peut ...
Si dans la fonction ajax je fais :

Code :

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

Puis :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<div id="affiche24">
<? 
if($moncookie[24]==24){
	echo 'Annonce sauvegardé.';
}
else{
	echo '<a href="javascript:ajax(\'page2.php\', \'id=24\');">Sauvegarder cette annonce?</a>';
}
?>
</div>

ça fonctionne. Il faut donc (je suppose) que je boucle sur la fonction dans le style :

Code :

1
2
3
 
     for(var i=0; i<n; i++)
    document.getElementById('affiche' + i).innerHTML = xhr.responseText;

..mais ça ne fonctionne pas car je suis obligé d'actualiser la page manuellement pour afficher les "div" !

[RomainVALERI]

Il faut que tru crées un nouveau div à la volée au retour de ta requête ajax (pourquoi une requête synchrone d'ailleurs ? ) avec quelque chose comme

Code javascript :

1
2
3
4
var d = document.createElement("DIV");
d.id = prochainId;// la variable prochainId étant calculée en fonction des divs déjà présents dans le conteneur
//(ça peut être simplement une variable globale, ou un input hidden, ou une propriété d'un objet global, etc. à voir selon ton contexte)
document.getElementById("idDuConteneurDesDivs").appendChild(d);