[AJAX] Rafraichissement de tableau dans balise <div> apres entrée de nouvelle valeur

Version imprimable

Bonjour,
je me noie depuis quelques jours à essayer de faire quelque chose qui doit pouvoir se faire en PHP (et peut-être Ajax...).
J'ai un formulaire, on va dire d'une personne donnée, qui contient un tableau dynamique affichant par exemple les CD de cette personne.
Je voudrais pouvoir ajouter un CD, via un popup par exemple, et que cet ajout mette à jour la table SANS rafraichir toute la page qui contient d'autres champs que je suis entrain de remplir!
Je crois que cela peut fonctionner via une balise <div>. J'ai trouvé comment modifier un menu en fonction d'un autre, mais dans mon cas, il faut passer par une fenetre d'ajout... alors je suis perdu!
Quelqu'un aurait une solution?
Merci!

Mise à jour!
J'ai trouvé un code qui me parait bon, mais qu'il faudrait adapter de manière à ce que le résultat affiché en <div> ne soit pas un texte, mais le resultat d'une Query PHP/MySQL qui se fait dans un fichier externe (ex: actualisation.php)...
Voila le script:
Code:

1 2 3 4 5 6 7 8 9 <script type='text/javascript'> function afficher(t) { if (t==2) phrase="Bravo, quelle culture !"; else {phrase="Non, essayez autre chose !";} output="<p style='font-size: 16pt'>" + phrase + "</p>"; phrase = document.getElementById('montexte'); phrase.innerHTML = output; } </script>
Et le HTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>Testez votre culture informatique !!!</h1> <p>Macintosh est une marque bien connue d'ordinateurs. Ce mot est : <br> 1) le nom de son inventeur <a href="javascript:afficher(1)">"Charles Macintosh"</a> <br> 2) le nom d'une variété de pomme <a href="javascript:afficher(2)">"McIntosh"</a> <br> 3) le nom de la ville <a href="javascript:afficher(3)">"Macintosh City"</a> où le célèbre Steeve Jobs a construit le premier ordinateur personnel dans son garage.</p> <p><a href="http://perso.wanadoo.fr/bernard.langellier">© Bernard Langellier</a></p> <div id="montexte"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type='text/javascript'>
	function afficher(t) {
		if (window.XMLHttpRequest)
{ 
    xhr = new XMLHttpRequest();
} 
else 
   if (window.ActiveXObject)
   {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else{return false}
xhr.onreadystatechange = function(){
   xhr.open("GET","actualisation.php")
   if(xhr.readyState==4 && xhr.status==200){
		phrase.innerHTML = xhr.responseText;
   }
}
  xhr.send(null);
}
</script>

Citation:

Envoyé par Bovino

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
	function afficher(t) {
		if (window.XMLHttpRequest)
{ 
    xhr = new XMLHttpRequest();
} 
else 
   if (window.ActiveXObject)
   {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else{return false}
   xhr.open("GET","actualisation.php")
   if(xhr.readyState==4 && xhr.status==200){
		phrase.innerHTML = xhr.responseText;
   }
  xhr.send(null);
}
</script>

pourquoi faire

Code:

1
2
3
4
 
if(xhr.readyState==4 && xhr.status==200){
		phrase.innerHTML = xhr.responseText;
   }

avant :

Code:

1
2
 
xhr.send(null);

01/09/2008, 14h49
Bovino
Une habitude, j'ai appris comme ça donc je garde le même schéma :
- On crée l'objet xhr
- On crée la requête
- On indique comment traiter le résultat une fois obtenu
- On lance la requête.

Citation:

Envoyé par Bovino

Une habitude, j'ai appris comme ça donc je garde le même schéma :

On crée l'objet xhr
On crée la requête
On indique comment traiter le résultat une fois obtenu
On lance la requête.

Je crains que ça ne marche.
j' ai pas vu de onreadyStateChange. Tout se passe comme ci tu verifie l' etat de xhr avant d' envoyer la requete.

Je ferais plutot :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html>
<head>
<script>
var xhr = null;
 
// Fonction de creation de l'objet XMLHttpRequest qui resservira pour chaques fonctions AJAX
function getXhr()
 {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject)
   {  
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else 
   { 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour"); 
    xhr = false; 
   } 
 }
 
// Premiere fonction : remplacer le contenu d'un div
 
function ajaxnom()
 {
  getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // Nous remplacons le contenu du div iris par le retour de salut.php
      document.getElementById('nom').innerHTML = xhr.responseText;
     }
   }
  xhr.open("POST",'salut.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("nom="+document.getElementById('txt').value);
 }
<script>
</head>
<body>
<form>
Nom : <input type=text id="txt"><br>
<input type=button onClick="ajaxnom()">
</form>
<div id="nom"></div>
</body>
</html>

coté php:

Code:

1
2
3
4
5
6
 
<?php
// la page nom.php
$nom=$_POST['nom'];
echo "BONJOUR MONSIEUR/MADAME ".$nom;
?>

01/09/2008, 15h27
Bovino

Citation:

j' ai pas vu de onreadyStateChange.

Tu risques pas de le voir, je l'ai oublié...:oops: :aie:

EDIT:
Rectifié... merci !
01/09/2008, 15h34
darrylsite

pas de quoi.
02/09/2008, 17h16
tiquisrd

Merci!!

Merci beaucoup!
Je vais essayer tout ca!