appel de javascript impossible dans page appelée en ajax

Version imprimable

Bonjour à tous,

Je met à jour un div en ajax lorsque je clique sur un bouton.
Cela fonctionne bien lorsque je n'affiche que du code XHTML.
Mais si je met du code javascript dans ce contenu, il ne s'exécute pas.

Voici un exemple :

Mon bouton, rien de bien compliqué :

Code:

1
2
3
4
 
 
<input type="button" value="envoyer" onclick="test();"/> 
<div id="data"></div>

Ma fonction "test()" :

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
 
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 { 
           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
           xhr = false; 
        } 
        return xhr;
}
 
function test(){
        var xhr = getXhr()
 
        xhr.onreadystatechange = function(){
 
          if(xhr.readyState == 4 && xhr.status == 200){
            document.getElementById("data").innerHTML = xhr.responseText;
          }
        }
        xhr.open("GET","test.php",true);
        xhr.send(null);
}

Et voici le contenu de mon fichier "test.php" :

Code:

1
2
3
 
 
<?php echo "Bonjour"; ?>

Ici, "Bonjour s'affiche bien

Mais si le contenu est celui-ci :

Code:

1
2
 
<script type="text/javascript">document.write("Bonjour" );</script>

Rien ne s'affiche, donc j'en déduis que les appels de Javascript ne fonctionnent pas.

Avez-vous une idée ?

Je vous remercie

08/08/2007, 09h09
E.Bzz
Bonjour,

Citation:

Envoyé par brazilia28

Rien ne s'affiche, donc j'en déduis que les appels de Javascript ne fonctionnent pas.

Pas de cette manière, effectivement (modifier un innerHTML n'exécute pas le code).
Il faut que tu utilises
Code:

1 2 3 if(xhr.readyState == 4 && xhr.status == 200){ eval(xhr.responseText); }
Mais au lieu d'un document.write(), il faudra que ton PHP te retournes la chaine

Code:

"document.getElementById('data').innerHTML = 'Bonjour';"

Pour info : certains déconseillent l'utilisation du eval()

A+

Merci pour cette piste.

J'essaie d'affichier un panneau Accordeon avec le framework Spry de Dreamweaver CS3.
J'ai modifié mon code comme ceci, mais malheureusement, il fonctionne seulement avec Firefox. Sous IE, j'ai une erreur de syntaxe.

Voici mon code :

index.html

Code:

1
2
3
 
<td width="25%"><h3 onmouseover="this.style.backgroundColor='#ff4532';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="moncv();">mon CV</h3></td>
<div id="data"></div>

ajax.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function moncv(){
        var xhr = getXhr()
        // 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){
            document.getElementById("data").innerHTML = eval(xhr.responseText);
			eval("var Accordion1 = new Spry.Widget.Accordion('Accordion1')");
          }
        }
        xhr.open("GET","moncv.php",true);
        xhr.send(null);
}

moncv.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
echo "<div id='Accordion1' class='Accordion' tabindex='0'>";
echo "<div class='AccordionPanel'>";
echo "<div class='AccordionPanelTab'>Etiquette 1</div>";
echo "<div class='AccordionPanelContent'>Contenu 1</div>";
echo "</div>";
echo "<div class='AccordionPanel'>";
echo "<div class='AccordionPanelTab'>Etiquette 2</div>";
echo "<div class='AccordionPanelContent'>Contenu 2</div>";
echo "</div>";
echo "</div>";
?>

Savez-vous pourquoi IE me renvoie une erreur ?

Merci beaucoup

08/08/2007, 10h45
E.Bzz

Citation:

Envoyé par brazilia28

Savez-vous pourquoi IE me renvoie une erreur ?

Parce que to PHP ne te renvoie plus un code JS (ce qui était l'objet de ta question, si je ne m'abuse), mais HTML.
eval() c'est pour une instruction JS.
Pour du code HTML, il faut rester sur ton innerHTML du début (et du coup, la question ne se justifiait pas) ...

A+
08/08/2007, 10h48
brazilia28

Oh super ça marche nickel.

Merci beaucoup de ton aide.