[AJAX] Du javascript dans Ajax

Version imprimable

30/07/2013, 11h11
bee37

[AJAX] Du javascript dans Ajax

Bonjour à tous et à toutes,

Après moulte fouilles à droite et à gauche, sur google, et sur différents forum (dont celui ci), je n'ai plus d'autre choix que de poster et demander votre aide.

Voilà, comme l'indique l'intitulé, je voudrais exécuter du javascript dans un fichier qui est appelé en AJAX.

C'est simple, j'ai ma page principale page1.php, qui fait appelle à page2.php via Ajax. Cette page "page2.php", permet d'afficher dans certains cas, une div dans "page1.php". Seulement voilà, cette div qui s'affiche, j'y ai introduit un bouton <input type="button"> avec un évènement "onClick" qui doit faire appelle à une fonction javascript, qui cache cette div. (En effet, c'est une div avec un message d'alerte, et le client doit pouvoir fermer cette "fenêtre" quand il le souhaite. J'ai donc décidé de cacher la div).

Seulement voilà, rien à faire, le bouton ne fonctionne pas (je précise que si je lance "page2.php" seule, le bouton fonctionne). Le script n'est pas pris en compte. Dans les recherches que j'ai effectué, j'ai trouvé des choses, je l'avoue, mais je n'ai soit pas compris, soit les informations étaient trop flou. Je me retourne donc vers vous.

Est-il possible de faire appelle à partir de "page2.php" (AJAX), à des fonctions Javascript?

Merci de votre attention, j'espère avoir été clair et précis.

Cordialement,

Bertrand
31/07/2013, 16h26
Invité

Bonjour,
=> FAQ : Comment évaluer le contenu des balises script retourné par un appel Ajax?

Pour répondre plus précisément, il faudrait une version (simplifiée) de ton code :
- page1.php
- page2.php
- + fonction JavaScript appelée dans page2.php

Bonjour, merci de votre réponse,

J'ai été voir votre lien (que je n'avais pas vu en cherchant, je m'en excuse). En effet, c'est ce qu'il me faudrait, l'exemple fournit est très intéressant. Mais je n'arrive pas bien à comprendre.

Comme demandé, voici mon code :

page1.php
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 <html> <head> <title>Page de test</title> </head> <body onLoad="go()"> <script type="text/javascript"> function getXhr(){ var xhr = null; if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ try { xhr = new ActiveXObject("Msxm12.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTP..."); xhr = false; } return xhr; } function go(){ var xhr = getXhr(); xhr.open("GET", "page2.php", true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById("MyDiv").innerHTML = xhr.responseText; //evalueScripts('script'); } } xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(null); } </script> <div id="MyDiv"> </div> </body> </html>
page2.php
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 <html> <head> <script type="text/javascript"> function cacher(){ if(document.getElementById('barreflottante').style.visibility == "visible") { document.getElementById('barreflottante').style.visibility = "hidden"; } function maFonction(){ alert('Ok'); } </script> <style> #barreflottante { position:fixed; width:250px; height:100px; right:5px; bottom:5px; z-index:110; background:#a1a1a1; border: 1px solid #000000; } </style> </head> <body> <div id="barreflottante" style="visibility:visible;"> <div style="margin-top:20px;margin-left:14px;"> Nouvelles alertes enregistrées </div> <br/><input id="bouton" type="button" style="margin-left:175px;" onclick="maFonction()" value="Fermer"> </div> </body> </html>
C'est un code test, tout simple, une première page qu'appelle une autre pour afficher une div, dans cette div, il y a un bouton, en cliquant, une alerte devrait s'afficher, mais c'est là que ca coince. (Dans le test je voudrais juste afficher une alerte, après, je pourrais faire disparaitre la div je pense: fonction Cacher()). En attendant une réponse, je vais essayer d'introduire le bout de code de l'exemple du liens.

Encore merci de prendre du temps à mon égard,

Bertrand

01/08/2013, 10h21
Invité

Bonjour,

Code:

document.getElementById("MyDiv").innerHTML=...;

Ca signifie que via Ajax, on ajoute le code de page2 DANS le div "MyDiv" de page1.

Par conséquent :
- il faut supprimer les balises <html>, <head>,<body> de page2.php
- les scripts/fonctions JavaScript et style CSS de page2.php peuvent être transférés dans page1.php => du coup, plus de problème d'interprétation.

Bon sang, c'est vrai que la ligne que vous avez mentionné indique un ajout de code dans la page initiale ! J'ai pas fait le rapprochement. Donc j'ai bien supprimé les balises <HTML>, <HEAD> et <BODY> de la page2.php.

Dans la logique, ca devrait fonctionner, comme vous dites

Citation:

les scripts/fonctions JavaScript et style CSS de page2.php peuvent être transférés dans page1.php => du coup, plus de problème d'interprétation.

Mais je comprend pas, rien ne se passe...

page1.php
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 <html> <head> <title>Page de test</title> </head> <body onLoad="go()"> <script type="text/javascript"> function getXhr(){ var xhr = null; if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ try { xhr = new ActiveXObject("Msxm12.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { xhr = null; } } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTP..."); xhr = false; } return xhr; } function go(){ var xhr = getXhr(); xhr.open("GET", "page2.php"); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.responseText) { document.getElementById("MyDiv").innerHTML = xhr.responseText; evalueScripts('MyDiv'); } }; xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.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> <div id="MyDiv"> </div> </body> </html>
page2.php
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 <script type="text/javascript"> function cacher(){ if(document.getElementById('barreflottante').style.visibility == "visible") { document.getElementById('barreflottante').style.visibility = "hidden"; } function maFonction(){ alert('Ok'); } </script> <style> #barreflottante { position:fixed; width:250px; height:100px; right:5px; bottom:5px; z-index:110; background:#a1a1a1; border: 1px solid #000000; } </style> <div id="barreflottante" style="visibility:visible;"> <div style="margin-top:20px;margin-left:14px;"> Nouvelles alertes enregistrées </div> <br/><input id="bouton" type="button" style="margin-left:175px;" onclick="maFonction()" value="Fermer"> </div>
Le CSS est bien pris en compte, ca pas de soucis, mais le <script> lui, rien n'y fait. J'ai beau cliqué sur le bouton 'Fermer', l'évènement "onClick" ne produit rien. Alors que la fonction maFonction() est la plus simple possible.

Alors ce qui est étrange, ce que j'ai testé, c'est que si je mets :

Code:

<input id="bouton" type="button" style="margin-left:175px;" onclick="javascript:alert('Ok')" value="Fermer">

donc avec l'alerte directement dans l'évènement, ca fonctionne. Donc je ne comprend pas pourquoi l'autre cas ne fonctionne pas.

01/08/2013, 10h47
bee37

Bon bah j'ai essayé ca :

Code:

<input id="bouton" type="button" style="margin-left:175px;" onclick="javascript:document.getElementById('barreflottante').style.visibility = 'hidden'" value="Fermer">

Et ca fonctionne très bien. Mon bouton ferme bien ma div. Enfin la cache quoi... ce que je voulais au début. Mais du coup je comprend rien.

Pourquoi il prend en compte le script directement inclus dans l'évènement, alors qu'il ne le prend pas, si j'appelle une fonction?

J'ai résolu mon problème, mais j'avoue que si vous avez la réponse à cette dernière question, je serais très intéressé de savoir :roll:
01/08/2013, 10h55
Invité

Malheureusement, j'arrive à la même conclusion... :koi:
A croire que les function ne sont pas évaluées... (?) re-:koi:
01/08/2013, 11h00
bee37

Ah ^^ haha, j'avoue que c'est quand même très étrange tout ca. Mais merci quand même de votre aide, j'ai pu trouver une solution :)

Je vais noté le sujet comme résolu, et si jamais vous avez des informations sur pourquoi les fonctions ne sont pas prises en compte, je serais intéressé de savoir pourquoi :ccool:

Encore merci pour avoir pris du temps pour moi,

Je vous souhaite une bonne journée, (et de bonnes vacances d'ailleurs si vous êtes en vacances ^^), et à une prochaine fois peut être.

Cordialement,

Bertrand
01/08/2013, 11h14
Invité

Comme je l'ai dit précédemment, il suffit de mettre TOUTES les fonctions dans page1.php.
01/08/2013, 11h18
bee37

Oui c'est vrai, ca reste surement la meilleure solution d'ailleurs. Parce que mettre le code directement dans l'évènement, je pense qu'on doit être limité assez rapidement.