11548 sujets

JavaScript, DOM et API Web HTML5

Faire passer des scripts js par ajax via innerhtml?

voici mon problème, je fais appel à une page php par ajax avec l objet xhr, tout se passe nickel, sauf que les scripts Js que j'appelle dans le <head> de cette page php ne s’exécutent pas une fois passés par un innerhtml...

Ais-je zappé quelque chose?

voici mon appel par ajax, je ne met pas la creation de la fonction getxhr():

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)
   {
	resultat = xhr.responseText;
   }
}
xhr.open("POST","annonces.php",true);
xhr.send(null);


ensuite j'injecte par innerhtml dans la div voulue: 


$('hori1').addEvents({
    mouseenter: function(){
     this.morph({
        'opacity': 1,
        'background-color': '#d2ddec',
        'margin-top':'-550px',
        'z-index':9
      }).[b]innerHTML= resultat;[/b]
	  ;
...


sur ma page php les scripts fonctionnent tres bien, mais plus apres l'injection en innerhtml...
Je pense que cela viens du fait que tu travaille en mode asynchrone pour ta fonctionnalité AJAX. j'ai eu un souci similaire: Ma fonction JS était appelée avant que le résultat de la requête AJAX soit disponible.

Si tu passes en mode asynchrone (code ci-dessous) cela fonctionne-t-il?


var xhr = getXhr() 
xhr.open("POST","annonces.php",false); 
xhr.send(null);
resultat = xhr.responseText;

Modifié par mamax (11 May 2011 - 15:23)
Au fait... Bonjour !

Renseigne toi auprès de la fonction eval de javascript. Elle permet d'évaluer ton code et de ne pas l'insérer en tant que "texte" dans ta div html.

A plus
Ah, j'avais pas bien lu ton post....

une question:
hormis les JS qui ne sont pas exécutés, est-ce que ton innerHtml fonctionne? dans le sens ou il affiche le reste de la page php appelée?
oui excusez moi, tout d'abord : Bonjour et merci pour vos réponses! Smiley smile

Oui le résultat de l'injection par innerhtml de ma page php est nickel, juste ce hik, des scripts js non exécutes, mais je vais aller faire un tour sur la doc de la fonction eval
du coup je teste eval(); sur mon .innerhtml= eval(resultat);

quand je fais ca, l'injection ne fonctionne plus du tout, je n'ai plus le contenu de ma page php..
Bonjour,

premièrement je n'ai peut-être pas compris, mais tu essayes d'insérer, dans une div de ta page html existante, du HTML contenant un head ?
Si c'est le cas, c'est une mauvaise chose, ta page HTML en cours sera pourvu de plusieurs balise head, ce qui n'est ni valide, ni souhaitable.

Il existe des plugin pour certains framework JS ( je pense ici à MooTools et à son plug-in Assets ) qui permettent de loader des fichiers javascript/images/css dynamiquement.

Il faudrait que ton appel ajax te ressorte alors un tableau ( ou un objet ) contenant :
- le code HTML valide à insérer dans ta page
- les Assets ( fichiers externes ) à loader.

Tu insères le contenu dans ta page, tu loads les assets via la bonne méthode, et tu peux exécuter ton code.

Autre solution :
Certains navigateurs récents ( Firefox depuis la version 3.6, Chrome depuis quelques versions ) intègrent le support de l'attribut " async " de la balise script, qui permet d'ajouter en javascript une balise " script " dans le DOM et de préciser au navigateur qu'il doit charger le contenu en asynchrone avec la balise " async " mise à " true ".

Vois peut-être de ce côté, mais vraiment, insérer un retour ajax contenant un head n'est pas une bonne chose...
Modifié par n3k0 (11 May 2011 - 20:32)
Enfaite, l'affichage de la balise <script/> dans le <head> je peux très bien juste la mettre directement dans la page html, tout simplement et directement, je ne sais pas si vous me suivez ^^,
mais même comme ça le script n'agit pas sur l’élément...
donc Asset est'il vraiment nécessaire?
vu que ce quil ferait c'est intégrer cette balise dans le head..

new Asset.javascript('/mouse_enter.js', {type: 'text/javascript''})
//returns element: <script src="mouse_enter.js" type="text/javascript"></script>
dqniel a écrit :

vu que ce quil ferait c'est intégrer cette balise dans le head..

new Asset.javascript('/mouse_enter.js', {type: 'text/javascript''})
//returns element: <script src="mouse_enter.js" type="text/javascript"></script>


Bonjour,

As-tu regardé comment agit la fonction derrière (le code source) ?
Elle load l'élément, et lorsqu'il est loadé, tu peux appeler une fonction javascript de callback ( avec un " onload " dans tes paramètres ).
De cette façon, tu pourras lancer ton Javascript, mais je me demande si il n'y a pas des chances qu'un (function() {})(); fonctionne.
enfaite je n'arrives pas a faire appel a mon asset..


<script>
new Asset.javascript('smoothscroll.js', {
       onLoad: function1(){
        alert('smoothscroll.js is loaded!');
    }
});
</script>




quand je met ca dans le <head>, je n'ai pas de réaction, ais je oublié quelque chose?
Modifié par dqniel (14 May 2011 - 16:46)
dqniel a écrit :
enfaite je n'arrives pas a faire appel a mon asset..
...
quand je met ca dans le &lt;head&gt;, je n'ai pas de réaction, ais je oublié quelque chose?



Bonjour,

utilises-tu bien MooTools ou as-tu juste repris ce bout de code sans utiliser la librairie ?

Et comme je te l'ai dit, tu ne peux pas charger un head en Ajax. Il va falloir, via ton appel Ajax, ressortir un tableau ( ou objet ) contenant :
- Ton contenu
- Tes assets

Et, dans ta méthode de success Ajax, charger tes assets dynamiquement, et insérer ton contenu dans ta div.
Modifié par n3k0 (14 May 2011 - 17:35)
oui jai bien la librairie mootools dans le head de la page html visée, c'est d'ailleurs ce qui me rend assez confus...
ma page php, qui est injectée dans une div, fait appel aux scripts dans le head et tout fonctionne sur cette page php... normal.
mais une fois cette page php passée en ajax et injectée par innerhtml dans la div, comme tu me l'as fais remarquer les scripts ne passent pas.
mais pourtant je fais déjà appel a ceux ci naturellement dans le head de la page html qui recoit l' injection dynamique, donc les scripts ne comprennent pas l'injection innerhtml de ma div et donc je nai pas les effets souhaités.

Quelle sera donc la difference avec l'appel de l'asset si l'appel naturel des scripts n'agit deja pas ?




Sinon pour la creation des objets: 

var Ass= (new Asset.javascript('smoothscroll.js', { 
       onLoad: function1(){ 
        alert('smoothscroll.js is loaded!'); 
    } 
});)



Pour le contenu, l'objet est deja créé : 
resultat =(xhr.responseText);

Modifié par dqniel (14 May 2011 - 20:31)
Arf, tu n'as pas compris ce que je t'ai dis je pense...

en gros, maintenant que tu as MooTools :
- Utilises l'objet " Request " pour créer tes appels Ajax.
- De ton fichier PHP, fait ressortir un tableau, encodé via JSON, contenant deux entrées :
- Le code HTML à insérer dans ta div
- Les assets

- Via l'objet Request, dans la méthode onSuccess :
- Décode le JSON
- Mets ton contenu dans ta div
- Charge les assets

En gros :

Dans ta page initiale, ta requête Ajax donnerait :

var oRequest = new Request({
  url : 'monfichier.php',
  onSuccess : function(data) {
    var aResult = JSON.decode(data);
    var sHTML = aResult['hml'];
    $$('#maDivReceptrice').html(sHTML);
    var aAsset = aResult['assets'];
    aAssets.each(function(sAssetURL) {
      var oAsset = new Asset.javascript(sURL, onload : function() { maFonction(); });
    });
  }
});
oRequest.send();



Ton PHP :

<?php
$aResult = array();
ob_start();
?>
<p>Contenu chargé en ajax... Lorem ipsum dolor sit amet... </p>
<?php
$aResult['html'] = ob_get_clean();
$aResult['assets'] = array('monpremierfichier.js', 'monsecondfichier.js');
echo json_encode($aResult);
?>

Edit : quelques soucis avec mon code PHP qui est supprimé par la coloration synthaxique O_o
Modifié par n3k0 (14 May 2011 - 23:08)
ah oui ok, effectivement j'avais pas compris, je ne connais pas le json...

sinon avec ton code, mon php est bien encodé en json.
Par contre, quand je prend le code pour la requête ajax, j'ai une erreur sur 

  $$('#maDivReceptrice').html(sHTML);


il me retourne :
Erreur : $$("#maDivReceptrice").html is not a function


au fait pas besoin de spécifier la méthode, et l' async de la requête?
Modifié par dqniel (15 May 2011 - 21:23)
du php, de l' html et elle contenait des balises <script src="..."></<script> dans le <head>, mais j'ai appris que ce n'est pas une chose a faire d'injecter un 2 éme <head> donc je l'ai viré, il ne reste que le contenu php et html.

D'où le but de pouvoir charger les asset.javascript vers cette div
Ok. Dans ce cas, ce que tu peux faire, c'est extraire la balise head de résultat et injecter son contenu dans le contenu de la page. Ça donnerait en gros :

var queryHead=result.documentElement.getElementsByTagName('head')[0]; //récupération du head de la réponse
result.documentElement.removeChild(queryHead); //supression du head de la réponse

//injection du head de la réponse dans le head de la page
var scriptNodes=queryHead.childNodes;
var maxScriptNodes=scriptNodes.length;

for(var i=0; i<maxScriptNodes; i++){
    document.getHead().appendChild(scriptNodes[i]);
}
[/i]

Par contre, ça impose que la requete Ajax doit être récupéré sous forme de XML (donc via responseXML et pas responseText).
Modifié par MacIntoc (18 May 2011 - 17:56)
Sujet clos
Aller à