INIT1

Initiation à Ajax avec Jquery (partie 1)

Avec Ajax et le framework Jquery, ce tutoriel va consister à supprimer une ligne d’une table MySQL sans raffraîchir votre page. Vous allez pouvoir découvrir un aperçu du fonctionnement d’Ajax.

 

Qu’est-ce qu’ AJAX?

Ajax est apparu il y’a déjà quelques années et est un ensemble de technologies comme Javascript, l’objet XMLHTTPRequest, XML,… qui permettent d’envoyer des requêtes à votre serveur et de récupérer ses réponses sans raffraîchir votre page. On l’utilise souvent pour raffraichir des petits bouts de HTML, dans le but d’éviter des temps de chargement longs et des requêtes vers les serveurs trop lourdes à gérer.

Et Qu’est-ce que Jquery?

Jquery est un framework Javascript, c’est à dire une sorte de librairie de fonctions qui vous simplifient énormément la tâche. Jquery est (avec d’autres…) devenu quasiment incontournable si l’on manipule un peu AJAX (on peut diviser par 5 le nombre de lignes de code). De plus, ce genre de framework est optimisé pour fonctionner sur quasiment tous les navigateurs récents. Biensûr il existe d’autres alternatives à Jquery comme Mootools, les fonctionnalités sont à peu de choses près les mêmes. Je n’ai pas fait de tutoriels pour apprendre à manipuler Jquery mais de très bons sites le font très bien.

Ce premier tutorial va consister à supprimer une ligne dans une table SQL sans recharger la page. Nous allons utiliser aussi quelques effets d’animation Jquery pour rendre la page un peu plus jolie!

Etape 1 : Page principale

Il faut tout d’abord afficher la liste des commentaires dans un tableau HTML dynamiquement avec PHP.


    		Tuto Ajax - 1ere partie

		<script src="jquery-1.3.1.min.js" type="text/javascript"><!--mce:0--></script>
		<script src="jquery.color.js" type="text/javascript"><!--mce:1--></script>

				include('config.php');
				$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects');
				mysql_select_db(MYDB) or die ('Base de données incorrecte');
				$requete = 'SELECT id,nom,texte FROM commentaires LIMIT 0,10';
				$result = mysql_query($requete);
				while($com_courant = mysql_fetch_assoc($result)){
					echo '

';
				}
                         mysql_close();
			?>
<table id="listecommentaires">
<caption>Liste des commentaires</caption>
<tbody>
<tr>
<th>Nom</th>
<th>Commentaire</th>
<th></th>
</tr>
<!--?php<br /-->
<tr id="commentaire'.$com_courant['id'].'">
<td>'.$com_courant['nom'].'</td>
<td>'.$com_courant['texte'].'</td>
<td><a class="supprimer" href="javascript:supprimer('.$com_courant['id'].')"><span>Supprimer</span></a></td>
</tr>
</tbody>
</table>

Voici notre document PHP de base sur lequel nous allons pouvoir travailler. La version de Jquery utilisée pour ce tuto sera la version 1.3.1 . Pour nous connecter à la base de données, j’utilise un fichier de configuration config.php qui contient mes identifiants et qui ressemble pour moi à ceci:

<!--?php define("MYHOST","localhost");   define("MYUSER","root");   define("MYPASS","");   define("MYDB","snoupix_tutoriaux"); ?-->

Pour recréer la table SQL des commentaires, piquez dans le code source le code SQL nécéssaire.

Dans le tableau HTML généré, vous remarquerez la spécification d’un identifiant sur la balise tr. Celle-ci servira à sélectionner la ligne pour la supprimer graphiquement avec Jquery. Enfin le lien pour supprimer une ligne est en fait lié à une fonction javascript que l’on complètera plus tard.

Pour rendre tout ça plus agréable voici un peu de code CSS :

body{
	font-family:tahoma,'sans serif';
}
table{
	margin:auto;
	width:50%;
	border-collapse:collapse;
	border:1px solid #eee;
}
table caption{
	margin:10px;
	font-size:3em;
	font-family:georgia;
	color:#888;
}
table tr th{
	text-align:left;
	background-color:#eee;
	padding:10px;
}
table tr td{
	margin:0;
	padding:7px;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ccc;
	background:url('backgroundtd.png') repeat-x bottom;
}
.supprimer{
	display:block;
	width:16px;
	height:16px;
	margin:0;
	padding:0;
	background-image:url('supcom-icone.png');
}
.supprimer span{
	display:none;
}

Etape 2: Exécuter un script avec Ajax

Nous allons donc commencer à coder la fonction Javascript supprimer(), prenant en paramètre l’identifiant du commentaire. Il existe quelques fonctions destinées à réaliser des requêtes Ajax avec Jquery, que vous retrouverez dans la documentation. La fonction utilisée dans ce tuto sera get(), prenant en paramètre l’url de votre script PHP, un tableau de variables qui seront transmises avec la méthode GET, et enfin la fonction a éxécuter quand la réponse du script sera entièrement chargée avec en paramètre de cette fonction, une chaine de caractère que votre script appelé aura retourné.

Voici la fonction supprimer() à insérer dans la balise :

<script type="text/javascript"><!--mce:2--></script>

Si vous avez bien suivi jusqu’ici, vous aurez certainement compris que la prochaine étape va consister à programmer notre document ‘script.php‘.

Etape 3: Supprimer une ligne

<!--?php 	include('config.php'); 	$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects'); 	mysql_select_db(MYDB) or die ('Base de données incorrecte'); 	$requete = 'DELETE FROM commentaires WHERE id='.mysql_real_escape_string($_GET['idsup']).''; 	if(mysql_query($requete)) 		echo '1'; 	else 		echo '0';        mysql_close(); ?-->

On effectue donc ici une simple requête DELETE FROM sur la ligne qui contient l’identifiant passé dans notre variable superglobale $_GET et l’on écrit ’1′ si la requête s’est bien passée.

Voici un petit schéma récapitulatif vous montrant comment fonctionne notre script.

schéma d'explication AJAX

Etape 4: Quelques effets de transitions

Nous allons maintenant, exprimer graphiquement cette suppression à l’aide de quelques fonctionnalités de Jquery. Pour effectuer des dégradés de couleurs sur une ligne de mon tableau, nous aurons besoin d’un plugin Jquery qui le gère. Ce plugin s’apelle Colors Animations. Une fois téléchargé vous pourrez l’inclure juste après Jquery.

Maintenant, nous allons compléter la fonction de rappel de notre fonction get et nous allons tester si la valeur en paramètre est bien égale à « 1″, sinon, il s’agit d’une erreur.

La selection d’une ligne d’un tableau s’effectue avec Jquery comme une simple selection CSS et correspond dans notre exemple à ceci:

Enfin voici le code Javascript avec les fonctions d’animations:

		<script src="jquery-1.3.1.min.js" type="text/javascript"><!--mce:3--></script>
		<script src="jquery.color.js" type="text/javascript"><!--mce:4--></script>
		<script type="text/javascript"><!--mce:5--></script>

Voilà cette première partie touche à sa fin, dans le prochain tuto j’expliquerais comment réaliser un module de tchat.

41 commentaires

S'abonner au RSS des commentaires
  1. Elric
    Posté le 03/02/2010 à 15h57

    [citation][de]Réponse à elric:[/de]Bonjour, ton tuto est très bien.

    Étant néophyte en ajax, j’aurai besoin d’un peu d’aide.
    J’aimerai réellement supprimer dans ma BDD les lignes concernées à l’aide d’une requete SQL DELETE.
    Où dois je la mettre en place ?

    Merci de votre aide[/citation]

    Oups pardon. La réponse était dans cette page.

    Merci en tout cas. Très bon script

  2. elric
    Posté le 03/02/2010 à 15h37

    Bonjour, ton tuto est très bien.

    Étant néophyte en ajax, j’aurai besoin d’un peu d’aide.
    J’aimerai réellement supprimer dans ma BDD les lignes concernées à l’aide d’une requete SQL DELETE.
    Où dois je la mettre en place ?

    Merci de votre aide

  3. Titeuf
    Posté le 07/01/2010 à 9h26

    Bonjour,

    Merci pour ce tuto vraiment bien fait.
    On prend les sources, on crée la base, on importe le sql, on modifie le fichier de config et hop tout fonctionne nickel.
    C’est clair et c’est bien fait.
    Bravo.

    Je me permet d’enfoncer le clou : comment le faire fonctionner sous IE ?
    Même avec IE8, qui est censé respecter les normes, ça ne fonctionne pas …

    Cdt,

  4. Yama
    Posté le 01/01/2010 à 21h52

    Bonjour,
    tout d’abord, merci pour ce tuto.

    comment faire pour que ce script soit fonctionnel avec IE?

    Cordialement,
    Yama

  5. François
    Posté le 18/12/2009 à 19h41

    Je suis d’accord avec cette logique,

    dans l’absolu il faudrait plutôt utiliser ce genre de fonctions

    $(".supprimer").bind("click", function(element){
    ….
    }

    Après ce tuto n’étant qu’une "initiation" j’ai voulu simplifier au maximum afin de s’intéresser davantage à la couche Ajax smile

    Merci pour les encouragements en tout cas…

  6. Pedro
    Posté le 17/12/2009 à 10h15

    Un tutoriel bien clair, bravo.
    Par contre, la tendance est de pratiquer le javascript non intrusif : aucun " href="javascript:supprimer(‘.$cheval_courant['id'].’)">" dans le HTML, mais plutôt un fichier js externe qui définit les évènements et les comportements relatifs aux éléments html.
    Merci quand même pour cette approche pédagogique.

  7. evets
    Posté le 17/11/2009 à 11h22

    Le script ne marche pas sous IE

  8. remi
    Posté le 17/10/2009 à 16h18

    Dans le fichier php remplacez echo 1 et echo 0 par: echo true et echo false
    puis dans le javascript remplacez if(data == "1") par if (data)

    J’avais la même erreur que vous et cette technique fonctionne très bien.

    Merci pour le tuto très facile à intégrer.

  9. epsylon
    Posté le 21/06/2009 à 3h13

    J’ai finalement trouvé. En fait lorsque je teste le script en ligne, ça déconnait au niveau du # if (data == ’1′) {
    # $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).fadeTo("slow", 0, function(){

    # $(this).hide();
    # });
    # } else{
    # alert(‘Problème de connexion à la base de donnée’);
    # }

    Du coup j’ai simplement retiré ce bout de code et ça fonctionne niquel à présent. Merci beaucoup en tout cas pour le code car il est franchement très bien expliqué et facile à comprendre pour un débutant tel que moi smile

  10. epsylon
    Posté le 21/06/2009 à 1h52

    Alors que pourtant le message est bien supprimé lorsque je rafraichis la page.

  11. epsylon
    Posté le 21/06/2009 à 1h49

    Hello c’est re-moi desolé. Mais la je n’y comprends absolument rien. Ca marche impec avec easyphp 2.01b en local mais dés que j’essaye en ligne, j’ai toujours le problème du impossible de se connecter a la base sad.

  12. François
    Posté le 16/06/2009 à 21h08

    [citation][de]Réponse à zanzan:[/de]Merci pour le tuto !!

    Petite remarque sur ce texte en haut :
    "On l’utilise souvent pour raffraichir des petits bouts de HTML, dans le but *d’avoir* des temps de chargement longs et des requêtes vers les serveurs trop lourdes à gérer."

    dans le but d’éviter non ?


    ZZ[/citation]

    Ah merci! smile

  13. zanzan
    Posté le 16/06/2009 à 13h18

    [citation][de]Réponse à Raptor02:[/de]Aw, cela ne marche pas chez moi
    Lorsque je clique sur "supprimer", j’ai bien la ligne que je mets en rouge
    mais elle ne disparaît pas. Par contre quand je rafraîchis la page, la ligne que je voulais supprimer à disparu… Que faire ?[/citation]

    J’ai eu le même problème causé par un pb d’encodage.
    Tous mes fichiers étaient en utf8 sauf script.php.
    Après avoir réencodé ce dernier en utf8, ca marche.

    ZZ

  14. zanzan
    Posté le 16/06/2009 à 11h30

    Merci pour le tuto !!

    Petite remarque sur ce texte en haut :
    "On l’utilise souvent pour raffraichir des petits bouts de HTML, dans le but *d’avoir* des temps de chargement longs et des requêtes vers les serveurs trop lourdes à gérer."

    dans le but d’éviter non ?
    smile

    ZZ

  15. François
    Posté le 04/06/2009 à 22h36

    Cool,
    Alors pour l’ajout, tu peux fonctionner avec le même principe (ton script ajout.php renvoi "1" si ca fonctionne). Après niveau JS au lieu de faire un fadeto… et de le supprimer tu fais par exemple:
    $(‘#listecommentaires’).append(‘<tr id="com….">…</tr>’);

    Après pour récupérer ces nouvelles données le must serait du XML venant du fichier ajout.php et contenant tes données (à la place du "1")…

    Enfin ce que je te dis là en fait c’est la 2ème partie de l’initiation à Ajax, donc inspire toi de l’autre tuto smile

  16. NiKo33
    Posté le 04/06/2009 à 16h04

    J’ai repérer l’erreur. Le script ne retourné pas "1" mais "1 ". L’espace fait la différence!! C’est nickel, c’est très jolie. Ce qui aurait été sympa c’est l’inverse: "proposer un petit formulaire qui, quand on insère une nouvelle occurrence, la fait apparaitre dans le même tableau sans recharger la page".

    J’ai pas de problème pour le script d’ajout.php, mais vu que je débute je ne sais pas à quoi peut ressembler le code javascript.

    Une petite idée Mr Francois??

    PS: je connaissais pas Firebug, tu a raison c’est top!

  17. François
    Posté le 03/06/2009 à 20h49

    Salut,
    Donc si le script retourne "1" et uniquement "1" c’est au niveau du Javascript que ca tourne pas rond… Sinon si ca ne renvoit pas uniquement 1 c’est qu’il y’a un soucis avec ta base de données
    Je te conseille de vérifier que la fonction pg_query retourne bien true si elle est éxécutée correctement (ca m’étonnerait qu’elle ne retourne rien mais je connais pas du tout postgreSQL. Sinon tu n’a pas firebug je te le conseille pour débuger c’est le top.

  18. NiKo33
    Posté le 03/06/2009 à 12h08

    En plus, après vérification, mon script retourne bien 1? La je ne comprend plus rien

  19. NiKo33
    Posté le 03/06/2009 à 11h52

    Bonjour!

    Tout d’abord merci pour ce super tuto. Je débute et je dois dire qu’il est très simple à comprendre. Malheureusement il ne marche pas comme il le faut chez wam. Le même problème que les autres. Lorsque je supprime une occurrence, j’ai le message "Problème de connexion à la base de donnée". La ligne se met en rouge et disparait au rafraichissement. Petite variante, je suis sous PostgreSql. J’ai donc utilisé "pg_escape_string()". En gros la requête s’éxecute bien mais le ‘script.php’ retourne toujours autre chose que 1.A moins que dans ‘commentaires.php’ la variable ‘data’ ne soit jamais affecté à 1. Un peu d’aide svp. Voici mon code:

    Pour le script:

    "<?php
    $conn_string = "host=*** port=5432 dbname=**** user=** password=**";
    $dbconn = pg_connect($conn_string)
    or die("Connexion impossible");
    $requete = ‘DELETE FROM catalogue.cheval WHERE id=’.pg_escape_string($_GET['idsup']). »;

    if(pg_query($dbconn, $requete))
    echo ’1′;
    else
    echo ’0′;
    pg_close();
    ?>"

    Et pour "commentaire.php":
    "…
    function supprimer(id){
    if (id > 0) {
    //Exécution du script PHP avec Ajax

    $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).css({
    ‘backgroundImage’: ‘none’,
    ‘backgroundColor’: ‘white’,
    });
    $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).animate({

    ‘backgroundColor’: ‘#ff8888′,
    ‘color’: ‘#941010′
    }, 1000);
    $.get(‘script.php’, {
    idsup:id //variable de type GET (on récupèrera la variable avec $_GET['idsup'])
    }, function(data){

    //si la requête s’est bien déroulée
    if (data == ’1′) {
    $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).fadeTo("slow", 0, function(){
    $(this).hide();
    });

    } else{
    alert(‘Problème de connexion à la base de donnée’);
    }

    });

    }

    }
    </script>
    </head>
    <body>
    <table id="listecommentaires">
    <caption>Liste des Chevaux</caption>

    <tr>
    <th>ID</th>
    <th>Nom</th>
    <th>Suppression</th>

    <th></th>
    </tr>
    <?php
    $conn_string = "host=*** port=** dbname=*** user=** password=**";
    $dbconn = pg_connect($conn_string)

    or die("Connexion impossible");
    echo ‘Connexion reussie’;
    $requete = ‘SELECT id, nom FROM catalogue.cheval WHERE id_sexe IN (3) ORDER BY ID’;
    $result = pg_query($dbconn, $requete);
    while($cheval_courant = pg_fetch_assoc($result)){

    echo ‘<tr id="commentaire’.$cheval_courant['id'].’">
    <td>’.$cheval_courant['id'].’</td>
    <td>’.$cheval_courant['nom'].’</td>
    <td><a class="supprimer" href="javascript:supprimer(‘.$cheval_courant['id'].’)"><span>Supprimer</span></a></td>

    </tr>’;
    }
    ?>
    </table>
    </body>
    </html>"

  20. Webrunner
    Posté le 22/05/2009 à 12h00

    Excellent tuto merci mille fois… C’est bien de voir jquery ajax dans un exemple concret. ça me donne envie de me lancer !

  21. Sideral
    Posté le 12/05/2009 à 11h00

    Ok je vais vérifier pour le "1". Sinon j’avais déjà regarder au niveau de la console d’erreur de firefox ainsi que firebug : pas d’erreur…

    Enfin il doit bien y avoir un problème de mon côté, puisque ton script fonctionne sur la page de démo. Je revois ça ce soir.

    Merci pour ta réponse wink

  22. François
    Posté le 11/05/2009 à 12h17

    Salut! il s’agit surement d’une petit oubli!
    tu as vérifié par exemple que ton script php renvoyait ’1′ pour que ca passe dans la boucle if(data == ’1′)
    Sinon vérifie ta console d’erreurs et télécharges firebug, ca peut être très utile!
    Tchao

  23. Sideral
    Posté le 11/05/2009 à 9h41

    Salut, excellent tuto, excellente source… Un grand merçi! Néanmoins j’ai le même soucis que Raptor02 à savoir :

    Lorsque je clique sur "supprimer", j’ai bien la ligne que je mets en rouge
    mais elle ne disparaît pas. Par contre quand je rafraîchis la page, la ligne que je voulais supprimer à disparu…

    J’ai regardé au niveau de la ligne :
    $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).fadeTo("slow", 0, function(){

    $(this).hide();
    });

    Tout me semble ok, j’ai repris celle de la source, et vérifier. Je suis en local sous Wamp : un problème de ce côté ?

    Un petite aide ne serait pas de refus. Je vais quand même ressayer la manip. Merci. @bientot

  24. Francois
    Posté le 24/04/2009 à 19h56

    Ah oui j’avais eu un problème de ce genre aussi, il y’a quelques temps, et j’ai opté pour des tirets plutôt que pour des slash… mais si tu tiens à ne pas changer ces URL alors ce que tu peux faire c’est spécifier l’URL absolue de ton script et non l’URL relatif.
    a+

  25. Jeepi
    Posté le 24/04/2009 à 4h17

    Salut smile

    J’ai un site dans un sous répertoire http://www.nomdedomaine.com/nomdusite/index.php

    J’ai mon fichier Javascript est situé dans le répertoire http://www.nomdedomaine.com/nomdusite/js/monfichier.js

    Mon fichier php qui est appelé dans mon appel AJAX est dans le répertoire http://www.nomdedomaine.com/nomdusite/lib/tpl/monfichier.php

    $(document).ready(function() {
    alert($("#tableTeams td.teamNames").html());
    $.ajax({

    type: "POST",
    url: "../lib/tpl/GetPlayersByTeamId.php",
    data: "teamId=1",
    success: function(msg) {

    alert( "Data Saved: " + msg );
    }
    });
    });

    Le problème que j’ai est que j’utilise mod_rewrite pour modifier l’apparence de mes urls ce qui cause probleme pour l’url de mes appels AJAX.

    Si j’ai l’url http://www.nomdedomaine.com/nomdusite/whl/1/Bla-Bla-Bla.html
    La page est en fait http://www.nomdedomaine.com/nomdusite/whl.php

    Cependant l’url dans mon appel Javascript "croit" que je suis dans les sous-répertoire "/whl/1/" donc il ne trouve pas mon fichier php sauf si je modifie l’url en conséquence… mais la fonction ne fonctionne plus si je vais sur une autre page.

    Merci de m’éclairer!!

  26. demorex6
    Posté le 09/04/2009 à 18h11

    Très bon tuto, merci !

  27. Docwho
    Posté le 23/03/2009 à 19h18

    Très bon tutorial!

    Merci.

  28. Raptor02
    Posté le 16/03/2009 à 19h55

    Ok smile merci j’ai essayé et maintenant ça marche à la perfection.

  29. Francois
    Posté le 16/03/2009 à 19h45

    Apparemment ton script PHP s’éxécute…
    mais ce bloc la ne s’éxécute pas:
    $(‘#listecommentaires tr[id="commentaire' + id + '"] td’).fadeTo("slow", 0, function(){
    $(this).hide();

    });
    peut-être que tu as oublié une accolade…vérifie ta console d’erreur outils->console d’erreurs

  30. Raptor02
    Posté le 16/03/2009 à 19h18

    Aw, cela ne marche pas chez moi sad

    Lorsque je clique sur "supprimer", j’ai bien la ligne que je mets en rouge
    mais elle ne disparaît pas. Par contre quand je rafraîchis la page, la ligne que je voulais supprimer à disparu… Que faire ?

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>