SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 207 visiteurs en ce moment

Accueil > Interactivité, échanges > Divers > Du javascript dans un article, ajax sans ajax, ... et plus encore  (...)

Du javascript dans un article, ajax sans ajax, ... et plus encore !

2 août 2006 – par rburton – commentaires

4 votes

Cette contrib vous permettra (j’espère) :

  1. de mettre du code js dans un article,
  2. de faire d’un article l’équivalent d’un fichier js,
  3. d’appeler dans un article un fichier js (extension *.js situé dans le dossier squelettes)
  4. d’appeler dans un article un fichier js construit via un squelette (le fichier js en question étant le contenu d’un article tel que décrit en 2/)
  5. (4bis) d’appeler dans un squelette un fichier js construit via un autre squelette (le fichier js en question étant le contenu d’un article tel que décrit en 2/)
  6. d’appeler dans un article (et a fortiori dans un squelette) des « services web » basiques à la façon d’AJAX mais sans utilisation de XMLHttpRequest, frame, iframe, Java ou Flash, selon la technique mise au point par J. Lamarre (http://zingzoom.com/ajax/ajax_with_js_fr.php).

Utilisation possible :

Par exemple, permettre à un rédacteur/administrateur de paramétrer son site, ou une barre d emenu via un article contenant le code javascript ad hoc.

Cette contrib part d’une constatation :
L’attribut src d’une balise SCRIPT est d’habitude qqchose comme « fichier.js ».
Mais je me suis aperçu que l’on peut très bien y indiquer qqchose comme « appeljs.php3 ?id_article=x », du moment que ce fichier appelle un squelette spip « appeljs.html » qui récupère le texte d’un article-javascritp (id_article=x) tel que défini ci-dessus au point 2/.

Attention, le .php3 comportera l’instruction « $flag_preserver = true ; » et le squelette ne comportera rien d’autre que l’appel de la balise TEXTE suivi de l’astérisque afin de ne récupérer dans la page html produite et mise en cache que et RIEN QUE le texte de l’article ... qui est donc notre code javascript à exécuter.

Par ailleurs, le code de J. Lamarre permet de charger dynamiquement du code javascript, une fois la page appelante chargée et affichée dans votre navigateur. Il y arrive en paramétrant à la volée l’attribut src d’une balise SCRIPT créée dynamiquement (selon diverses méthodes en fonction du navigateur), cet attribut src étant construit de la façon suivante : fichier.php ?parm1=yyy&param2=zzz. Ce fichier.php renverra, après traitement ad hoc en fonction des paramètres, le code javascript à exécuter sur la machine cliente... de façon à ce qu’il soit accepté par ce fameux attribut src.

J’ai très légèrement modifié le code pour l’adapter à une contrib SPIP digne de ce nom (enfin j’espère ...).

On y va !.... - Utilisation

  1. Pour mettre du code javascript dans un article, entourez-le d’une balise DIV avec l’attribut name="circa_codejs" (ce nom est paramétrable). PAS de balise SCRIPT, évidemment, supprimée par le compilo de spip ! On utilise l’attribut name afin de permettre l’introduction dans le corps de l’article de multiple blocs de code.
  2. Pour faire d’un article un fichier js, écrivez simplement votre code dans l’article, comme vous le feriez pour un fichier javascript (SANS la balise SCRIPT). N’y mettez donc rien d’autre que du code javascript correctement écrit.
  3. Pour appeler dans un article un fichier js codé en dur, avec l’extension *.js et stocké dans le dossier squelettes, entourez son nom complet (son nom seulement, pas le chemin) d’une balise DIV<c/ode> avec l'attribut <code>name="circa_fichierjs" (ce nom est paramétrable).
  4. Pour appeler dans un article un fichier js construit via un squelette (le fichier js en question étant le contenu d’un article tel que décrit en 2/), entourez l’id_article de l’article contenant le code d’une balise DIV avec l’attribut name="circa_skeljs" (ce nom est paramétrable).
  5. (4bis) dans le squelette, introduisez à la place voulue la balise SCRIPT avec un attribut src="circa_ajax_coderecup.php3?id_article=x", x étant l’id de l’article contenant le code javascript à éxécuter (et ne contenant que lui ! - voir 2/).
  6. suivre l’exemple dans les fichiers circa_ajaxinit.js et circa_ajaxdirect.php3.
    Si vos articles contenant des appels à des services web made in circa_ajax, veillez à ce que les éventuelles balises déclenchant les appels (bouton, lien, etc.) contiennent un attribut name="circa_ajaxBtn".

Installation

Pour que cette contrib marche, vous devez placer dans la balise HEAD de votre squelette article.html le code suivant :

et dans la balise BODY, l’événement en attribut onLoad="testJSAJAXCompatibility();".

En outre vous créerez deux div (avec attribut style="display:none;"), l’un avec l’id="divajax" et l’autre avec l’id="divajax2".

Exemple

Pour tester, créez un article contenant :

var a;
a="test fichier javascript = article";
alert(a);

Notez le numéro de cet article (dans l’exemple du point suivant, c’est 3) ;

et un article contenant (remplacer 3 par le numéro de l’article créé au point précédent) :

Appelez maintenant circa_ajax_article.php3 ?id_article=2&var_mode=recalcul (remplacer 2 par le numéro du second article créé).

Les « services web » sont écrits d’une part dans un fichier *.js stocké dans squelettes/js/ et nommé selon le modèle circa_ajax_nomduservice.js, pour la partie récupération des données, lancement d ela requête et affichage de la réponse,

et dans un fichier *.php3 stocké dans squelettes/php/ et nommé selon le modèle circa_ajax_nomduservice.php3, pour le traitement côté serveur.

Bon travail.

Dernière modification de cette page le 13 novembre 2008

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • LIM : alléger l’espace privé

    20 avril 2015 – 41 commentaires

    Ce plugin permet de désactiver l’affichage de blocs ou de boutons, présents par défaut dans SPIP mais qui peuvent devenir inutiles dans le cadre de votre projet. Il allège du coup l’interface d’édition et supprime d’éventuels risques de confusion (...)

  • Plugin Modèles media

    25 avril 2011 – 179 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Speedsyndic pour SPIP 2 et SPIP 3

    11 octobre 2010 – 26 commentaires

    Ce plugin est une version compatible spip 2.0.x / 2.1 / 3.1 du plugin Speedsyndic Note : Une bonne partie du texte ci-dessous a été pompé de cet article, expliquant la version précédente du plugin. je n’ai fait qu’adapter le code pour spip 2, (...)

  • HTML Purifier

    5 janvier 2011 – commentaires

    Pour sécuriser l’affichage de certains textes (ceux qui proviennent potentiellement non pas des rédacteurs, mais de visiteurs non enregistrés ou de contributeurs externes, comme les forums ou les contenus des sites syndiqués), SPIP utilise en interne (...)

  • Réservation d’événements

    16 mars 2015 – 341 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

Ça spipe par là