[AJAX] XMLHttpRequest et javascript

Version imprimable

13/06/2013, 09h57
neperien

[AJAX] XMLHttpRequest et javascript
Bonjour à tous et toutes,

Je n'arrive pas à faire du javascript dans la page qui est appellé par la XMLHttpRequest. voici mon code :
Code:

1 2 3 4 5 6 <?php session_start(); require_once("SYS_fonctions.php"); require_once("SYS_object.php"); connecter_base(); echo "<script>alert(\"hello\");</script>"; ?>
Le echo ne fonctionne pas, parce qu'un afficher la source + ctrl f de script ne m'affiche rien ... Est ce que c'est normal ?

Merci d'avance,
Cdialement, Neperien
13/06/2013, 10h06
andry.aime

Bonjour,

Regarde la Faq: :fleche: Comment évaluer le contenu des balises script retourné par un appel Ajax?.

A+.

Code:

1
2
3
4
var mesScripts = document.getElementById("idDuDivDInsertion").getElementsByTagName("script");
for (var i=0; i<mesScripts.length; i++) {
eval(mesScripts[i].innerHTML);
}

Je place ça ou ?
Dans la page appellé ou la page appellante ?

13/06/2013, 10h41
Bovino

Ben... avec AJAX, c'est quand même supposé être la même... :aie:
13/06/2013, 10h46
neperien

Oula mon cerveau a explosé la lol . J'ai pourtant deux pages php conformément au tuto. Je sais bien que la page html est la même, et si j'y met dans la page php appellé, ça sera surement pas interprété, si j'y met dans la page appellante, ça ne marche toujours pas. Je bloque un peu la :cry:
13/06/2013, 10h56
andry.aime

Peut-on voir ton code javascript et php appelé?

A+.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="idDuDivDInsertion"><script>alert("hello");</script></div>
<?php	
	echo "<select id =\"phase\" name='phase' onChange=\"go2()\">";
	echo "<option value='-1'>Aucun</option>";
	if(isset($_POST["idAtelier"])){
 
		mysql_connect("localhost","asfuser","userasf");
		mysql_select_db("vefceit");
		$res = mysql_query("SELECT * FROM phase 
			WHERE num_atelier=".$_POST["idAtelier"]);
		while($row = mysql_fetch_assoc($res)){
			$var ="";
			if(isset($_POST["num_phase"])){
				if($row["num_phase"]==$_POST["num_phase"]){
					$var = "selected = \"selected\"";
					}
				}
			echo "<option value='".$row["num_phase"]."' ".$var.">".$row["titre"]."</option>";
		}
	}
	echo "</select>";
?>

13/06/2013, 11h07
andry.aime

Code:

<script type="text/javascript">

Et attention, la variable $var n'est pas définie si la variable num_phase n'est pas posté.
Et le code javascript de l'AJAX?

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
<script type='text/javascript'>   		
   		function getXhr(){
   			var xhr = null;
   			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...");
							xhr = false;}
				return xhr;
				}
			function go(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('numero_phase').innerHTML = leselect;
						}
				}	
				xhr.open("POST","ajaxLivre.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('titre');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAtelier="+idauteur+"&num_phase=91");
				}
		function go2(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('resultat_sql').innerHTML = leselect;
						}
				}	
				xhr.open("POST","SYS_table_qcm.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				sel = document.getElementById('phase');
 
				idauteur = sel.options[sel.selectedIndex].value;
 
				xhr.send("idPhase="+idauteur+"&tabChamp[0]=num_qcm&tabChamp[1]=num_atelier&tabChamp[2]=num_phase&tabChamp[3]=libelle&tabChamp[4]=reponse&tabChamp[5]=url&tabChamp[6]=nombre_choix&tabChamp[7]=num_seq");
				}
		</script>

13/06/2013, 11h35
andry.aime

Il n'y a pas de code du faq dans ton code javascript. Tu dois le mettre dans le onreadystatechange en utilisant le div mis à jour.

A+.

J'ai rajouté

Code:

1
2
3
echo"\n	<script type='text/javascript'>\n	 var mesScripts = document.getElementById(\"idDuDivDInsertion\").getElementsByTagName(\"script\");"
."\nfor (var i=0; i<mesScripts.length; i++) \n{\neval(mesScripts[i].innerHTML);"
."\n} \n</script>";

dans la page appellé, et dans la page appelante, et ça marche toujours pas.

13/06/2013, 11h42
andry.aime

Citation:

Envoyé par andry.aime

Tu dois le mettre dans le onreadystatechange en utilisant le div mis à jour.

Et c'est le div de l'id que tu mets à jour que tu utilises, celui de la Faq n'est qu'un exemple.

A+.

Merci de l'info.
Voici a quoi ressemble mon code js maintenant :

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
57
58
function getXhr(){
   			var xhr = null;
   			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...");
							xhr = false;}
				return xhr;
				}
			function go(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('numero_phase').innerHTML = leselect;
						evalueScripts('atelier');		
						}
				}	
				xhr.open("POST","ajaxLivre.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('atelier');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAtelier="+idauteur+"&num_phase=91");
 
				}
		function go2(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('resultat_sql').innerHTML = leselect;
                          evalueScripts('phase');		
 
						}
				}	
				xhr.open("POST","SYS_table_qcm.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				sel = document.getElementById('phase');
 
				idauteur = sel.options[sel.selectedIndex].value;
 
				xhr.send("idPhase="+idauteur+"&tabChamp[0]=num_qcm&tabChamp[1]=num_atelier&tabChamp[2]=num_phase&tabChamp[3]=libelle&tabChamp[4]=reponse&tabChamp[5]=url&tabChamp[6]=nombre_choix&tabChamp[7]=num_seq");
				}
        function evalueScripts(targetId) {
      var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
      for (var i=0; i<mesScripts.length; i++) {
              eval(mesScripts[i].innerHTML);
      }
      }

Tout a l'air ok, les sélections marchent bien, mais le reste bug...8O8O

Citation:

Code:

1
2
document.getElementById('numero_phase').innerHTML = leselect;
						evalueScripts('atelier');

:roll:

13/06/2013, 12h33
neperien

Merci d'avoir remarqué ça. :ccool:
Même aprés avoir corrigé ma bourde ça ne marche pas... :oops:

Voici à quoi ressemble mon code :

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
57
58
59
60
61
62
63
 
<script type='text/javascript'>
function getXhr(){
   			var xhr = null;
   			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...");
							xhr = false;}
				return xhr;
				}
			function go(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('numero_phase').innerHTML = leselect;
						evalueScripts('numero_phase');		
						}
				}	
				xhr.open("POST","ajaxLivre.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('atelier');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAtelier="+idauteur+"");
										evalueScripts('numero_phase');		
 
 
				}
		function go2(){
 
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && (xhr.status == 200||xhr.status==0)){
						leselect = xhr.responseText;
						document.getElementById('resultat_sql').innerHTML = leselect;
						evalueScripts('resultat_sql');
						}
				}	
				xhr.open("POST","SYS_table_qcm.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				sel = document.getElementById('phase');
 
				idauteur = sel.options[sel.selectedIndex].value;
 
				xhr.send("idPhase="+idauteur+"&tabChamp[0]=num_qcm&tabChamp[1]=num_atelier&tabChamp[2]=num_phase&tabChamp[3]=libelle&tabChamp[4]=reponse&tabChamp[5]=url&tabChamp[6]=nombre_choix&tabChamp[7]=num_seq");
				evalueScripts('resultat_sql');
				}
				function evalueScripts(targetId) {
      var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
      for (var i=0; i<mesScripts.length; i++) {
              eval(mesScripts[i].innerHTML);
      }
      }
		</script>

Et voici à quoi ressemble la page appellé :

Code:

1
2
 
<script type='text/javascript'>alert("hello");</script>

Code:

1 2 3 4 5 6 7 8 var js = document.getElementById('numero_phase').getElementsByTagName('script'); for( var i in js ) { alert(js[i].text); alert(js[i].innerHTML); eval(js[i].innerHTML); }
C'est la que je me suis rendu compte que js[i].text tout comme js[i].innerHTML est undefined . Quelqu'un a une idée pour me sauver la mise svp ?

14/06/2013, 16h10
neperien
Code:

1 2 3 4 5 6 alert(js.length); for( var i =0;i<js.length;i++ ) { alert(js[i].text); eval(js[i].innerHTML); }
Le premier alert me renvoie 0
[edit]Tout marche bien sur firefox. Je brule IE ou pas ? Evidemment je bosse que sur ie... [/edit]
14/06/2013, 16h16
andry.aime

Code:

eval("("+js[i].innerHTML+")");
14/06/2013, 16h23
neperien

Citation:

eval("("+js[i].innerHTML+")");

Cela aurait pu marcher mais sous ie js a pour longueur 0.