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.
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:
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 :
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 <head> :
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
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.
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:
Voilà cette première partie touche à sa fin, dans le prochain tuto j'expliquerais comment réaliser un module de tchat.
Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.
Partager ce tutoriel :
36 Commentaires
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
J'ai un site dans un sous répertoire www.nomdedomaine.com/nomdusite/index.php
J'ai mon fichier Javascript est situé dans le répertoire www.nomdedomaine.com/nomdusite/js/monfichier.js
Mon fichier php qui est appelé dans mon appel AJAX est dans le répertoire 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 www.nomdedomaine.com/nomdusite/whl/1/Bla-Bla-Bla.html
La page est en fait 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!!
a+
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
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
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
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>"
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.
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!
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
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
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 ?
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
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
Ah merci!
.
# $('#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
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.
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.
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
Merci pour les encouragements en tout cas...
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,
É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
É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
Oups pardon. La réponse était dans cette page.
Merci en tout cas. Très bon script
J'aimerai effectuer ce script sur autre chose qu'une table avec <tr> et <td>.
J'ai essayé de modifier cela dans le javascript, mais sans succes.
J'aimerai par exemple supprimer :
<div id="listecommentaires">
<img></img>
<p class="essai">jquery forever</p>
<a class="supprimer" href="javascript:supprimer(<?php echo $com_courant['id']; ?>)"><span>Supprimer</span></a>
</div>
merci beaucoup de votre aide par avance
Merci
Je suivi ton tuto a la lettre, le seul souci c'est que j'ai du traitement a faire avant en fonction des table que je doit supprimer. quand je ne fait aucun traitement un simple delete sa marche mais si je commence a faire du traitement il me fait toujours problème de connexion a la BDD et pourtant il me supprime bien l'enregistrement voici mon code source :
function supprimer(id,table){
if (id > 0) {
$.get('fonction/supprimer.php', {
idsup:id ,
nametable:table//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') {
$('#tabresultat tr[id="' + id + '"] td').fadeTo("slow", 0, function(){
$(this).hide();
});
} else{
alert('Problème de connexion à la base de donnée');
}
});
}
}
et voici mon code php
include "function.php";
include "../conf/sql.conf.php";
sql_connect($host,$user,$passwd,$bdd);
if($_GET['nametable'] == "1"){
$nametable = "annuaire";
}else{
$nametable = "site404";
}
$requete = 'DELETE FROM '.$nametable.' WHERE id='.mysql_real_escape_string($_GET['idsup']).'';
if(mysql_query($requete)){
echo '1';
}else{
echo '0';
}
mysql_close();
Merci d'avance
Déjà un grand merci pour le code, c est tes bien expliqué et tes simple d'utilisation.
Par contre, j ai un soucis, ma ligne ne se masque pas (mais la ligne est bien supprimé dans ma base de données), car ma variable data contient tout le code HTML de ma page.
Pour mon cas, il s'agit de supprimer des utilisateurs.
Mon script appelé est situé sur la même page que mon tableau, mais ma fonction delUser() est dans une classe (car mon code PHP est Orienté Objet).
Je suis sur la page http://www.monsite.fr/administration/utilisateurs/liste.html
qui correspond à une page administration_user.php (je fais de l'URL rewritting via htacces :
RewriteRule ^administration/utilisateurs/([A-Za-z_-]+).html app/administration_user&type=$1 [L]
Ainsi si $1 == 'liste' j affiche la liste
Pour supprimer, j appelle la fonction que j ai écrite comme ça :
function supprimerUser(id, login){
var zUrlDelUser = '<?php echo BASEURL . DS; ?>administration/utilisateurs/supprimer-' + id + '-' + login + '.html';
if(id > 0){
//Exécution du script PHP avec Ajax
$.get(zUrlDelUser, {
//iduser:id,
//loginuser:login
}, function(data){
if(data == 1){
$('#tablisteuser tr[id="user' + id + '"] td').fadeTo("slow", 0, function(){
$(this).hide();
});
}//fin if
});
}//fin if
}//fin fonction
Et ma fonction supprimer est comme ceci :
$i == 'supprimer'
$idUser = $_GET['iduser'];
$login = $_GET['loginuser'];
$oUser = new User();
$oUser->__setIdUser($idUser);
$oUser->__setLogin($login);
$oUser->Del = $oUser->delUser();
Avec ma fonction delUser() qui retourne true ou false.
Je pense que la variable data ne sait pas recuperer le retour de ma fonction delUser()...et moi non plus
.Si l'und e vous a une solution je suis preneur
.Merci beaucoup.
Cordialement
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 ?