Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1529 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  PHP5, Smarty et combo filtré en AJAX

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

PHP5, Smarty et combo filtré en AJAX

n°2118377
Fredo798
Posté le 26-12-2011 à 21:16:10  profilanswer
 

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

mood
Publicité
Posté le 26-12-2011 à 21:16:10  profilanswer
 

n°2118503
CyberDenix
Posté le 28-12-2011 à 01:22:29  profilanswer
 

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...');
});


---------------
Directeur Technique (CTO)
n°2118609
Fredo798
Posté le 29-12-2011 à 00:57:02  profilanswer
 

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
n°2118611
Fredo798
Posté le 29-12-2011 à 01:06:53  profilanswer
 

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
n°2118645
AzOo
Posté le 29-12-2011 à 11:24:04  profilanswer
 

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 ***
n°2118664
Fredo798
Posté le 29-12-2011 à 12:25:26  profilanswer
 

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
 
 

n°2118685
AzOo
Posté le 29-12-2011 à 14:25:56  profilanswer
 

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 ***
n°2118751
Fredo798
Posté le 30-12-2011 à 01:47:38  profilanswer
 

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 ?

n°2118753
CyberDenix
Posté le 30-12-2011 à 03:12:49  profilanswer
 

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)
n°2118759
Fredo798
Posté le 30-12-2011 à 10:31:15  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  PHP5, Smarty et combo filtré en AJAX

 

Sujets relatifs
[CONSEIL] Livres pour apprendre PHP5 et JAVAPHP + JAVASCRIPT remplacer include / iframe cross domain sans AJAX
Problème avec confirm() et AJAX[RESOLU] JQuery appel ajax, récuperer la valeur d'une selectbox
[RESOLU] Jquery et retour d'Ajax.tpl.php ou twig/smarty
php5 objet performance ?Ajax et session PHP erreur Incomplete Object
[AJAX-JavaScript]Requete Ajax retournant un 403Smarty, creation de variables de conf {#var#} dynamique
Plus de sujets relatifs à : PHP5, Smarty et combo filtré en AJAX


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR