Ajax.Updater et Déclaration de fonctions en evalScripts

10 août 2008 par: Benoit Bonneville

Prototype le Framework Javascript permet l’appel à de nombreuses fonctionnalités, dont des requettes Ajax executant du code (evalScripts).

La principale, Ajax.Updater permet d’éxécuter du code JavaScript après un appel Ajax (evalScripts), à condition que ce code ne comporte pas de déclaration de fonction classique.

Ajax.Updater de Prototype

Il s’agit d’une fonctionnalité de Prototype, le framework Javascript.

Cette méthode permet de mettre à jour le contenu d’un élément HTML de type conteneur avec le contenu d’un script, téléchargé en AJax.

Cette méthode à l’avantage d’avoir une option permettant d’executer le javascript contenu dans cette page téléchargée. (Ce qui n’est pas possible avec un appel ajax classique)
Cette option s’appel evalScripts elle permet l’évaluation du code compris entre les balises <script> et </script>.
Tout code alors éxecuter sera effacer de la source de la page.
Mais attention la déclaration de fonctions/ définition de fonctions requière une syntaxe particulière sinon elle ne seront pas définie.

Voici la syntaxe de Ajax.Updater :

new Ajax.Updater(container, url[, options])

les paramètres

  • container => un chaine de caractère qui correspond à l’élément HTML qui va recevoir
  • url => l’adresse du script Ajax.
  • options : evalScripts => valeurs (true,false) , détermine si on execute le javascript de l’ajax
  • options : insertion => valeurs (‘top’, ‘bottom’, ‘before’,’after’,’none’), détermine la position du code téléchargé dans le conteneur XHTML

Exemple

Attention cet exemple n’est pas W3C, mais il a le mérite de fonctionner.

<div id="cible"></div>
<script>
new Ajax.Updater("cible", "/script_ajax.html")
</script>

votre page script_ajax.html sera insérée dans le div cible

evalScripts avec définition de fonction

Si vous ajouter le paramètre evalScripts avec la valeur true, vous éxecuterez le code entre les balises <script> et </script> de votre page téléchargée par ajax.

Attention cependant :

// Cette déclaration ne fonctionnera pas
function votreFonction() {
// votre code
}

Alors que

// cette déclaration fonctionnera
votreFonction= function() {
// votre code
}

Dans le cas ou votre code ne fonctionnera pas, vous n’aurez rien de visible, car Prototype supprime le contenu entre les balises <script>
Généralement, aucun message d’erreur ne s’affichera, parfois un message d’erreur comme quoi le fichier prototype.js a une erreur de syntaxe.
L’opération de Debug n’est pas évidente.
Voici quelque détail sur le fonctionnement de Prototype :
En réalité Il ne fait rien d’autre que d’appeler la méthode JavaScript eval, qui ne supporte pas la déclaration de fonctions comme cité ci-dessus..
La méthode Prototype qui appel eval appelée est evalScripts, à vous d’ajouter temporairement un petit script pour comprendre ce que Prototype fait.

Vous trouverez ces informations dans l’api officielle

Filed under: Développement

Commentaires

8 commentaires à “Ajax.Updater et Déclaration de fonctions en evalScripts”
  1. mickkael dit :

    un commentaire pour rien dire…

  2. benoit dit :

    Merci c’est gentil.

  3. GigP dit :

    Salut, je suis à la recherche d’une solution pour le evalScript.
    Pour les fonctions j’ai compris, faut les mettres entre les balise et les créer maFunction = function(){}. Pas de problème jusque là… Mais comment faire pour les appels du genre :

    Event.observe(window, ‘load’, function{

    $$(‘.MaClasse’).each(function(unObj){

    event.observe($(‘monBtn’), ‘action’, function(){
    maFonctionAjaxQueJeVeuxAppelerGraceAuEvalScript();
    }
    })

    C’est un peu long pour un commentaire, mais je suis bloqué et je pourrais pas finir ce que je dois faire… Et c’est le dernier truc…. Arg…

    Merci d’avance !

    P.S : dis donc tu serais pas chez Gandi.Net ? Ehehehe j’ai le même skin de blog sur mon blog : http://www.blog.gigp.fr

    TCHO !

  4. benoit dit :

    Si j’ai bien compris ta demande : tu veux executer une fonction javascript qui n’est pas sur ta page, mais que tu chargera par Ajax ?

    Si c’est le cas 2 solutions :
    1) faire un ajax.Updater dans un élément de ta page qui n’est pas visible (ex en css display:none)
    2) faire du chargement de javascript dynamique (je ferai un billet la dessus pour détailler)

    var script = document.createElement(‘script’);
    script.type = ‘text/javascript’;
    script.src = ‘lenomdetonscript.js.ou.php.ou.asp.ou.jsp’;
    document.getElementsByTagName(‘head’)[0].appendChild(script);

    Cela aura pour effet de charger le contenu de ce fichier comme du code Javascript dans ta page, sans les limitations d’ajax ! (exemple ajax ne fonctionne que sur le même domaine alors que cette solution te permet d’interagir entre plusieurs sous domaine pour du multi-server)

    PS : je ne suis pas chez Gandi, Je suis sur mon propre serveur, ce thème est celui proposé par défaut sur DotClear 2.0, et je n’ai pas le temps et encore moins le talent pour en refaire un ^^ … et il est pas trop laid

  5. GigP dit :

    Salut remoi ! J’ai réussi pour le evalScript, ça marche niquel ! Et une interface admin full ajax sans rechargement de page ça claque… 🙂

    Sinon j’ai vite parcourus ton blog, je suis pas ingénieur mais je travail aussi dans l’informatique, développeur web exactement. (j’ai un BTS info et je suis dans une école en alternance pour augmenter mon niveau…)
    Et pour le pense bête sous forme de blog je fais pareil ! C’est toujours pratique.

    le .be c’est belgique ça non ?

  6. benoit dit :

    Etre ingénieur est loin d’être gage de compétences dans le web ^^

    Ton site à l’air down ce soir, condoléances !

    J’ai pris le .be car .fr et .com sont pris et que ce site est francophone … snif

  7. Nupia dit :

    Hello !

    Je suis tombé sur cette page et j’avais une question a laquelle de nombreux forums fouillés ne m’ont pas apporté de réponse !

    En gros j’appel un contenu de DIV via Ajax.Updater, et dedans y’a un element avec un évènement de sélection dessus.

    Quand on sélectionne cet element il va mettre a jour le contenu d’une div .. oui mais cette div est EXTERIEURE a ma div updatée, en gros, elle appelle une div dans le dom d’origine (qui est toujours présent a l’écran), mais il semblerait que mon javascript ne sache pas aller plus loin que le contenu de la DIV que j’ai updaté …

    Existe-t-il une solution ?
    Ma question était elle claire ?

  8. Hervé Jibidar dit :

    Merci pour votre article.Cela m’a été très utile pour comprendre comment exécuter une fonction javascript après un appel Ajax. J’ai appris de nouvelle chose.

Répondre à GigP