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

**kingo111** · 12/04/2010, 13h20

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 :

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

**emmanuel.remy** · 13/04/2010, 23h12

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

**mrtechno01** · 14/04/2010, 14h20

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

**kingo111** · 14/04/2010, 21h59

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

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 !

**kingo111** · 15/04/2010, 10h37

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 :

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

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

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

. Le code tout simple en haut devrait marcher pourtant nan???

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

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

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

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?

**kingo111** · 15/04/2010, 11h44

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 :

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

<?php echo"quelque chose"; ?>

juste avant la balise <script> et la çà marche !

.
Par contre si je fais :

Code :

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

<?php echo""; ?>

ou s'il n'y a pas de echo avant la balise <script> ça ne fonctionne pas sous IE. What's that ???

**mrtechno01** · 15/04/2010, 15h14

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 :

Mettre plutot :

Ensuite ca devrai fonctionner sans problème

Fait un test avec ce que je t'ai marqué et dit moi après

**kingo111** · 15/04/2010, 18h42

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 :

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

<?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.

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

AJAX

Discussions similaires

Partager

Partager