[AJAX] Exécuter une fonction javascript via une requête AJAX et innerHTML

Version imprimable

Bonjour,
je viens de commencer en AJAX et j'aimerais exécuter une fonction java script contenue dans un fichier externe appelée avec une requette AJAX :
page mère :

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
 
function updateDiv (url) {
	alert(url);
    new Ajax.Request(
        url,
        {
            contentType: 'text/html',
            evalScripts:true,
            encoding: 'iso-8859-1',
            method: 'post',
            onComplete: myAjax
  }
    );
}
 
 
 
function myAjax(originalRequest) {
    if (originalRequest.readyState == 4)
    {
        if (originalRequest.status==200)
        {
 // originalRequest.responseText --> renvoie le data dans les div concernées
        	alert(originalRequest.responseText);
        	$('mydivConteneur').innerHTML = originalRequest.responseText;
 
        }
    }
 
}

fichier fille (appelé par updateDiv ) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<script src="/js/lib/swfobject.js" type="text/javascript" language="javascript"></script>
<div id="swfBanner">ma bannière</div>
<script type="text/javascript" language="javascript">
// <![CDATA[
	showMaj = function(){
		so = new SWFObject("/media/test.swf", "SWFcontenu", "50", "87", "7", "#FFF");
		so.addParam("wmode", "transparent");
		so.write("swfBanner");
	}
// ]]>
</script>

Pour l'instant tout ce que je vois apparaitre dans la div "mydivConteneur", c'est le texte par défaut "ma bannière"....
Help...:cry:

Salut,

Si j'ai bien compris ton problème :
1/ Tu lances une requête qui te renvoie du contenu
2/ Quand la réponse est OK, tu mets à jour le contenu
Jusqu'ici tout va bien, le code est bien inséré.
3/ Tu voudrais que ta fonction showMaj soit appelée mais ce n'est pas le cas.
Sauf erreur de ma part, la fonction showMaj n'est jamais appelée dans le code que tu postes.

D'autre part, tu utilises Ajax.Request, ce qui est bien mais pourquoi ne pas utiliser Ajax.Updater qui te permet de fair exactement ce que tu veux...

Par ailleurs, mais sans certitude, je me demande si le CDATA ne pose pas un problème : est-ce que le parser prototype ne va pas tout simplement ignoré ce qu'il y a dedans.

En résumé, un code comme celui là ne fonctionne-t-l pas mieux :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function updateDiv (url) { alert(url); new Ajax.Updater('mydivConteneur', url, { contentType: 'text/html', evalScripts:true, encoding: 'iso-8859-1', method: 'post', onComplete: showMaj // ou onSuccess ? } ); }

01/05/2009, 04h36
Oscar Hiboux
Salut !

Essaye d'utiliser la méthode Element#update au lieu de changer la propriété innerHTML directement. Je viens de faire un p'tit test rapide et en appliquant ta méthode les scripts ne sont pas évalués. Je ne sais plus quel est le comportement par défaut des navigateurs lorsque l'on insère des éléments script à la volée via innerHTML mais on dirait bien que Firefox refuse de le faire. Je me souviens aussi qu'il y a une histoire d'attribut defer avec lequel j'ai déjà eu à composer pour IE. Bref, utilise Element#update ! :D

Exemple:

Code:

$("pouet").update('<script>console.log("pouet");</script>');

Autrement, si je peux me permettre une remarque sur ton code, tu n'es pas obligé de faire ta tambouille avec le readyState-tralala. prototype.js l'enfouit très bien, ça serait dommage de le faire réapparaître ! :mrgreen:
Sinon, originalRequest c'est plutôt une réponse à présent (1.5 -> 1.6) donc tu pourrais l'appeler response, ça serait plus élégant. ^^
Citation:
Envoyé par nina_bee

Bonjour,

Code:

1 2 3 4 function myAjax(response) { $("mydivConteneur").update(response.responseText); }
Ça commence à ressembler étrangement aux entrailles d'un Ajax.Updater, en effet ! :aie: