Discussion :

[medessad]

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

[bmartin]

Bonjour,

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

il te faudra juste changer ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[medessad]

J'ai beau essayé, mais aucun résultat , le code n'arrive pas à entrer dans la condition if

[bmartin]

tu peux poster ton code ?

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[medessad]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bmartin]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[medessad]

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

[bmartin]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

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

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

[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;

[NoSmoking]

1- Changer span par div;

et pourtant

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

La structure d'un SELECT est simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

[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

[NoSmoking]

...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();...?

[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