tags : ajax, astuce JQuery, serialize
Après le précédent billet présentant la fonction clone de JQuery, j’ai décidé de te parler d’une autre fonction méconnue de JQuery : la fonction serialize.
Alors que fait-elle cette fonction ?
Pour appeler serialize, il faut avoir en sélecteur un formulaire. Serialize va tout simplement retourner une chaine de caractères contenant toutes les valeurs des champs de ce formulaire. La chaine est formatée pour être envoyée en Ajax par la suite ( de type champ1=valeur1&champ2=valeur2&champ3=valeur3… ). La où la fonction serialize va être utile, c’est qu’elle permet de créer une fonction qui va permettre d’envoyer n’importe quel formulaire en Ajax avec une seule fonction.
Comme d’habitude, la demo est par là :
demo de la fonction serialize
Admettons que l’on ajoute la classe « ajax » à tous les formulaires que l’on souhaite envoyer en Ajax :
<form class="ajax" action="data.php" method="post"> <p> <label for="nom">Nom :</label> <input type="text" name="nom" id="nom" /> </p> <p> <label for="email">Email :</label> <input type="text" name="email" id="email" /> </p> <p> <input type="hidden" name="typeform" value="inscription" /> <input type="submit" value="inscription" /> </p> </form>
Ici, j’ai créé un formulaire d’inscription simple demandant seulement un nom et un email. Un champ caché (nommé typeform) va permettre de différencier le formulaire des autres pour le traitement en PHP (en assumant que tous les traitements en Ajax se passe dans le même fichier).
Le JQuery va être ici très simple (en connaissant les bases de JQuery 
) :
$('form.ajax').submit( function(e) { e.preventDefault(); // on empeche l'envoi du formulaire par le navigateur var datas = $(this).serialize(); $.ajax({ type: 'POST', // envoi des données en POST url: $(this).attr('action'), // envoi au fichier défini dans l'attribut action data: datas, // sélection des champs à envoyer success: function(msg) { // callback en cas de succès alert('success : '+datas); } }); });
C’était simple non ? La fonction serialize de JQuery est toute simple, mais super utile ! Elle permet vraiment de factoriser le code.
catégorie : JQuery
Tutorial bien sympa trouvé sur le blog 9lessons : « Twitter like Search with jQuery and Ajax » (« recherche à la twitter avec JQuery et Ajax »). Ce tuto permet donc de créer un formulaire de recherche tout en Ajax. Les résultats sont donc affichés directement sur la même page que le formulaire.
Une démo est disponible directement sur le blog 9lessons.
Voir la démo
A noter que l’on également télécharger les scripts expliqués dans le tutorial. On y retrouve le JQuery, le PHP, l’HTML et même un peu de CSS. Le tuto est bien complet, l’effet de recherche en Ajax est toujours classe. J’espère juste pour toi que tu comprends l’anglais…
tags : ajax, JQuery, php, plugin JQuery, wordpress
Dans l’admin de Wordpress (qui utilise JQuery), il y des légers effets de couleurs, d’apparition. Je trouve qu’ils ont un rendu qui fait assez classe.
Je te propose donc un tutorial pour faire plus ou moins le même effet. Pour l’effet de transition de couleur il est nécessaire d’avoir le plugin JQuery.color (dispo ici) et le plugin JQuery.delay pour une meilleure fluidité (au moment de l’appel en Ajax, dispo ici)
Comme d’habitude, on commence par inporter la librairie JQuery et les plugins nécessaires :
1 2 3 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.color.js"></script> <script type="text/javascript" src="jquery.delay.js"></script> |
Ensuite on prépare la structure HTML des éléments à supprimer. J’ai choisi des paragraphes (balises <p>) pour que ce soit le plus simple possible, mais libre à vous de le changer et par conséquent de changer les sélecteurs JQuery.
1 2 3 4 5 6 7 8 9 10 | <p>Premier élément <a href="#" class="supprimer" rel="1">Supprimer</a></p><!-- on place dans l'attribut rel l'id de l'element à supprimer --> <p>Deuxième élément <a href="#" class="supprimer" rel="2">Supprimer</a></p> <p>Troisième élément <a href="#" class="supprimer" rel="3">Supprimer</a></p> <p>Quatrième élément <a href="#" class="supprimer" rel="4">Supprimer</a></p> <p>Cinquième élément <a href="#" class="supprimer" rel="5">Supprimer</a></p> <p>Sixième élément <a href="#" class="supprimer" rel="6">Supprimer</a></p> <p>Septième élément <a href="#" class="supprimer" rel="7">Supprimer</a></p> <p>Huitième élément <a href="#" class="supprimer" rel="8">Supprimer</a></p> <p>Neuvième élément <a href="#" class="supprimer" rel="9">Supprimer</a></p> <p>Dixième élément <a href="#" class="supprimer" rel="10">Supprimer</a></p> |
Enfin, la plus grosse partie : le code JQuery. Les commentaires sont directement dans le code (ils sont également dans le code de la page de démo).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(document).ready( function () { $('a.supprimer').click(function(e) { // quand on clique sur un lien supprimer e.preventDefault(); // annule l'effet du lien pour pas recharger la page var id = $(this).attr("rel"); // on recupere l'id de l'element a supprimer (qui est dans l'attribut rel du lien) if(confirm('Supprimer cet élément ?')) { // on demande une confirmation var parent = $(this).parents("p"); // on recupere le paragraphe parent du lien (qui contient l'element a supprimer) $.ajax({ type: "POST", // les variables seront passées en POST (comme d'hab pour les recuperer en php $_POST[id] par exemple) url: "suppr.php", // on appelle le fichier php suppr.php qui supprimer l'element de la base de donnees (dans mon cas, ce fichier est vide) data: "id="+id+"&act=suppr", // variable que l'on passe au fichier php beforeSend: function() { parent.animate({'backgroundColor':'#FF3F47'},300); // animation a faire avant l'envoi (on change le fond avec un fondu jusqu'à la couleur #FF3F47) }, success: function(msg){ // en cas de succes $(this).delay(1200,function(){ // on attend 1.2 secondes parent.slideUp(500,function() { // et on fait disparaitre l'element en l'enroulant }); }); } }); } }); }); |
tags : ajax, auto-complétion, JQuery, php, suggestion
Pour ce deuxième tutoriel sur l’ajax, je te propose un formulaire avec auto-complétion. Simplement afficher des suggestions quand l’utilisateur commence à taper dans un champ de texte. Les suggestions sont affichées grâce à Ajax qui permet d’effectuer des requêtes SQL en « arrière-plan » de la page. Toute la partie JavaScript sera faite grâce au framework JQuery.
Comme d’hab, j’ai préparé une page de démo du script : disponible ici. Et il est également possible de télécharger les fichiers sources de cette démo. Et bien sûr, tout le code présenté ici est dépouillé de toute mise en forme (libre à toi de le personnaliser après !).
Donc, pour commencer, on va préparer le code HTML nécessaire : le champ de texte sur lequel les suggestions vont être appliqué et le bloc (caché au début de la page) qui va éventuellement contenir les suggestions :
1 2 3 4 5 6 7 8 9 10 11 12 | <div> Rechercher un pays : <br /> <input type="text" size="30" value="" id="inputString" /><!-- champ texte à analyser pour les suggestions --> </div> <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions --> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut --> <div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions --> </div> </div> |
Ensuite, dans le code javascript, on retrouve les deux fonctions nécessaires : lookup qui permet de faire l’appel ajax et fill qui permet, comme son nom l’indique, de remplir le champ avec la valeur suggerée. Après avoir défini les deux fonctions, on ajoute les « écouteurs » (qui permettent de surveiller si un événement est effectué) avec keyup (quand on appuie sur le clavier, à la remontée de la touche) et blur (quand le champ texte perd le focus).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function lookup(inputString) { if(inputString.length == 0) { // si le champs txte est vide $('#suggestions').hide(); // on cache les suggestions } else { // sinon $.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php if(data.length >0) { $('#suggestions').show(); // si il y a un retour, on affiche la liste $('#autoSuggestionsList').html(data); // et on remplit la liste des données } }); } } function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); } $(document).ready( function () { // lorsque la page est entierement chargée $("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString lookup($(this).val()) }); $("input#inputString").blur( function() { // si le champs texte perd le focus fill() }); }); |
Enfin, il ne reste plus qu’à développer le php qui sera exécuté grâce à l’appel ajax. Dans ce script, on récupère la valeur passée (ce qui est saisi dans le champ texte) et il n’y a plus qu’à faire une requête SQL dans la base de données et d’afficher les résultats sous forme de liste (avec en prime un petit onClick=fill() sur chaque élément de liste permettant de remplir le champ texte.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < ?php $link = mysql_connect("hote de la base", "login", "pass") or die("Impossible de se connecter : " . mysql_error()); mysql_select_db("db278690514"); // si une variable queryString a été posté if(isset($_POST['queryString'])) { // si la longueur du contenu de la variable est superieur à 0 if(strlen($queryString) >0) { // requete sql à personnaliser pour correspondre à votre base de données $result = mysql_query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10"); if($result) { // on parcourt les resultats while ($pays = mysql_fetch_object($result)) { // on affiche les resultats dans un element de liste en ajoutant // la fonction fill sur l'evenenement onClick echo '<li onClick="fill(\''.$pays->value.'\');">'.$pays->value.'</li>'; } } else { echo 'Il y a une probleme avec la requete sql.'; } } } else { echo 'Il ne devrait pas avoir un accès direct à ce script !!!'; } ?> |
Tutoriel basé sur celui du blog nodstrum : http://nodstrum.com/2007/09/19/autocompleter/
tags : ajax, formulaire de connexion, html, JQuery, php
Pour ce premier tutorial AJAX, je propose un simple formulaire de connexion sans rafraichissement de la page. Ca permettra également d’introduire un peu de php sur le blog.
Il est possible d’essayer une démo (login : test, mot de passe : ajax) ou de télécharger la source de cette démo (fichier php et mise en forme css inclus). Tout le code affiché ici sera du code dépouillé de tout mise en forme.
Pour commencer, on va préparer le formulaire HTML servant à la connexion. Deux champs sont nécessaires : nom d’utilsateur et mot de passe. Il ne faut pas oublier de donner un id (ici « connexionForm ») au formulaire pour la gestion des évènements avec JQuery. J’ai également ajouté un span vide qui contiendra éventuellement un message d’erreur si le login ou le mot de passe n’est pas bon.
1 2 3 4 5 6 7 8 9 10 11 | <form name="connexionForm" id="connexionForm" action="#"><!-- début du formulaire de connexion --> <span id="erreur"></span><!-- span qui contiendra les éventuels messages d'erreur --> <label for="login">Nom d'utilisateur :</label> <input type="text" name="login" id="login" /><!-- champ pour le login --> <label for="pass">Mot de passe :</label> <input type="password" name="pass" id="pass" /><!-- champ pour le mot de passe --> <input type="submit" value="Je me connecte" class="bouton" /><!-- bouton de connexion --> </form><!-- fin du formulaire --> |
On passe ensuite à la partie JQuery. On commence par charger le framework dans le fichier html (entre les balises <head> et </head>).
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
A nous de jouer maintenant. L’appel en Ajax ne se fera qu’à la soumission du formulaire (avec l’événement « submit() », ligne 2).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(document).ready( function () { $("#connexionForm").submit( function() { // à la soumission du formulaire $.ajax({ // fonction permettant de faire de l'ajax type: "POST", // methode de transmission des données au fichier php url: "login.php", // url du fichier php data: "login="+$("#login").val()+"&pass="+$("#pass").val(), // données à transmettre success: function(msg){ // si l'appel a bien fonctionné if(msg==1) // si la connexion en php a fonctionnée { $("div#connexion").html("<span id=\"confirmMsg\">Vous êtes maintenant connecté.</span>"); // on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place } else // si la connexion en php n'a pas fonctionnée { $("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" /> Erreur lors de la connexion, veuillez vérifier votre login et votre mot de passe."); // on affiche un message d'erreur dans le span prévu à cet effet } } }); return false; // permet de rester sur la même page à la soumission du formulaire }); }); |
Enfin, il ne reste plus qu’à créer le fichier php (login.php) permettant de tester les paramètres de connexion en testant dans la base de données des membres, si le login et le mot de passe correspondent (ce code est ultra-simplifié, il n’est pas forcément très sécurisé ). Si la connexion est validée, on créé un cookie (que l’on pourra tester par la suite avec la fonction « isset($_COOKIE[id]) » ).
Contenu du fichier login.php :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // connexion avec la base de données $link = mysql_connect("localhost", "root", "") or die("Impossible de se connecter : " . mysql_error()); mysql_select_db("nomDeMaBase"); // on exécute maintenant la requete sql pour tester si les parametres de connexion sont ok $result = mysql_query("SELECT login, pass, id FROM membres WHERE login = '$_POST[login]' AND pass = '$_POST[pass]'"); $membre = mysql_fetch_assoc($result); if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass])) { setcookie("id",$membre[id]); // genere un cookie contenant l'id du membre setcookie("login",$membre[login]); // genere un cookie contenant le login du membre echo "1"; // on 'retourne' la valeur 1 au javascript si la connexion est bonne } else { echo "0"; // on 'retourne' la valeur 0 au javascript si la connexion n'est pas bonne } |
C’est tout pour le premier tutorial AJAX/JQuery/PHP. Cela permet un premier contact avec AJAX qui peut être facilement mis en place grâce à JQuery (on économise beaucoup de lignes de codes par rapport au « JavaScript normal »…).