Aujourd’hui on va faire un peu d’Ajax. J’utilisais jusqu’à maintenant du simple code Ajax fait à la main pour recharger une zone d’une page après un évènement, le problème c’était que je ne pouvais pas appliquer des effets de transition par exemple lors dudit rechargement (je m’en fichais un peu à vrai dire). Mais pour un client récent j’ai du modifier un peu mon code (et j’ai bien galérer) pour lui appliquer n’importe quel type d’effet lors de l’affichage des données.
Alors j’ai essayer plusieurs solutions mais en vain, bref ayant déjà utilisé Jquery auparavant je me suis dit tiens pourquoi ne pas changer toute ma méthode Ajax pour utiliser directement et uniquement Jquery.
Après plusieurs essais voila ce que je vous propose
Etape 1
On crée le fichier index.html
dans le “head” on insère la bonne version de Jquery (j’ai pris l’habitude d’aller taper la dernière version hébergé chez google)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> |
Donc ce qu’on va faire c’est aller chercher une image ou un tableau de donnée lorsqu’on clic sur le lien chercher
Etape 2
Dans le “body” on rajoute :
<div>; <a href="#" id="chercher">Chercher</a> </div> <div id="zone_de_rechargement"> </div> |
la zone a recharger sera la div qui s’intitule “zone_de_rechargement”
Etape 3
et maintenant dans le “head” on rajoute le script Jquery qui nous permettra de faire la recharge des informations :
<script type="text/javascript"> $(document).ready(function() { //au click sur le lien chercher $(".chercher").click(function(){ //on recupere la valeur de l'attribut name pour afficher tel ou tel resultat var req=$(this).attr("name"); //requête ajax, appel du fichier recherche.php $.ajax({ type: "GET", url: "recherche.php?type_demande="+req, dataType : "html", //affichage de l'erreur en cas de problème error:function(msg, string){ alert( "Error !: " + string ); }, success:function(data){ //alert(data); //on met à jour le div zone_de_rechargement avec les données reçus //on vide la div et on le cache $("#zone_de_rechargement").empty().hide(); //on affecte les resultats au div $("#zone_de_rechargement").append(data); //on affiche les resultats avec la transition $('#zone_de_rechargement').fadeIn(2000); } }); }); }) </script> |
Donc pour résumé le code ci dessus, quand on clic sur les liens “afficher XX”, on récupère la valeur de l’attribut name on l’envoi avec la méthode Ajax vers le fichier recherche.php en method GET, c’est important car si vous utilisez le method POST, l’appel est fait 2 fois coté navigateur donc les infos seront plus longues à s’afficher, puis les données sont récupérées et affichées dans le div spécifié.
Voici le contenu du fichier recherche.php :
if($_GET['type_demande'] == "tableau") { //on affiche le tableau de donnée $tableau_donnee = array("Obi One Kenobi", "Qui Gon Jinn", "Mace Windu", "Yoda", "Dark Vador"); $nb_res = count($tableau_donnee); for($i=0;$i<$nb_res;$i++) { echo $tableau_donnee[$i]."<br>"; } } else { //on affiche un image echo "<img src='obi_one_kenobi.png' border='0' />"; } |
J’ai utiliser la fonction “.fadeIn”, mais vous pouvez utiliser n’importe quelle autre fonction disponible (fadeOut, show …)
Une petite demo est disponible ici
par Issa
13 Nov 2012 à 23:32
Bonjour,
j’essaye d’utiliser votre technique, mais j’ai un soucis, car
j’ai fais une liste et dessous un bouton valider, mais je n’arrive pas à récupérer la valeur de mon select lorsque je clique sur valider, comment récupérer la valeur du select lorsqu’on clique sur le bouton valider.
merci beaucoup
par keno974
13 Nov 2012 à 23:49
Donner un id à votre sélect puis récupérer la valeur en utilisant la fonction suivante : $(“idduselect”).value
par Tchenkov
16 Jan 2013 à 18:20
Bonsoir, votre est vraiment bien je m’en inspire mais je voulais savoir si vous saviez comment faire pour que la rubrique rechargement se fasse mais sans recharger la page car j’ai un compteur et je voudrai qu’il s’actualise sans recharger la page
par keno974
17 Jan 2013 à 17:00
@Tchenkov : Je n’ai pas tout compris, vous avez un compteur et vous voulez qu’il s’actualise sans recharger la page ? a quoi sert le compteur ?
par Tchenkov
17 Jan 2013 à 17:13
oui il y a un bouton voter et quand on clique sur le bouton la page ne se recharge pas mais le compteur se met à jour
le compteur sert a compter le nombre de vote pour un produit
par Tchenkov
17 Jan 2013 à 17:28
sinon j’ai regarde qu’avec .load en js on pouvait faire un rechargement mais que d’une section, mon code est:
$(“#lien_req button”).load(“requete.php?ID= #recharge”);
#lien_req button est l’endroit ou le bouton “voter est situe
requete.php?ID= est pour mettre a jour le nombre de vote dans la bdd
et #recharge est l’endroit ou il y a le compteur mais le compteur ne se recharge pas
par keno974
17 Jan 2013 à 17:50
@Tchenkov : Ok j’ai compris, bon il y a un autre moyen plus efficace désormais. Il faut utiliser $.get qui te permet de lancer un script php qui fait le traitement et ensuite lorsque ce dernier est terminé te rend la main, il n’y a plus qu’a effectuer le rechargement de la zone concernée.
Bien entendu get peut passer des paramètres (en json) et peut en retourner.
Je t’envoi un petit mail avec un exemple pour que tu voit plus clair
par Tchenkov
18 Jan 2013 à 10:56
Merci je t’ai répondu par mail car il y a un truc que j’ai pas totalement cerné ^^”
par Magikarp
22 Jan 2013 à 17:26
Salut, j’ai un petit problème en essayant de reprendre ton code, j’ai envie d’ouvrir une page php en appuyant sur une image, et que cette page s’ouvre dans un div qui se recharge en fonction des images où on a cliqué.
Avant cela j’avais mis des include, en appuyant sur une image cela assigne a la page un chiffre à une variable, et avec le php il suffit de regarder si c’est égal pour mettre des include dans des conditions, bref une technique pansement mais pas du tout dynamique.
Voici ce que j’ai fait :
– script pour l’api de jquery
– script avec votre code, en changeant l’url de la fonction ajax pour avoir non pas la page rechercher mais ma page où se déroule l’action (qui se nomme hotel.php)
– rajout de class à chaque lien sur les images, rajout de name pour les mêmes liens pour pouvoir les récupérés.
– création de la div zone_de_chargement sous mes autres div.
– petite requête sous forme d’un script :
if($_GET[‘type_demande’] == “2etoiles”) {
$(‘#zone_de_rechargement’).load(‘Hotels/2etoiles.php’);
J’ai juste testé sur ma première image, qui correspond aux hôtels 2 étoiles, normalement en cliquant sur le lien sur ma première image, la fonction jquery doit récupéré le nom assigné au lien,et ma requête étant vérifiée elle doit ouvrir dans la div zone_de_chargement ma page 2etoiles.php. Finalement la seule chose qui s’affiche dans ma div est exactement la même page (donc hôtel.php), en essayant des valeurs qui n’existent pas pour la requête, cela ne change rien.
Je ne sais plus trop quoi faire, je pense que le problème vient de la fonction .load, en regardant la documentation sur internet je ne trouve pas grand chose qui m’aide. As-tu une idée sur comment régler ce problème ? Merci
par keno974
22 Jan 2013 à 17:52
@Magikarp : ton script n’est pas bon si tu fait ton if($_GET[‘type_demande’] … en JS ça ne fonctionne pas =$_GET c’est uniquement du php.
je t’envoi un mail pour que m’éclaircis sur certains points
par Bimbim
07 Mar 2013 à 18:17
Bonjour, je m’arrache les cheveux en voulant mettre en place votre technique :
Je voudrais : quand je clique sur un des trois lien à ma disposition , générer du code html correspondant au type de la demande.
Pour se faire, j’apelle ma requete de cette manière :
http://pastebin.com/6xhWKSAY
ce qui devrai ajouter à mon bloc le code suivant :
http://pastebin.com/BkJQdeCb
Cependant , Cela m’amène sur une page blanche qui ne charge jamais totalement et seul s’affiche le code généré par calendrier(arguments)
D’où mon problème peut-il venir d’après vous ?
Cordialement,
par keno974
07 Mar 2013 à 18:38
@Bimbim : salut alors dans ta fonction jquery data type : todo n’est pas bonne c’est « html » qu’il faut mettre à la place de todo (ligne 6)
Ensuite sur chaque lien il faut rajouter l’appel du script du genre
Mois … (ligne 2, 3, 4)
et ta fonction jquery tu l’insert dans la fonction js calendrier :
function calendrier(typelien) {
$.ajax( …
}
et tu envoi typelien a ta page calendrier via url : ‘calendrier.php?typelien=’+typelien, (ligne 4)
dans ta page calendrier tu recupere en get le typelien et tu traite
voila
par Bimbim
07 Mar 2013 à 20:05
J’ai vérifié et essayé votre proposition mais après avoir regardé ma requête GET sous firebug , j’obtiens bien (j’ai changé ‘type’ en ‘req’ pour éviter la confusion entre le datatype de retour et le paramètre type que j’envoyai):
‘GET http://adressedemapage/calendrier.php?req=1&vald=7&valm=3&valy=2013‘
et le code HTML récupéré par le GET est :
http://pastebin.com/qpfB4zEK
Tel que je l’esperai .
Cependant j’ai toujours ce passage à une page blanche avec le calendrier généré par mon script calendrier(1,2013,3,7), mais aucun signe des liens qui ont été générés ni du reste de la page qui aurai du etre simplement modifié.
De plus, cette fameuse page blanche semble charger en continu mais je n’arrive pas à trouver d’informations sur ce qui s’y passe.
Mais peut être ai-je mal compris votre suggestion .
🙂
par keno974
07 Mar 2013 à 21:20
@Bimbim : en fait je viens de regarder ton premier script et a la ligne 12 quand tu fait: $(“.calendrier”).append(data); et dans le second quand tu fait :
ce n’est pas bon append(data) c’est pour rafraichir une element de ta page il faut créer quelque chose du genre :
et l’append rafraichira l’interieur de ce div
voila
par contre dans le contenu recherger tu ne peux pas charger un script js via le methode get il faut passer par jquery.live (fait une recherche sur le net)
car le contenu recharger via append est considérer comme du texte pur
bon courage
par Anonymous
13 Juin 2013 à 14:23
Et comment faire pour démarrer cette fonction à partir d’un Onclick?
par Anonymous
13 Juin 2013 à 14:28
C’est bon j’ai trouvé:
TEST1
🙂
par nh
20 Juin 2017 à 14:08
fait
par abakar
03 Fév 2014 à 10:03
j’ai un problème avec jquery.lors que je rafraichi ma page avec jquery apres envoi des données dans la base de donné tous s’affiche bien.mai si je veu une seconde fois sans actualisé ma page et envoyé des données la page est directement redirigé a la page de save.php jquery ne fai plus son travail.aidez moi
par Rolf Senge
25 Juin 2015 à 15:26
Merci je suis tombé sur votre page pendant que je fait des recherche depuis 2 semaines sur le rechargement d’une partie d’une page. j’ai testé votre script mais ça ne tourne pas chez, j’ai le même problème que Tchenkov. si vous voyez le ici http://www.intellectservices.org des bouton doivent se mettre à jour sans entrainer toute la page.
par bamba
25 Août 2015 à 12:49
tres bon court
par Baptiste
11 Sep 2015 à 18:50
Je suis tombe sur ton tuto en naviguant sur le net, c’est vraiment interessant et merci bcp. Je voudrais realiser quelque chose presque pareil. Il s’agit d’une page se trouve un select qui tire ses infos dans une table mysql. Je voudrais afficher le resultat du select sur la meme page pour ne pas utilise la balise form. Ton aide serait vraiment apprecie
Merci A+
par Samuel
14 Août 2016 à 03:00
Merci beaucoup pour le coup de pousse. J’ai trouvé ce que je cherchais grâce à ce tutoriel. Je vous en suis reconnaissant.