[AJAX] Mise à jour d'une div

Version imprimable

04/07/2012, 17h12
medessad

[AJAX] Mise à jour d'une div

Bonjour, j'aimerai avoir un script en ajax, qui écrira le résultat d'un echo depuis un fichier php dans une div, merci ;)

Bonjour,

Un article te l'explique très bien ici : http://siddh.developpez.com/articles/ajax/

il te faudra juste changer ça :
Code:

1 2 3 4 if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); }
par
Code:

1 2 3 4 if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("monDiv").innerHTML=(xhr.responseText); }

04/07/2012, 18h39
medessad

J'ai beau essayé, mais aucun résultat :(, le code n'arrive pas à entrer dans la condition if
04/07/2012, 20h46
bmartin

tu peux poster ton code ?
04/07/2012, 22h50
NoSmoking

Bonjour,
si tu testes en local, sans serveur local, il te faut mettre

Code:

if( xhr.readyState == 4 && ( xhr.status == 0 || xhr.status == 200)){

Citation:

Envoyé par bmartin

tu peux poster ton code ?

Ci joint, un fichier .js en complet, il a pour but de faire 2 opérations, la première c'est d'insérer la valeur d'un champs dans une base de données, ce qui se passe sans aucun problème, mais la deuxième partie, de la mise à jour du contenu du span en question, c'est là ou se passe le problème, je vais vous rajouter les fichiers 'majlivre.php' et 'printlivre.php'

"auteur.js"

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
56
 
// JavaScript Document	 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr =getXhr();
				var xhr_object =null;
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
					leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","majlivre.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				nom = document.getElementById("auteurtxt").value;
				xhr.send("nom="+nom);
				document.getElementById("autreaut").style.display="none";
				document.getElementById("auteurtxt").value="";
				var a = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				a.open("GET","printlivre.php",true);
				a.send(null);
				a.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(a.readyState == 4 && a.status == 200){
						alert('réponse ;)');
						document.getElementById("aut").innerHTML = (a.responseText);
					}
				}
		}

"majlivre.php"

/*cette partie marche bien ;)*/

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib");
	$maj = "insert into auteur values(NULL,'".$_POST['nom']."')";
	$m_a_j = mysql_query($maj);
	$sql = "select * from auteur";
	$req = mysql_query($sql);
?>

"printlivre.php"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib",$con);
	$sql = "select * from auteur";
	$req = mysql_query($sql);
while($res=mysql_fetch_assoc($req)){
		echo"
			<option value=".$res['id'].">".utf8_encode($res['nom'])."</option>
 
		";
	}
	echo "<option value=\"Autre\">Autre</option>";
?>

et c'est la partie du code html concernée par le script ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
<label for="auteur">Auteur :</label>
<br />
<select name="auteur" id="auteur" onchange="changementTypeAut();">
<span id="aut">
<?php
	$con = mysql_connect("localhost","root","");
	$db = mysql_select_db("gestion_bib");
	$sql = "select * from auteur";
	$req = mysql_query($sql);
	while($res=mysql_fetch_assoc($req)){
		echo"
			<option value=".$res['id'].">".utf8_encode($res['nom'])."</option>
 
		";
	}
?>
</span>
<option value="Autre">Autre</option>
</select>
<div id="autreaut" style="display:none"><input type="text" id="auteurtxt"/><input type="button" value="Ajouter" class="boutonform" onclick="go1();"/></div><br />

Bonjour tu récupère la réponse de ta requête ajax mais tu n'en fait rien :

Code:

1
2
3
4
5
6
7
8
 
xhr.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if(xhr.readyState == 4 && xhr.status == 200){
		leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
	}
}

05/07/2012, 12h12
medessad

Le problème est vers la fin du script cher ami, ce que tu avais mentionné, n'est pas utilisable ;)

Désolé j'avais pas vu que tu recrée une requête ajax après.
Essaye comme ca plutôt :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var a = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
 
	a.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	        if(a.readyState == 4 && a.status == 200){
		       alert('réponse ;)');
		       document.getElementById("aut").innerHTML = (a.responseText);
	        }
      }
      	a.open("GET","printlivre.php",true);
	a.send(null);

05/07/2012, 12h49
medessad

Bon, le texte est bien récupéré du fichier php, mais il ne s'écrit pas dans la page, en effet je désire mettre à jour une partie, qui représente une balise <select>
05/07/2012, 13h12
andry.aime

Bonjour,

1- une balise select ne doit contenir que des options, donc pas de span.
2- une balise select ne supporte pas innerHTML sur certains navigateurs, donc ne pense pas le faire.
Ce que tu dois faire c'est de généré un select à part entier dans un div ou span.

Ce qui est mieux pour t'aider c'est le code HTML généré par le php mais pas le code php.
A+.
05/07/2012, 16h02
medessad

Ne seriez vous pas capable de me proposer une solution? J'ai déjà commencé par 2 choses.

1- Changer span par div;
2- Le fichier php renvoie maintenant tout le select, y compris la balise de début et de fin;
05/07/2012, 18h48
NoSmoking
Citation:

Envoyé par medessad

1- Changer span par div;

et pourtant

Citation:

Envoyé par andry.aime

1- une balise select ne doit contenir que des options, donc pas de span.

La structure d'un SELECT est simple
Code:

1 2 3 4 5 <select> <option></option> <option></option> <option></option> </select>
...point final, exit les SPAN ou les DIV, mais il me semble que les navigateurs les virent quoiqu'il arrive

Citation:

Envoyé par andry.aime

2- une balise select ne supporte pas innerHTML sur certains navigateurs, donc ne pense pas le faire.

IE y est allergique et tant mieux, sinon on est capable de mettre un SELECT dans un SELECT avec des résultats assez surprenants

Citation:

2- Le fichier php renvoie maintenant tout le select, y compris la balise de début et de fin;

dans ce cas mets l'ensemble dans une DIV encapsulant le SELECT
05/07/2012, 18h55
medessad

Sa ne marche pas :( j'ai encapsulé, le résultat intégral de la requête ajax, dans la div, la div contient maintenant la totalité du select, je ne sais pas où est exactement le problème, normalement, une fois j'écrit un truc dans la div, la mise à jour se fait automatiquement mais pas pour mon cas :(
05/07/2012, 20h13
NoSmoking

Citation:

...la div contient maintenant la totalité du select...

donc l'insertion marche maintenant?

Expliques nous plus en détail ce qui ne fonctionne pas/plus, le onchange="changementTypeAut();...?
06/07/2012, 10h02
medessad

Le problème est maintenant résolu, je vais vous expliquer ce qui se passais avec moi, j'avais créé deux connections successives vers 2 fichiers différents, la fonction donc ouvrait les fichiers en même temps, du coup, elle ne prenait pas en considération les modifications que provoquait l'appel du premier fichier, le remède pour qui j'ai opté, c'est que dans le même fichier, je crée la requête d'insertion et celle de la récupération des données, et le texte récupéré c'est celui que j'injecte dans la DIV, "Le texte contient une balise <select>", et sa marche trop bien maintenant ;)