JavaScript et fonctions EDV

A l'intérieur des pages HTML vous pouvez écrire des scripts JavaScript. Ceux-ci sont exécutées dans le navigateur du client final.

<input type="submit" onClick="return Confirm("Etes vous sûr ?)">
est un bouton de validation (et d'envoi) de formulaire pour lequel une boîte de dialogue de confirmation apparaît lorsque l'on clique dessus. Return false annule le clic sur le bouton et c'est la valeur renvoyée par la boîte de dialogue Confirm quand on choisit le bouton Annuler.

<input type="submit" onClick="Alert("Le formulaire va être envoyé.)">
affiche une boîte d'alerte lorsqu'on clique dessus.

<input type="text" ID="MaZoneDeTexte" value="Foooo">
<a href="#" onClick="alert('MaZoneDeTexte vaut ' + getElementById('MaZoneDeTexte').value)">Clic</a>
affiche une zone de saisie et un lien qui déclenche l'ouverture d'une boîte d'alerte contenant la récupération de la valeur de la zone de texte.

getElementById est la fonction JavaScript vous donnant accés aux éléments de la page HTML. Il faut que leur ID soit défini.

Notes de syntaxe

Vous noterez la difficulté qu'il y a à jongler entre les " (guillemets) et le ' (apostrophe). Tous deux délimitent un texte et une technique peut imbriquer l'autre. Dans l'exemple précédent, " (guillemets) est interprété par le navigateur Web et ' (apostrophe) par l'interpréteur Javascript du navigateur. Etant donné le passage de EDV/JScript avant le chargement de la page, cela peut être encore plus délicat. EDV/JScript prend en compte la séquence d'échappement \" mais, actuellement et dans certaines conditions, EDV peut la transmettre de façon incorrecte.

Bibliothèques

Il est particulièrement intéressant d'utiliser JQuery pour les mises en forme évoluées, menus, arborescences, ...

Ajax peut vous permettre de charger des éléments de page sans recharger l'ensemble du document.

flot est une bibliothèque graphique utilisant JQuery. Elle permet de générer des courbes et autres statistiques graphiques.

Consultez les sources de .{Sys}.Web.WebAdmin.Variables.Query pour un exemple de JQuery et Ajax.

Une difficulté peut être de se tenir à une version de JQuery dans le cas où des composants ne seraient plus compatibles avec les mises à jour de JQuery.

.{Models}.Web.Head intègre les modules JQuery.

Utilisation de JQuery, Ajax et EDV

.{Models}.Web.Head, et donc, par défaut, toutes les pages Visual.Html via Head, intègre le script js/edvHtml.min.js issu de .{Models}.Web.edv.
Il contient diverses fonctions utilisables en javascript dans les pages Html où
fonction paramètres commentaire
edvGet
edv.Get
htmlElement [, params[, callback]] récupère la valeur de la variable EDV dont le nom est celui de l'élément Html et affecte la propriété value de l'élément Html si callback n'est pas fournie.
edvGetHTML
edv.GetHTMLedvGetCode
edv.GetCode
htmlElement [, params[, callback[, showWait]]] récupère la valeur de la variable EDV dont le nom est celui de l'élément html et affecte la propriété innerHtml de l'élément Html.
edvSend params envoie les paramètres au serveur EDV. N'attend pas de réponse.
edvSet htmlElement [, params] récupère la propriété value de l'élément Html et l'affecte (l'envoie, par un appel au serveur) à la valeur de la variable EDV dont le nom est celui de l'élément Html.
edvGet.Auto periodicity, htmlElementId, params Appelle edvGet périodiquement.
Retourne un objet ayant une méthode stop()

edvGetHTML.AutoedvGetCode.Auto

periodicity, htmlElementId, params, noCache Appelle edvGetCode périodiquement.
Retourne l'id d'un timer utilisable avec la fonction clearInterval(id_returned_by_edvGetHTLM)
edvGet.Toggle htmlElement [, params[, callback]] Si l'élément Html est vide, appelle edvGet sinon inverse la visibilité de l'élément.

edvGetHTML.ToggleedvGetCode.Toggle

htmlElement [, params[, callback[, showWait]]] Si l'élément Html est vide, appelle edvGetHTML sinon inverse la visibilité de l'élément.

edvSubmit

htmlElement [, params[, callback[, showWait[, setAnswerTo]]]] Envoie les valeurs des éléments d'un formulaire au serveur EDV. Chaque élément ayant un attribut name est inclus dans le message au serveur, y compris des arguments : <select name="edvargs.Action" value="update"> ou <param name="edvroot" value=".MyDom.">.
- Si setAnswerTo est défini, la réponse du serveur est redirigée.
-- setAnswerTo == 'alert' : return alert(answer)
-- setAnswerTo == 'confirm' : return confirm(answer)
-- setAnswerTo == true : $(document.body).html(answer)
-- setAnswerTo typeof String (considéré comme un id) : $(#setAnswerTo).html(answer)

edv.GetHTML === edvGetHTML === edvGetCode === edv.GetCode

edv.Get === edvGet

Ces fonctions permettent de communiquer avec le serveur sans recharger toute la page, ce qui est coûteux pour l'utilisateur comme pour le serveur.

Un click sur un lien <a href="#" onclick="edvSet('.MonBouton=true')">Cliquez sur .MonBouton</a> permet de déclencher une action sans changement dans le navigateur.

Un changement de valeur dans <input name=".MaValeur" onchange="edvSend(this)"> envoie systématiquement sa valeur au serveur web/EDV.

<input name=".MaValeur" ID="txtMaValeur"><a href="#" onclick="edvSend('txtMaValeur')">Envoyer</a> envoie la valeur de la zone de saisie au serveur web/EDV.

Un click sur un lien <div id="divMaVisual" name=".MaVisual"></div><a href="#" onclick="edvGetHtml('divMaVisual')">Rafraîchir</a> permet de rafraîchir le contenu du <div> par le contenu Html de la variable .MaVisual.

Une balise invisible <input type="hidden" name=".MonBouton" value="true"> permet de disposer d'un élément Html déclenchant une action côté serveur.

Certaines fonctions Ajax sont asynchrones, c'est à dire qu'entre l'appel au serveur et sa réponse, votre script continue de s'éxécuter et l'utilisateur reprend la main. L'utilisation du callback permet de traiter à volonté la réponse du serveur.

Pour débugger avec FireBug, par exemple, dans Html.Head, changez l'inclusion du script js/edvHtml.min.js en supprimant le .min.

Chargement différé de pages contenant du JavaScript :

Sous Internet Explorer, lors du chargement par Ajax (edvGetHtml, ...) de page contenant des balises <script>, le contenu n'est pas forcément interprété, les fonctions ne sont pas connus du navigateur. La solution semble être la spécification du mot-clé defer dans la balise :
<script type="text/javascript" defer="defer">

Autres outils EDV

edv.Wait = {
   Options : {
      top : -1,
      message : ""
   },
   Show : function(options, container){.. return div;},
   Hide : function(){}
   }

function getKeyPress(e)
String.prototype.trim = function()
String.prototype.format = function()
function isArray(obj)
function isnumeric(input)
function nextElementSibling( el ) {//bugg IE ds Element.nextElementSibling}

voir aussi les variables suivantes :
.{Models}.Web.edv.UI.edvProperties
.{Models}.Web.edv.UI.edvDataTable
.{Models}.Web.edv.UI.edvDialog
.{Models}.Web.edv.Login

voir aussi les variables suivantes :
.{Models}.Html.RSS
.{Models}.Html.GetHtml_IfChanged



Timers côté client (obsolètes : voir les fonctions edvGet.Auto et edvGetHTML.Auto)

Nouvelle version : la fonction edvGetHtmlAuto(2000, 'divMaVisual') permet le rafraichissement périodique du contenu de l'élément toutes les deux secondes.

Il peut être intéressant d'interroger périodiquement une variable EDV booléenne indiquant si l'ensemble d'une page Html a besoin d'être récupérée.

if (edvGet('.MaVisual.Html.HasChanged')=="True") edvGetHtml('divMaVisual');

Ancienne version :

<script>setTimeout("edvGetHtml('divMaVisual')", 10000)</script> permet de rafraîchir une seule fois l'élément Html ayant l'ID divMaVisual, car le time-out ne repart pas de lui-même. Il vaut mieux passer par une fonction :

Les timers de Javascript, exécutés dans le navigateur du client, permettent un rafraîchissement périodique de la page ou d'une partie de celle-ci.

<script>setTimeout("edvGetHtml('divMaVisual')", 10000)</script> permet de rafraîchir une seule fois l'élément Html ayant l'ID divMaVisual, car le time-out ne repart pas de lui-même. Il vaut mieux passer par une fonction :

<script>
function onTimeOut() {
    edvGetHtml("divMaVisual");
    setTimeout("onTimeOut()", 10000);
}
setTimeout(onTimeOut, 10000);
</script>

Plus simple, <script>setTimeout( "window.location.reload()", 10000 );</script> recharge toute la page dix secondes après son chargement.

clearTimeout permet l'annulation d'un time-out en cours :
var _TimeOutID = setTimeout("onTimeOut()", 10000);
...
clearTimeOut(_TimeOutID);

Vous noterez l'équivalence de "onTimeout()" et de onTimeout comme argument : dans un cas c'est un script, dans l'autre l'objet function.

Voir aussi

Les pages Web
L'URL des pages Web
Les variables dans les pages Web