[AJAX] Javascript issue d'une requ�te Ajax

Version imprimable

Bonjour � tous,
J'avais d�j� post� dans la section PHP pour mon probl�me je vous le r� expose :
"Bonjour � tous,
J'ai un petit soucis sur le site que je suis en train de cr�er. Enfait j'ai ajout� un lecteur radio(deezer) et je voudrais que lorsque je change de rubrique(actualites,photos,contact,etc...) le lecteur ne se recharge pas, qu'il reste statique. Car sinon � chaque page le lecteur se recharge et du coup la musique qui �tait lanc� se remet en position de d�part � savoir "pause". J'esp�re que vous comprenez. Comme le site de deezer enfait.
Voil�, en esp�rant que cela soit possible.

Thierry" -> post :http://www.developpez.net/forums/d88...e/#post5031889

On m'a r�pondu d'utiliser Ajax, j'ai cherch� et j'ai r�ussi � mettre le tout en place. Cependant un autre probl�me est survenue. Lorsque je recharge juste le corps de la page avec la requ�te Ajax :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function envRequete(url, id, categorie_image) { var xhr_object = null; var position = id; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); // ouvre la requête vers la page désirée xhr_object.open("GET", url, true); xhr_object.onreadystatechange = function() { if ( xhr_object.readyState == 4 ) { // retourne dans la div le contenu document.getElementById(position).innerHTML = xhr_object.responseText; } } xhr_object.send(null); }
Si il y a du JavaScript dans le contenu de la page � afficher il ne s'ex�cute pas. Normal...mais comment faire pour retourner une page qui contiendrait du JavaScript ? En fait, le soucis c'est que j'ai une des pages qui affiche une galerie photo en JavaScript ( j'ai pens� � faire la galerie en flash, mais j'ai d�j� quelques �l�ments en flash, le site deviendrait "tout flash" et apr�s c'est pas terrible). Je pense qu'il doit y avoir une solution mais je ne vois pas laquelle ? Il faudrait recharger la page de la galerie photo � chaque clic sur une image ? Est-ce que vous voyez ce que je veux dire ? D�sol� si j'ai pas �t� clair, c'est pas simple � expliquer et je d�bute avec Ajax.

Thierry

13/04/2010, 23h12
emmanuel.remy

Salut,

La th�orie: la propri�t� innerHTML n'injecte pas les scripts dans la page... Si tu veux le faire il faut le g�rer manuellement (voir la faq AJAX et javascript)

La pratique: ce n'est pas facile de pouvoir identifer tous les scripts charg�s... Alors utilise un framework (jQuery, Dojo ou autre) qui proposent des solutions toutes faites d�di�es � Ajax...

ERE
14/04/2010, 14h20
mrtechno01

Salut kingo111

Alors pour t'aider, vas voir mon sujet a cette page, j'ai mis mon script qui marche sur IE et firefox pour ce que tu veux, et en plus ca marche avec des page appel� avec du javascript ;)

donc va a la derni�re ligne de cette page :
http://www.developpez.net/forums/d90...res-appel-div/

En esp�rant que ma fonction pourra t'aider, bonne continuation ;)
14/04/2010, 21h59
kingo111

Merci de vos r�ponses. En fait, j'ai r�ussi � faire ce que je voulais.. du moins je croyais, super content et tout ( la m�thode eval() m'a bien servi !), j'me dis allez j'essais quand m�me sous Internet Explorer on sait jamais..et la c'est le drame..:aie:
La fonction eval n'a pas l'air de fonctionner sous IE c'est bizarre, pourtant j'ai repris la fonction comme dans l'exemple de developpez.net juste avec un alert dans le <script> et �a ne marche pas..grrr. Pourtant sur le site j'ai essay� sous Internet Explorer et �� marche, je comprends pas pourtant c'est le m�me code...j'crois que je suis un boulet...bon je vais me regarder un film, j'examine ton post demain mrtechno01 et j'vous di ou j'en suis. J'vous donnerai l'adresse du site en question si j'ai toujours pas r�ussi !
Merci les gars !

Apr�s avoir �tudi� ton post mrtechno01, j'essaie : sous Firefox aucun probl�me mais sous IE toujours le m�me probl�me !
Voil� un test tout simple que j'ai fait : test.html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
 
	function post_get(fichier,div,method)
	{
		var xhr=null;
		var data="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;
		}
		xhr.open( method,fichier,false);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(data);
		var c = document.getElementById(div);
		c.innerHTML = xhr.responseText;
		try
		{
			var l=c.getElementsByTagName('script').length
			for(var j=0;j<l;j++)
			{
				var script = document.createElement('script');
				script.type = 'text/javascript';
				script.text = c.getElementsByTagName('script').item(j).text;
				document.getElementsByTagName('head')[0].appendChild(script);
			}
		}
		catch(e)
		{
		alert(e);
		}
	}
</script>
 
</head>
<body onload="post_get('test3.php', 'test', 'GET')">
 
<div id="test">
</div>
 
</body>
</html>

test3.php :

Code:

1
2
3
<script type="text/javascript">
alert("test");
</script>

Salet� d'IE, pourtant mon code fonctionnait sous Firefox, Safari, Op�ra, mais IE nan 8O. Le code tout simple en haut devrait marcher pourtant nan???

Edit : Un autre truc hallucinant :
code exemple eval de developpez.com : test.html

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
 
</head>
<body>
<div class="contenuPage"><h1>Exemple d'utilisation du script </h1>
<hr /><script type='text/javascript'>
    function getXMLHTTP(){
      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) {
          try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e1) {
            xhr = null;
          }
        }
      }
      else { // XMLHttpRequest non supporté par le navigateur
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      }
      return xhr;
    }
 
    function callUpadeScripts() {
      var _xmlHttp = getXMLHTTP();
      _xmlHttp.open("GET","test3.php");
      _xmlHttp.onreadystatechange=function() {
        if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
          document.getElementById('cible').innerHTML=_xmlHttp.responseText;
          evalueScripts('cible');
        }
      };
      // envoi de la requête
      _xmlHttp.send(null)
    }
 
    function callUpadeNoScripts() {
      var _xmlHttp = getXMLHTTP();
      _xmlHttp.open("GET","test3.php");
      _xmlHttp.onreadystatechange=function() {
        if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
          document.getElementById('cible').innerHTML=_xmlHttp.responseText;
        }
      };
      // envoi de la requête
      _xmlHttp.send(null)
    }
 
    function evalueScripts(targetId) {
      var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
      for (var i=0; i<mesScripts.length; i++) {
              eval(mesScripts[i].innerHTML);
      }
    }
</script>
<p>
    Voila un exemple de mise à jour d'un div par du contenu HTML avec ou sans évaluation des
    scripts contenus.
</p>
<div>
    <form name="update" action="javascript:void(0)">
        <input type="button" value='mets à jour le div sans scripts' onclick='callUpadeNoScripts()' />
        <br />
 
        <input type="button" value='mets à jour le div avec scripts' onclick='callUpadeScripts()' />
    </form>
</div>
<p>Le div suivant est mis à jour par un appel à Ajax:</p>
<div id='cible' style='border : red solid 1px'>&nbsp;</div>
<hr />
 
 
 
</body>
</html>

test3.php :

Code:

1
2
3
4
 
<script type="text/javascript">
alert("test");
</script>

Marche sous Firefox mais pas sous IE chez moi. Sur le site developpez.net marche sous Firefox et IE. Suis-je banni?:calim2:

15/04/2010, 11h44
kingo111

Je viens de r�soudre mon probl�me pour IE d'une mani�re extr�mement bizarre et que je n'arrive pas � comprendre, si quelqu'un peut m'expliquer :
Il suffit que je rajoute un simple

Code:

<?php echo"quelque chose"; ?>

juste avant la balise <script> et la �� marche !8O.
Par contre si je fais :

Code:

<?php echo""; ?>

ou s'il n'y a pas de echo avant la balise <script> �a ne fonctionne pas sous IE. What's that ???
15/04/2010, 15h14
mrtechno01

salut kingo111,

Je viens de voir le script que tu as mis et je vois que tu as fais un oublie dans ma fonction, car tu n'as pas mis le function donnee_get(form1) qui s'associe a la function post_get(fichier,div,method,form)

Apr�s dans ton body tu as fait une erreur d'appel de la fonction
Ton erreur :

Citation:

<body onload="post_get('test3.php', 'test', 'GET')">

Mettre plutot :

Citation:

<body onload="post_get('test3.php', 'test', 'GET',null);">

Ensuite ca devrai fonctionner sans probl�me ;)

Fait un test avec ce que je t'ai marqu� et dit moi apr�s ;)
15/04/2010, 18h42
kingo111

Non, non, c'est normal c'est moi qui l'ai vir� ! J'ai pas besoin de formulaire ! Donc j'ai enlev� l'argument form et data je l'ai laiss� par d�faut � null donc aucun soucis � ce niveau. Sinon ton script fonctionne �galement comme celui de developpez.com mais avec un

Code:

<?php echo"quelque chose" ?>

comme cit� avant. Trop bizarre, j'ai plus aucun soucis maintenant mais j'aimerais tout de m�me savoir si quelqu'un sait pourquoi est on oblig� de faire un echo avant cette balise <script> pour que celui-ci marche sous IE.