Trieur Organisé de Solutions et de Ressources Informatiques

logo du site TOSRI

Mot-clé - javascript

Fil des billets - Fil des commentaires

23 octobre 2010

Niveau : personne ayant des bases en informatique (terminologie, principe)

AJAX : simplifions la manipulation

Obligatoire : l'AJAX s'utilise sur un serveur pour pouvoir utiliser le PHP

introduction

AJAX ce n'est pas de la lessive, il faut arrêter de faire cette blague, elle est de plus en plus lourde. C'est une technologie basée sur le javascript et qui, pour faire simple, sert à faire des trucs de fous. Comme par exemple un changement de contenu de page sans la recharger en ayant exécuté du PHP. Pour ceux qui ne connaissent pas, ça ne veut rien dire, pour ceux qui connaissent c'est génial !!

Je vais donc vous donner 4 fichiers : 1 fichier HTML d'exemple, 1 fichier JavaScript lié à l'exemple, 1 fichier JavaScript qui utilise de l'AJAX et 1 fichier PHP qui est lié à l'exemple. Ces fichiers sont téléchargeables en pièces jointes à l'article.

Le principe de cet exemple est le suivant :

Nous avons une page web contenant un formulaire sur un serveur, jusque là tout va bien. Ce que nous allons faire c'est qu'à la validation du formulaire (via le submit classique) nous allons exécuter une fonction javascript qui fera appel à de l'AJAX et qui bloquera le transfert classique des variables avec la redirection puis qui remplacera le contenu d'une DIV par un message avec les valeurs du formulaire.

En gros voyez ça comme si vous récupériez les variables du formulaire, vous les envoyez vous-même à un script PHP qui les traite et vous les renvoie sans que vous rechargiez la page. Ensuite vous bloquez le formulaire pour que la page ne change pas. Magique non !?

L'AJAX ne sert pas que pour les formulaires, mais cet exemple comme son nom l'indique est un exemple ...

ajax.js

Ce fichier comprend 3 fonctions. La 1ere est intéressante, mais y toucher serait dangereux ... Elle sert à créer des objets spéciaux utilisés pour AJAX. La seconde fonction est celle que vous allez le plus utiliser et son nom la rend assez explicite : executerAjax ...
Elle prend plusieurs valeurs en paramètres :

  1. les options, ou plutôt variables sous la forme d'une chaine de caractères du type "variable1=contenu1&variable2=contenu2"
  2. le chemin du fichier PHP à exécuter
  3. une fonction javascript à vous ; elle doit prendre une variable en paramètre et il ne sert à rien de lui donner une valeur de retour ; lorsque le PHP sera exécuté, votre fonction sera appelée avec les données reçues
  4. la méthode d'envoi des variables 'get' ou 'post', ce n'est pas obligatoire, si vous ne le mettez pas 'get' sera pris
3eme fonction : getVarsFromForm
Je l'ai rajoutée, car elle peut être assez utile. Ce qu'elle fait ?
  1. elle prends le nom du formulaire que vous lui avez donné
  2. trouve le formulaire associé
  3. fait la liste de tous les champs qu'il contient
  4. prends le name des champs et le couple avec leurs valeurs
  5. retourne la chaine de caractères
Cette fonction sert surtout à éviter de galérer à récupérer toutes les valeurs de champs à la main.
Car après tout c'est bien connu les codeurs sont des feignants, donc ils codent encore plus pour moins se prendre la tête !! logique non ?

index.html

Dans ce fichier d'exemple qu'est-ce qui est important ?

D'abord, ceci :

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="script.js"></script>


Ces deux lignes servent à dire "d'abord j'inclus les fonctions qui vont utiliser AJAX, puis j'inclus le fichier qui contient le javascript général de la page".

Ensuite :

<form name="form_test" action="script.php" method="post">

La définition du formulaire est importante :

  • le nom "form_test" sert d'identification pour les fonctions javascript
  • l'action "script.php" s'il y a une erreur pour une raison quelconque et que le formulaire se valide on va quand même l'envoyer vers le traitement PHP
  • la méthode d'envoi "post" pour la même raison que ci-dessus


A titre de remarque :
<select id="civilite" name="civilite">
Le formulaire n'a qu'un seul champ : une liste sélection dont le nom est "civilite"

Pou finir :
<div id="resu" style="background-color: #AAAAAA;">&nbsp;</div>
La DIV qui va contenir le résultat :

  • un identifiant "resu" pour savoir où mettre le contenu
  • un style, pour le distinguer du reste de la page ; mis sur la balise pour alléger le code
  • un espace blanc, pour que la DIV possède une hauteur minimale par défaut, en gris

script.js

Ce fichier contient deux fonctions javascript qui sont liés à l'exemple :
function maFonction(donnees){
    var maDiv = document.getElementById('resu');
    maDiv.innerHTML = donnees;
}
Cette fonction sert à une chose : traiter les données reçues de l'AJAX, ici chercher l'élément qui a pour id "resu" est en remplacer tout le contenu par les données.

Ceci est plus élaboré :
window.onload = function(){
    // lorsque l'on valide le formulaire on va effectuer une fonction javascript
    document.forms['form_test'].onsubmit = function(){
        // on récupère la valeur du champ du formulaire
        var variables = getVarsFromForm('form_test');
        executerAjax(variables, "script.php", maFonction, "post");    // on fait une lessive
   
        return false;        // on bloque le changement de page /!\ important
    }
}

Ces lignes servent à faire du javascript non intrusif, pour ne pas surcharger le HTML.
Maintenant que font ces lignes ?

  • Lorsque la page est chargée on va exécuter le code javascript qui suit
    • on prend le formulaire 'form_test' et on définit un code à exécuter lors de la validation du formulaire
      • on utilise la fonction getVarsFromForm (détaillée plus haut) qui donne toutes les variables d'un formulaire en chaine de caractères.
      • on fait appel à la fonction 'executerAjax' avec
        1. les variables en chaine de caractères vu juste avant
        2. le nom de la page PHP à appeler (la même que 'action' du formulaire en fait) "script.php"
        3. la fonction que l'on souhaite utiliser pour traiter les résultats PHP, ici celle vu juste avant
        4. la méthode d'envoi des variables
      • on stoppe la redirection du formulaire avec 'return false'
      • (fin du code de validation du formulaire)
    • (fin du code à exécuter au chargement de la page)
  • (fin du code général)
Je sais c'est un peu hard, mais le niveau est haut donc bon ...

script.php

Curieusement le plus simple des 4 fichiers : un bout de code PHP, son exécution :
  1. il prend la variable "civilite" qui lui a été envoyé via la méthode POST
  2. il affiche un texte différent selon la valeur
  3. il saute quelques lignes
  4. il affiche un texte brut via PHP
  5. il affiche un texte brut via HTML
C'est tout. Car une fois que le PHP s'est exécuté, le contenu de la page (les affichages) ou un message d'erreur (on ne sait jamais) est envoyé dans la fonction javascript 'maFonction'

Conclusion

Testez vous-même, vous avez une liste de sélection, changez de valeur, validez, le contenu de la DIV change sans recharger la page.
Au final ce que vous avez fait ?
  1. demandé un code spécial à la validation de formulaire
  2. bloqué la redirection de ce formulaire
  3. écrit une fonction de modification de page javascript
  4. utilisé une fonction javascript pour faire une chaine de caractères
  5. utilisé une fonction javascript avec 4 paramètres pour demander d'exécuter du PHP

Excusez-moi si vous trouvez ça dur, mais le plus gros du boulot est fait selon moi ... Dans ce cas laissez des commentaires pour voir ce que l'on peut encore simplifier.

22 juin 2010

Niveau : personne ayant des bases en informatique (terminologie, principe)

Obtenir et modifier l'opacité en CSS via Javascript, compatibilté totale

Temps : 15min
Domaine : Xhtml, CSS, Javascript, DOM

Bonjour,
J'ai travaillé sur un projet qui m'a posé un certain nombre de problème : je voulais des effets de fondu pour des images. Une fois mon code terminé et testé sous Firefox, je me suis dit "Allons donc tester ce code sur un autre navigateur !!". J'ai pris Internet Explorer et mon rêve s'est effondré. Des erreurs à en pleuvoir et pas du tout le résultat visuel attendu. Après diverses recherches j'ai trouvé mon bonheur et l'ai placé dans deux fonctions qui sont compatibles avec tous les navigateurs que j'ai pu tester qui vont vous ravir, surtout si vous compter les utiliser. ^^

Explication des erreurs : Mozilla Firefox comprend l'attribut "opacity" en CSS et pas IE qui lui utilise "filter: alpha(opacity=)", simple n'est-ce pas ? ^^

Conseil : Lorsque vous vous voulez mettre de l'opacité directement depuis le CSS utilisez : (exemple avec 60% d'opacité)
    opacity: 0.6;
    filter : alpha(opacity=60);


Maintenant voyons les fameuses fonctions :

Première fonction :
// retourne l'opacité d'un élément
// parametre : élément ou id de l'élément
// retour : opacité entre 0 et 100 inclus, 0 en cas d'erreur
function getOpacite(elt){
    elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);
    if(elt == null)
        return 0;
    var resu = 0;

    if(!!document.all){
        if(elt.filters.length > 0)
            resu = parseInt(elt.filters[0].opacity);
    }else{
        var val = 0;
        if(elt.style["opacity"] != ""){
            val = elt.style["opacity"];
        }else if(elt.style["-khtml-opacity"] != ""){
            val = elt.style["-khtml-opacity"];
        }else if(elt.style["-moz-opacity"] != ""){
            val = elt.style["-moz-opacity"];
        }

        resu = parseInt(parseFloat(val) * 100);
    }
    return resu;
}

Cette fonction a un rôle assez simple : donner la valeur réelle de l'opacité d'un élément HTML (div, span img, ...). Son premier test sert à savoir si le navigateur est Internet Explorer ou pas. Si c'est le cas elle regarde si il y a un filtre et si oui prend l'opacité.
Dans le cas où ce n'est pas IE, la fonctions regarde les attributs susceptibles de contenir la valeur de l'opacité.

Deuxième fonction :
// modifie l'opacité d'un élément
// parametre : élément ou id de l'élément
// retour : true ou false en cas de réussite ou d'échec
function reglerOpacite(elt, opacite){
    elt = (document.getElementById(elt) == null) ? elt : document.getElementById(elt);
    if(elt == null)
        return false;
       
    elt.style["filter"] = "alpha(opacity="+opacite+")";
    elt.style["-moz-opacity"] = parseFloat(opacite) / 100.0;
    elt.style["-khtml-opacity"] = parseFloat(opacite) / 100.0;
    elt.style["opacity"] = parseFloat(opacite) / 100.0;
    return true;
}

Le rôle de cette fonction ci est de modifier l'opacité d'un élément (comment être plus clair ^^). Elle ne cherche pas à savoir si il s'agit d'Internet Explorer ou pas, elle renseigne tous les attributs capable de fournir l'opacité.

Voilà j'espère vous avoir été utile, toute critique constructive sur ces informations sont la bienvenue.