PHP5, Smarty et combo filtré en AJAX

PHP5, Smarty et combo filtré en AJAX - PHP - Programmation

Marsh Posté le 26-12-2011 à 21:16:10    

Bonjour,
 
Quelqu'un à une solution propre et simple pour faire une combo filtré a partir d'une autre combo en AJAX dans un contexte PHP / smarty ?
 
Merci

Reply

Marsh Posté le 26-12-2011 à 21:16:10   

Reply

Marsh Posté le 28-12-2011 à 01:22:29    

Utilises JQuery :
 
$('#myleftselectid').change(function(){
  var that = $(this);
  var selectedValue = that.val();
  // Faire un appel AJAX ici en lui passant selectedValue, que tu traites en PHP pour récupérer du code html
  // A ton retour AJAX, tu fourres ce code html dans ton second select
  // avec un $('#myrightselectid').html('...monretourAJAX...');
});

Message cité 1 fois

---------------
Directeur Technique (CTO)
Reply

Marsh Posté le 29-12-2011 à 00:57:02    

Salut et merci pour l'amorce,
 
J'ai téléchargé jquery, modifié mon tempate comme suit :
 
<head>
[...]
<script type="text/javascript" src="ajax/jquery.js"></script>  
<script language="Javascript">  
$('#cbo_producteur').change(function(){
  var that = $(this);
  var selectedValue = that.val();
  alert('testfred');
});</script>
[...]
</head>
[...]
 
Le code de ma combo
 
<select name="cbo_producteur" id="cbo_producteur" size="1">
 
 
Je vois pas la message box quand je change la valeur de ma combo
 
J'ai loupé quelquechose ?
 
Ca se débug comment le javascript ?
 
Merci !


Message édité par Fredo798 le 29-12-2011 à 00:59:56
Reply

Marsh Posté le 29-12-2011 à 01:06:53    

J'ai isolé tout le code pour obtenir ça  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="ajax/jquery.js"></script>
 
<script language="Javascript">  
$('#cbo_producteur').change(function(){
  var that = $(this);
  var selectedValue = that.val();
  alert('testfred');
});</script>
</head>
<body>
<select name="cbo_producteur" id="cbo_producteur" size="1">
  <option>test</option>
  <option>test2</option>      
</select>
</body>
</html>
 
 
Si quelqu'un voit l'erreur !
 
merci ;)


Message édité par Fredo798 le 29-12-2011 à 01:12:03
Reply

Marsh Posté le 29-12-2011 à 11:24:04    

Il te manque un petit quelque chose pour que cela fonctionne : regarde du côté de : (http://api.jquery.com/ready/)
 

Code :
  1. $(document).ready(function() {
  2.   // Handler for .ready() called.
  3. });


---------------
*** [Feed-Back] AzOo ***
Reply

Marsh Posté le 29-12-2011 à 12:25:26    

Effectivement Il me manquait cette ligne pour mettre le code javascript avant les combo.
Si je mettait le code javascript après ça marchait.
 
J'arrive à ça
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Document sans nom</title>
  6. <script type="text/javascript" src="ajax/jquery.js"></script>
  7. <script>
  8.     $(document).ready(function() {
  9.    $('#cbo_producteur').change(function(){
  10.        var that = $(this);
  11.       var selectedValue = that.val();
  12.    //Appel Ajax  
  13.    $('#cbo_serie').html('<option>testfred</option>');
  14.   })
  15.     });
  16. </script>
  17. </head>
  18. <body>
  19. <select name="cbo_producteur" id="cbo_producteur" size="1">
  20.   <option>Producteur 1</option>
  21.   <option>Producteur 2</option>     
  22. </select>
  23. <select name="cbo_serie" id="cbo_serie" size="1">
  24.   <option>Serie 1</option>
  25.   <option>Serie 2</option>
  26. </select>
  27. </body>
  28. </html>


 
Il me reste plus que la partie pour appeler ma page .php qui exécutera ma requête et me renverra les résultats.
 
Quelqu'un aurait une amorce de code jquery qui peut faire ça ?
 
 
Merci
 
 

Reply

Marsh Posté le 29-12-2011 à 14:25:56    

CyberDenix a écrit :

Utilises JQuery :
 
$('#myleftselectid').change(function(){
  var that = $(this);
  var selectedValue = that.val();
  // Faire un appel AJAX ici en lui passant selectedValue, que tu traites en PHP pour récupérer du code html
  // A ton retour AJAX, tu fourres ce code html dans ton second select
  // avec un $('#myrightselectid').html('...monretourAJAX...');
});


 
Comme te disais CyberDenix, il ne te reste plus qu'à faire un appel ajax : http://api.jquery.com/jQuery.ajax/


---------------
*** [Feed-Back] AzOo ***
Reply

Marsh Posté le 30-12-2011 à 01:47:38    

Donc j'ai réussi avec ça :
 
<script>  
    $(document).ready(function() {
    $('#cbo_producteur').change(function(){
        var that = $(this);
      var selectedValue = that.val();    
    $.ajax({
       type: "POST",
       url: "get_test.php",
       data: "idproducteur="+selectedValue
     }).done(function( msg ) {
     
     $('#cbo_serie').html(msg);  
    });    
   })
    });  
</script>
 
 
Par contre je m'aperçoit que le onchange ne fonctionne pas quand j'utilise les touches "monter" "descendre" du clavier.
 
Une idée ?

Reply

Marsh Posté le 30-12-2011 à 03:12:49    

Mmmmmhhh dans ce cas il faut binder un keyup en plus du onchange, et jouer avec les codes de touche clavier
 

Code :
  1. $('#pouet').keyup(function(event) {
  2.   /* Enter */
  3.   if (event.keyCode == '13') {
  4.     /* ... */
  5.     return false;
  6.   }
  7.   /* Up */
  8.   else if (event.keyCode == '38') {
  9.     /* ... */
  10.     return false;
  11.   }
  12.   /* Bottom */
  13.   else if (event.keyCode == '40') {
  14.     /* ... */
  15.     return false;
  16.   }
  17.   /* Other key */
  18.   else {
  19.     /* ... */
  20.     return false;
  21.   }
  22. });


Message édité par CyberDenix le 30-12-2011 à 03:13:03

---------------
Directeur Technique (CTO)
Reply

Marsh Posté le 30-12-2011 à 10:31:15    

Le projet cascade jquery a le même comportement :
- http://archive.plugins.jquery.com/project/cascade
 
Sur un autre forum un mec conseille ça

Code :
  1. $("#selCategory" ).change(changeHandler).keypress(changeHandler);


 
Je vais essayer ce soir.


Message édité par Fredo798 le 30-12-2011 à 10:36:18
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed