Bloc-Notes JQuery

mardi, février 09, 2010

Dictionnaire JQuery

Voici un dictionnaire de JQuery bien pratique: http://visualjquery.com/

dimanche, février 07, 2010

Tablesorter: un plugin JQuery pour vous faciliter les tables

Avec Tablesorter, fini de passer des heures dans des requêtes SQL complexes pour afficher un tableau dans plusieurs ordres

Faites le en 1 ligne de code

$("#myTable").tablesorter();

Plus d'infos sur ce plugin: Tablesorter

JQuery Ajax() pour mettre à jour votre base de données

Nous sommes souvent confrontés à d’interminables scripts pour mettre à jour des données p.ex. dans des fonctionnalités de CRM, ERP, CMS, etc.

La fonction ajax() de JQuery vous permet de vous faciliter la vie tout en créant une interface utilisateur beaucoup plus attrayante.

Pour notre exemple, voici le formulaire :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Mettre à jour des données avec la fonction ajax() de JQuery</title>

</head>

<body>

<form action="userdata.asp" method="post">

    <input id="ID" type="hidden" value="10" />

    <label for="Nom">Nom:</label><input type="text" id="Nom" class="formelt" /><br />

    <label for="Prenom">Prénom:</label><input type="text" id="Prenom" class="formelt" />

</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

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

</body>

</html>

Vous remarquerez qu’il y a un champ caché et 2 champs texte, le champ caché contient l’ID de l’élément à modifier, les 2 champs sont les champs à updater.

Le code html reste valide W3C

Les actions JQuery sont toutes placées dans un fichier nommé « actions.js » que voici


$(document).ready(function() {

    $(".formelt").click(function() { $(this).css('background-color', '#F3F781') }); //changer la couleur pour indiquer que le champ est actif

    $(".formelt").blur(function() {

        var ID = $("#ID").val(); // l'id de l'élément à modifier

        var FieldName = $(this).attr("id"); // le nom du champ

        var FieldValue = $(this).val(); // la valeur du champ

        var datastr = "{ID:" + ID + ",FieldName:" + FieldName + ",FieldValue:" + FieldValue + "}"

            $.ajax({

                type: "POST", //post ou get

                url: "savedata.asp", // le nom du fichier contenant l'update DB

                data: datastr // les données sous forme {ID:10,FieldName:Nom,FieldValue:contenu+de+mon+champ}

                });

        $(this).css('background-color', '#fff'); // changer la couleur du champ pour montrer que c'est enregistré

        return false; // n'oubliez pas cette ligne afin de ne pas charger la page

    });

});

Pour finir il vous faut un fichier ASP, PHP ou autre pour mettre à jour la table, récupérez simplement vos éléments comme suit:

En ASP par exemple:


Dim myDBID, myFieldName, myFieldValue

myDBID = Request.Form("ID")

myFieldName = Request.Form("FieldName")

myFieldValue = Request.Form("FieldValue")

L’avantage de ce script est qu’il suffit de rajouter des champs DB et dans l’html pour que tout ce mette à jour automatiquement (attention cependant : pour des raisons de sécurité, je vous recommande de ne pas utiliser le nom du champ DB dans l’html, ce qui nécessitera également de mettre à jour le fichier ASP ou PHP)

samedi, février 06, 2010

Validation avec Position Absolute et Classic ASP ajax[ajaxUser]

Il y a un mois, je suis tombé sur ce magnifique plugin pour la validation de formulaires, mais mon projet était en Classic ASP, voici donc la traduction du PHP de ajax[ajaxUser]

Il reste néanmoins un hack pour "validateError", n'hésitez pas à poster une solution


<%

'---------------------

' validateUser.php traduit en classic asp par Philippe Kaivers

'---------------------





Response.ContentType = "application/json"

'ajouté par rapport à la version originale en Php: envoyer les données en Json au lieu d'Html

%>

<!-- #include file="toJson.asp" -->

<%

'toJson.asp peut être trouvé sur http://code.google.com/p/aspjson/



'Récupérer les data du post

Dim validateValue, validateId, validateError, arrayToJs, dataValid

validateValue   = Request.Form("validateValue")

validateId      = Request.Form("validateId")

validateError   = "ajaxUser" 'Request.Form("validateError") 'hack... il y a toujours un bug ici, l'info passe comme "ajaxUserundefined"



'Construire le tableau (array)

Set arrayToJs = jsArray()

arrayToJs(Null) = validateId

arrayToJs(Null) = validateError



'validez ici

dataValid = False

If validateValue = "gg" Then

    dataValid = True

End If



'Write json response

If dataValid = True Then

    arrayToJs(Null) = "true"

    Response.Write("{""jsonValidateReturn"":" & arrayToJs.jsString & "}")

Else

    For i = 0 to 1000000 'Ce loop est énorme et devrait être remplacé par un timer (ce loop est présent dans la version Php)

        If i = 990000 Then

            arrayToJs(Null) = "false"

            Response.Write("{""jsonValidateReturn"":" & arrayToJs.jsString & "}")

        end if

    Next

End If

%>

Le code html est le suivant


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>ajax[ajaxUser]</title>

    <style>

    body{font-family:Trebuchet MS;font-size:small;}

    #userd{margin-bottom:15px}

    label{font-weight:bold;}

    #monForm{margin:80px 0 0 80px;}

    </style>

    <link href="/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="monForm" method="post" action="form.asp?id=2">

    <label for="userd">User:</label><br />

    <input type="text" id="userd" name="userd" class="validate[required,ajax[ajaxUser]]" /><br />

    <input type="submit" />

</form>

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="/js/jquery.validationEngine-en.js" type="text/javascript"></script>

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

<script type="text/javascript">

    $(document).ready(function() {

        $("#monForm").validationEngine()

    });

</script>

</body>

</html>

Valider votre formulaire avec JQuery et le plugin de Position Absolute

Le plugin de Position Absolute est selon moi le plugin le plus intéressant du moment pour la validation d'un formulaire.

Il est à noter qu'il existe encore un bug en ce qui concerne IE6 si le message d'erreur passe au dessus d'un champ "select"

Les messages d'erreur sont éditables et utilisables en plusieurs langues

En savoir plus

vendredi, février 05, 2010

Utiliser JQuery via le CDN de Google

La méthode recommandée par Google est celle de jsapi, elle fonctionne comme suit:


<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

  // 1.4.1 est la version utilisée de JQuery

  google.load("jquery", "1.4.1");

  google.setOnLoadCallback(function() {

    // Placez votre code ici au lieu de $(document).ready()

  });

</script>

Cette méthode n'est pas la plus rapide, en effet, elle fait déjà charger l'application jsapi de Google (ce qui ralentit évidemment le tout)

Je vous recommande la solution suivante qui est également supportée par Google (1.4.1 étant la version de JQuery)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        // ajoutez votre code ici

    });

</script>

Pour avoir plus d'informations à ce propos, vous pouvez lire l'excellent article 3 reasons why you should let Google host jQuery for you (en anglais)

Comment initialiser JQuery

Il existe principalement 2 méthodes pour initialiser JQuery:

Localement
Via CDN

Localement

Téléchargez la dernière version de JQuery (sélectionnez la version minimisée pour la production)

Placez le fichier dans le root de votre site (ou un sous-dossier nommé p.ex. « js »).

Créez un autre fichier nommé « actions.js » et insérez le code suivant: $(document).ready(function(){ // votre code ici });

Dans votre code html, placez les tags suivants juste au dessus de la balise </body>: <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/actions.js"></script>

Votre code devrait ressembler à ceci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> Mon contenu ici <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/actions.js"></script> </body> </html>

Via CDN

CDN vient de l'anglais "Content Delivery Network" (voir la définition sur Wikipedia)

Il y a beaucoup d’avantages en faveur de l’utilisation d’un CDN externe:

Utilisez l'infrastructure des grands de l'internet
Le script est partagé entre plusieurs sites, et donc il est possible qu’il soit déjà dans le cache de votre visiteur

Conclusion: le chargement sera plus rapide

JQuery via le CDN de Google
JQuery via le CDN de Microsoft (en anglais)
Via JQuery sur Amazon S3 (en anglais)

N'hésitez pas à me faire part d'autres CDN pour JQuery via les commentaires