[JQuery] Afficher une image de chargement le temps qu'une requete AJAX se fasse

**iamats** · 14/07/2008, 18h24

Bonjour, je suis actuellement en train de créer un moteur de recherche pour un site. j'utilise AJAX pour vérifier sans actualisation de la page si le terme recherché existe. Donc lorsqu'on entre un mot dans une zone de texte, on sait si ce mot existe dans la base de données. Il s'affiche par conséquent "Aucun résultat trouvé" ou "1 (ou plusieurs) résultat(s) trouvé(s)". Cependant il peut y avoir quelques secondes (max 2 ou 3) avant que la phrase ne s'affiche. j'aimerais que durant ce temps une image de chargement (style ici) s'affiche.
Voici les différents bouts de code:
Le formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<select name="place"  >
 <option value="contenant">Contenant... </option>
    <option value="commencant">Commençant par...</option>
 
    <option value="finissant">Finissant par...</option>
   </select>
<input type="text" size="20" name="pseudo" />  <span class="info"></span>

Le fichier js inclus dans le <head></head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
 
$(document).ready(function(){
$("input").focus(function(){
var info_form=$(this).next(".info");
info_form.empty();
});
$("input").blur(function(){
   var name=($(this).attr("name"));
   var value=($(this).attr("value"));
   var info_form=$(this).next(".info");
   if(value==undefined)
   {
     info_form.append("<span class='rouge'>Veuillez saisir un terme à rechercher.</span>");
   }
   else if(name=="pseudo")
   {
   	$.ajax({
        type: "GET",
        url: "verif_pseudo.php?pseudo="+value,
        success:function(data){
        if(data==0)
        {
          info_form.append(" <span class='rouge'>Aucun résultat ne correspond à votre recherche \"" + value + "\".</span>");
        }
        else
        {if(data==1){
          info_form.append(' <span class="vert">' + data + ' résultat a été trouvé. <input type="submit" value="Rechercher l\'oiseau ' + value + '"/></span>');}
          else
          {
          	  info_form.append(' <span class="vert">' + data + ' résultats ont été trouvés. <input type="submit" value="Rechercher l\'oiseau ' + value + '"/></span>');
 
          }        }
        }
     });
   }
 
});	
});

Et enfin la page verif_pseudo.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
 
<?php
if(isset($_GET["pseudo"]))
{
$pseudo=$_GET["pseudo"];
 
$adresse = 'localhost:8889';
$nombdd = 'root';
$motdepasse = 'root';
$database = 'oiseaux';
mysql_connect($adresse, $nombdd, $motdepasse) or die (mysql_error());
mysql_select_db($database) or die (mysql_error());
 
$pseudo_exist=mysql_query("SELECT * FROM oiseaux WHERE nom='".$pseudo."'") or die (mysql_error());
$answer = mysql_num_rows($pseudo_exist);
if($answer>0)
{
echo "1";
}
else
{
echo "0";
}
mysql_close();
}
else
{
echo "non non !";
}
?>

Merci beaucoup d'avance.

**Bovino** · 15/07/2008, 08h16

Tu utilises apparemment jQuery pour tes requêtes. Il existe une option beforeSend qui permet d'effectuer une action avant le lancement de la requête, tu peux t'en servir pour ajouter un loader sur ta page à ce moment et le cacher dans le callback success

[JQuery] Afficher une image de chargement le temps qu'une requete AJAX se fasse

jQuery

Discussions similaires

Partager

Partager