Jump to content

jquery et liste déroulante

gudule1er
 Share

Recommended Posts

gudule1er Newbie

gudule1er

Posted
Posted (edited)

Bonjour,

 

j'essai de faire une liste déroulante dynamique avec jquery

 

dans mon fichier tpl j'ai mis ça 

<script src="js/jquery/jquery-1.11.0.min.js" type="text/!javascript!"></script>
<script>$(document).ready(function() {
    var $modele_moto = $('#modele_moto');
	var $marque_moto = $('#marque_moto');
     
 
    // à la sélection d une marque de moto
    $marque_moto.on('change', function() {
        var val = $(this).val(); // on récupère la valeur de la marque
 
        //if(val != '') {
            //$model_moto.empty(); // on vide la liste des modeles
             
            $.ajax({
                url: 'controller/front/CompatibiliteController.php',
                data: 'marque_moto='+ val, // on envoie $_GET['marque_moto']
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $modele_moto.append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
            });
        
    });
});</script>
<select name="marque_moto" id="marque_moto">
<option value="select">-- Sélectonner une marque --</option>
{foreach from=$value_select_req item=option}
    <option value="{$option.id_feature_value}">{$option.value}</option>
{/foreach}
</select>
<select name="model_moto" id="modele_moto" ">
<option value="select">-- Sélectonner le modèle --</option>
</select>

et dans mon fichier php j'ai fait ça

if (isset($_GET['marque_moto'])) {
   $marque_moto=$_GET['marque_moto'];
	$req_sortie2=Db::getInstance()->ExecuteS('select fl.value, f.id_feature_value from '._DB_PREFIX_.'feature_value_lang fl,  '._DB_PREFIX_.'feature_value f
											where f.id_feature=12 AND f.id_feature_value=$marque_moto');
	while($donnees = $req_sortie2->fetch(PDO::FETCH_ASSOC)) {
        // je remplis un tableau et mettant l'id en index (que ce soit pour les marques ou les modèles)
        $json[$donnees['id_feature_value']][] = utf8_encode($donnees['value']);
    }
     
    // envoi du résultat au success
    echo json_encode($json);
		}

bien entendu ça ne fonctionne pas, si quelqu'un peu me filer un coup de main ça serai sympa.

je suis en 1.6

 

merci

Edited by gudule1er (see edit history)
Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted (edited) 
 // à la sélection d une marque de moto
    $marque_moto.on('change', function() { ...

Rien n'est envoyé au serveur.

Essayez quelque chose de + clean. Évitez de mettre le JS dans un .tpl. Inutile aussi d'appeler Jquery, qui est déjà présent de base.

Vérifiez que votre event est bien lancé, et que la valeur est bien récupérée, et  ensuite appelez votre fonction AJAX.

Quelque chose comme ça par exemple :

$("#page").on('change', '#marque_moto', function () {

console.log('select change fired');

var selectedVal = $('#marque_moto :selected').val();
// Or var selectedVal = $(this).val();

console.log('Selected value : ' + selectedVal);

requestServer(selectedVal);
});

var requestServer = function (selectedVal) {
// Ajax
};
Edited by Yopixel (see edit history)
Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted

Il doit y avoir pas mal d'erreurs JS dans la page.

Activez le template par défaut + désactivez tous les modules et scripts pour ne garder que celui sur lequel vous travaillez.

La page doit être quasi-vide, avec seulement votre menu select et le fichier.js contenant votre code.

Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted

alors quand je met ce code 

$( "#marque_mto" ).change(function() {
  alert( "Handler for #marque moto() called." );
});

j'ai bien un avertissement à l'écran

 

par contre avec ça 

$( "#marque_moto" ).change(function() {

console.log('select change fired');

var selectedVal = $('#marque_moto :selected').val();

// Or var selectedVal = $(this).val();

console.log('Selected value : ' + selectedVal);

requestServer(selectedVal);
});

rien ne ce passe

Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted 
$( "#marque_moto" ).change(function() {
  alert( "ça fonctionne #marque_moto() " );
});

avec ça j'ai bien une alerte à l'écran...

donc je met ça dans mon fichier .js

$.ajax({
                url: 'controller/front/CompatibiliteController.php',
                data: 'marque_moto='+ val, // on envoie $_GET['marque_moto']
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $modele_moto.append('<option value="'+ index +'">'+ value +'</option>');
                    });

et dans mon fichier .php j'ai cette requête

if (isset($_GET['marque_moto'])) {
   $marque_moto=$_GET['marque_moto'];
	$req_sortie2=Db::getInstance()->ExecuteS('select fl.value, f.id_feature_value from '._DB_PREFIX_.'feature_value_lang fl,  '._DB_PREFIX_.'feature_value f
											where f.id_feature=12 AND f.id_feature_value=$marque_moto');
	while($donnees = $req_sortie2->fetch(PDO::FETCH_ASSOC)) {
        // je remplis un tableau et mettant l'id en index (que ce soit pour les marques ou les modèles)
        $json[$donnees['id_feature_value']][] = utf8_encode($donnees['value']);
    }
     
    // envoi du résultat au success
    echo json_encode($json);
Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted

 

donc je met ça dans mon fichier .js

 

Vous mettez TOUT ce qui est JS.

Pas de JS dans le .tpl. Excepté l'appel du fichier, encore que ce serait mieux de faire cet appel depuis le code du module (fonction hookEtc).

 

Une fois que vous aurez réussi à lancer la requête, vous pourrez vous intéresser au fichier php

 

 

quand je met un alert j'ai bien un message à l'écran au changement dans le menu

 

Alors faites-en sorte de voir pourquoi votre console n'affiche rien sur un simple console.log()

Essayez en changeant de navigateur, avec la console FF par exemple.

Car vous aurez besoin de la console.

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

essayes cette requette SQL

remplacer
$req_sortie2=Db::getInstance()->ExecuteS('select fl.value, f.id_feature_value from '._DB_PREFIX_.'feature_value_lang fl,  '._DB_PREFIX_.'feature_value f where f.id_feature=12 AND f.id_feature_value=$marque_moto');

par

$req_sortie2=Db::getInstance()->ExecuteS('
SELECT fl.value, f.id_feature_value 
FROM '._DB_PREFIX_.'feature_value_lang fl
LEFTJION  '._DB_PREFIX_.'feature_value f
WHERE f.id_feature="12" AND f.id_feature_value="'.$marque_moto.'"
');

@++

 

Loulou66

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

tu as aussi la Class FeatureValue ( classes/FeatureValues.php)

ou tu a la function getFeatureValuesWithLang($id_lang, $id_feature, $custom = false)

que tu appelles avec

 

$req_sortie2 = FeatureValue::getFeatureValuesWithLang($id_lang, $id_feature);

 

il faudra bien sur récupèerré avant $id_lang, $id_feature

$id_lang = (int)$this->context->language->id;

$id_feature ='12';

 

@++

 

Loulou66

Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted (edited)

 

dans la console j'ai bien les valeurs que je sélectionne...

Vous pouvez donc commencer à vous intéresser à votre fonction $.ajax.

Utilisez le code que je vous ai donné dans les premiers posts.

 

Vérifiez également que JQuery est bien appelé avant votre fichier compatibilite.js

 

Edit : Et si vous n'avez toujours pas utilisé la console jusque là, faites une pause et apprenez à utiliser cette console.

Edited by Yopixel (see edit history)
Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted

merci pour votre aide à tous, c'est très cool...

 

j'ai ça comme fonction donc 

$.ajax({
                url: 'controller/front/CompatibiliteController.php',
                data: 'marque_moto='+ val, // on envoie $_GET['marque_moto']
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $modele_moto.append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
            });

et je voudrais tout mettre dans la console, comment je fais :P

Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted

je faisais une petite erreur dans mon code...

 

mais maintenant je me retrouve avec une erreur 500

 

  1. GET http://moto-test.fr/controllers/front/CompatibiliteSuite.php?marque_moto=383 500 (Internal Server Error) jquery-1.11.0.min.js:4
    2. n.extend.ajaxjquery-1.11.0.min.js:4
    3. (anonymous function)compatibilite.js:5
    4. n.event.dispatchjquery-1.11.0.min.js:3
    5. r.handle
Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted (edited)

Le controller n'est pas bon (chemin ou structure du fichier).

+ vous utilisez GET alors que vous envoyez un paramètre au serveur (ce qui est contraire aux spécifications XHR)

+ votre script compatibilite.js est appelé avant Jquery (modifiez votre module).

J'ai l'impression que vous ne lisez pas les réponses qui vous sont données.

 

Créez votre module sur un site de démo (pas votre site en prod passé en maintenance) et quand tout sera ok basculez le module sur le site en prod.

Edited by Yopixel (see edit history)
Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted (edited)

Bonjour,

 

bien sur que je lis vos réponses...

si je comprend bien dans ma fonction ajax il faut que je mette method:POST ?

 

je suis bien sur un site de test (moto-test.fr)

 

comment je peux vérifier ou est appelé jquery ?

jquery est pas appelé dans le header ?

 

merci

Edited by gudule1er (see edit history)
Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted

Bonjour,

 

j'ai parcouru les tutos de création de module et je ne vois pas ce qui déconne dans mon controller

 

contenue de mon fichier php :

class CompatibiliteControllerCore extends FrontController
{
  
		public $php_self = 'Compatibilite';
		public $ssl=false;

  public function initContent()
  {
  
   parent::initContent();
   global $smarty;
	 $req_sortie=Db::getInstance()->ExecuteS('select fl.value, f.id_feature_value from '._DB_PREFIX_.'feature_value_lang fl,  '._DB_PREFIX_.'feature_value f
											where f.id_feature=11 AND f.id_feature_value=fl.id_feature_value');
 
  $this->context->smarty->assign('value_select_req',$req_sortie);
  
  if(isset($_GET['marque_moto'])) {
   $marque_moto=$_GET['marque_moto'];
	$req_sortie2=Db::getInstance()->ExecuteS('
		SELECT fl.value, f.id_feature_value 
		FROM '._DB_PREFIX_.'feature_value_lang fl
		LEFT JOIN  '._DB_PREFIX_.'feature_value f
		WHERE f.id_feature="12" AND f.id_feature_value="'.$marque_moto.'"
		');
			while($donnees = $req_sortie2->fetch(PDO::FETCH_ASSOC)) {
        // je remplis un tableau et mettant l'id en index (que ce soit pour les marques ou les modèles)
				$test_visu = $donnees['f.id_feature_value'];
				$json[$donnees['f.id_feature_value']][] = utf8_encode($donnees['fl.value']);
				}
     
				// envoi du résultat au success
				echo json_encode($json);
			}	
   $this->setTemplate(_PS_THEME_DIR_.'Compatibilite.tpl');
  }
 
}
Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

en relisant le post je voit des petite erreur des le sript au debut

remplaces

  var $modele_moto = $('#modele_moto');
	var $marque_moto = $('#marque_moto');     
 
    // à la sélection d une marque de moto
    $marque_moto.on('change', function() {
        var val = $(this).val(); // on récupère la valeur de la marque

par
  
    // à la sélection d une marque de moto
    $('#modele_moto').on('change', function() {
        var val = $(this).val(); // on récupère la valeur de la marque

a savoir qu'on ne met pas de $ quand on déclare les var en js  (var modele_moto = ....;)

ensuite refait ta 1er requête sql req_sortie comme req_sorite2

 

tu peut afficher les resultat en FO avec  

p($req_sortie); pour affiche les résultat tout en haut du site (la 1ere ligne)et continuer le traitement du php

d($req_sortie); pour affiche les résultat tout en haut du site (la 1ere ligne)et arrêter le traitement du php

 

tu vérifier comme ça chacune de tes variable

 

@++

 

Loulou66

Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted

 

j'ai parcouru les tutos de création de module et je ne vois pas ce qui déconne dans mon controller

 

Mais je suis en train de faire un controller, pas un module

 

Si vous n'êtes pas en train de créer un module c'est sûr que les tutos de création de modules ne vont pas beaucoup vous avancer...

 

J'ai l'impression qu'on ne va jamais pouvoir le résoudre votre souci.

Heureusement Loulou66 est là !

Link to comment
Share on other sites
gudule1er Newbie

gudule1er

Posted
  • Author
Posted

@loulou66, mon script est comme ça...

$( "#marque_moto" ).change(function() {
  var selectedVal = $('#marque_moto :selected').val();
  console.log('Selected value : ' + selectedVal);
  var val = $(this).val();
  $.ajax({
				method : POST,
				url: 'controllers/front/CompatibiliteController.php',
                data: 'marque_moto='+ val, // on envoie $_GET['marque_moto']
                dataType: 'html',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $modele_moto.append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
            });
	console.log('Data : ' + val);
});

comme le "change" doit ce faire au changement du select "#marque_moto" je ne pense pas que je doit le faire sur "#modele_moto"

 

@yopixel, c'est pour ça j'ai suivi des tutos de création de controller...

d'autre part j'ai ça dans la console : 

  1. Uncaught ReferenceError: $ is not defined compatibilite.js:1
    1. (anonymous function)
 
j'ai essayer de mettre çette commande au début de mon controleur
 

 

public function setMedia()

{
    $this->addJqueryUI('ui.change');
}

 

et avec ça j'ai encore plus d'erreur... et je ne trouve toujours pas comment vérifier ou est appeler jQuery...

Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted (edited)

 

 $this->addJqueryUI('ui.change');

 

A quoi devrait servir ce fichier (fichier qui n'existe pas) ?

.change() est une méthode JQuery, il n'y a pas besoin d'extension UI par dessus pour l'utiliser.

Surtout que vous n'avez pas de problème avec l’événement change (vous dites vous-même que votre select menu vous retourne la bonne valeur), vous avez un problème principal d'erreur 500 à cause d'un mauvais controlleur + un problème secondaire de JS à cause d'un mauvais ordre d'appel.

 

Edit: Vous n'avez pas besoin de savoir où est appelé JQuery pour tenter de modifier je ne sais pas quoi, vous devez seulement appeler votre propre script .js correctement. Placez la balise dans le footer par exemple.

Faites un module, ce sera beaucoup + simple.

Edited by Yopixel (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...