Discussion :

[Sereine]

Bonjour bonjour.

Alors aujourd'hui j'ai un petit soucis sur un formulaire ajax. Rien de bien méchant, mais quand même ^^

Donc le but de mon formulaire en ajax est de, lorsque l'on commence à rentrer des données , la recherche s'effectue. Seulement j'ai plusieurs champs, et j'aimerais qu'ils fonctionnent en même temps.

Bon, je suis arrivé à le faire, pas de soucis, sauf sur un point:
Quand je commence à remplir un champ, toutes les données s'affiche pas de soucis, quand je rempli un deuxième champ, un autre filtre s'exécute aussi, pas de soucis non plus. Par contre, si je supprime toutes les données d'un des deux champs, le live ne s'effectue plus ... puis si je retouche la valeur de mon premier champ, le live remarche.(je sais pas si je suis assez claire)

Voici mon code:

Code :

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

1
2
3
<th width="5%"><input class="search_bar" type='text' name='find_article' id="find_article" size='5' value="<?php if (isset($_POST['find_article']) && $_POST['find_article'])echo $_POST['find_article'];?>"></th>
 
            <th width="28%"><input class="search_bar" type='text' name='find_fournisseur' id="find_fournisseur" size='20' value="<?php if (isset($_POST['find_fournisseur']) && $_POST['find_fournisseur'])echo $_POST['find_fournisseur'];?>"></th>

et la partie JS:

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
<script type='text/javascript'> 
        $(document).ready( function() {
 
  $('.search_bar').keyup( function(){
 
    $field = $(this);
    $('#results').html('');
    $('#ajax-loader').remove();
 
    if( $field.val().length > 0 )
    {
 
      $.ajax({
  	type : 'POST', 
	url : 'index.php?a=13' , 
	data :'find_article='+$('#find_article').val()+"&"+"find_fournisseur="+$('#find_fournisseur').val() ,
	success : function(data){ 
		$('#results').html(data);
	}
      });
    }		
  });
});
    </script>

(bien sur, ce sont que deux petits bouts de code, je montre pas le fichier qui récupère les données, je pense pas que le problème se situe là)

Je pense que je suis pas assez claire sur le problème, donc jvais donner un exemple:

J'ai deux champs de recherche actuellement: find_article et find_fournisseur

Quand j'écris: "Z154" par exemple dans find_article, il me trouve tous les articles et fournisseurs associé.
Quand, en plus de "Z154" j'ajoute "none" dans le champ find_fournisseur, ça m'affiche bien tous les articles qui ont comme fournisseur "none".

De même, si je commence à effacer le champ 'find_fournisseur", j'ai donc "non", l'affichage se fait bien.
par contre, si j'efface completement mon champ "find_fournisseur", j'ai donc le champ find_article avec "Z154" et le champ fin_fournisseur="" ... et bien là, aucun résultat, ajax s'évertue à chercher tous les articles qui n'ont aucun fournisseur. (chose que je comprend, mais je ne sais pas comment faire autrement pour obtenir le mm résultat, mais que, lorsque j'efface complétement un champ, il ne tienne plus compte de celui ci )

[MrPringle]

Tu peux essayer ça:

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
$(document).ready( function() {
  $('.search_bar').keyup( function(){
    var val1 = $('#find_article').val(),
      val2 = $('#find_fournisseur').val(),
      ajaxData = { "a": 13 },
      ok = false;
 
    $('#results').html('');
    $('#ajax-loader').remove();
 
    if (val1.length > 0) {
      ajaxData.find_article = val1;
      ok = true;
    }
    if (val2.length > 0) {
      ajaxData.find_fournisseur = val2;
      ok = true;
    }
 
    if(ok === true)
    {
      $.ajax({
        type : 'POST',
        url : 'index.php',
        data :ajaxData,
        success : function(data){
          $('#results').html(data);
        }
      });
    }
  });
});

[Sereine]

alors ça marche (enfin j'ai du modifier url : 'index.php?a=13' pour que ça fonctionne )

Pourrais tu m'expliquer en détail ce que fait chaque partie de ton code? Histoire que je comprenne la logique, que je puisse réutiliser plus tard.


Un autre soucis maintenant: lorsque j'efface le deuxième champ (les deux champs redeviennent vide en gros), j'aimerais que la liste des tous les articles s'affichent et pour le moment, quand j'efface les deux champs que je viens de remplir, ça m'affiche une page blanche.

La page de recherche est en faite une liste d'articles associés à un fournisseur, et mon champ de recherche permet de faire un tri en live.
Donc quand je commence à taper dans mon champ de recherche, ça enlève le contenu de #results (qui contient donc la liste d'article) et la remplace par les résultats trouvé avec ajax.

Edit: je viens de regarder, lorsque j'entre Z dans find_article, la recherche s'effectue bien, dans firebug/reseau, j'ai bien les paramètres a=13&find_article=Z qui s'affichent.
Quand j’efface mon entrée Z, rien ne se passe niveau réseau.


Edit: j'ai fini par comprendre, j'ai rajouté cela:

Code :

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

1
2
3
4
if (val1.length == 0 && val2.length == 0) {
      ajaxData = "";
      ok = true;
    }

Edit: je m'attaque maintenant à un champ select de mon formulaire de recherche. Là problème intéressant: lorsque j'appuie sur une flèche, une fois le champ en focus, tout se déroule bien (normal mon script javascript s'applique dessus je pense), en revanche, lorsque j'essaie de faire la même chose à la souris, rien ne se passe.


Voici mon select:

Code :

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

1
2
3
4
5
6
7
8
9
<select class="search_bar" name="find_statut" id="find_statut" onchange ="makeRequest('index.php?a=13&find_statut=<?php if (isset($_POST['find_statut']) && $_POST['find_statut']){ echo $_POST['find_statut']; }?>');"
                        onkeyup ="makeRequest('index.php?a=13&find_statut=<?php if (isset($_POST['find_statut']) && $_POST['find_statut']){ echo $_POST['find_statut']; }?>');"
                        class="resultat">
                    <option value="">-- Choisissez --</option>
                    <option value="NEW" <?php if (isset($_POST['find_statut']) && $_POST['find_statut']=='NEW') echo "selected";?>>NEW</option>
                    <option value="SAVED" <?php if (isset($_POST['find_statut']) && $_POST['find_statut']=='SAVED') echo "selected";?>>SAVED</option>
                    <option value="PRINTED" <?php if (isset($_POST['find_statut']) && $_POST['find_statut']=='PRINTED') echo "selected";?>>PRINTED</option>
                    <option value="CANCELED" <?php if (isset($_POST['find_statut']) && $_POST['find_statut']=='CANCELED') echo "selected";?>>CANCELED</option>
                </select>

[Sereine]

Bon j'ai finalement résolu mon problème:

Code :

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

onchange ="this.form.submit();"

, tout bêtement...