Construction de 2 select liés : help !

mirobolus

Septembre 2011

Bonsoir/jour, selon.
Je dois construire une page de recherches dans une table supplémentaire (spip_produits).
Cette recherche doit se passer en 2 temps, sur la même page :
1/ sélection de la catégorie (ici : manufacturer)
2/ sélection de la sous-catégorie (ici : famille)

Actuellement (voir ici page en développement), les 2 champs n’interagissent pas ensemble.

Je voudrais que quand on sélectionne un item dans le 1er menu déroulant, le deuxième se mette automatiquement à jour pour ne donner que les items qui lui sont rattachés.

Mais je n’y arrive pas !
J’arrive à le faire la 1ère fois, grâce à {manufacturer==#ENV{manufacturer}} dans ma 2ème boucle, mais bien évidemment ce tri reste
Je comprends bien qu’il doit y avoir rechargement de la page ou du formulaire ou que sais-je encore (ajax ?). Je ne sais pas si je dois séparer mes 2 selects ou les lier dans un même form, bref, je sèche.

Et donc j’appelle à l’aide en vous soumettant mon code actuel.

<form action="[(#ENV{action})]" method="get">

[(#ENV{action}|form_hidden)]
[<input type="hidden" name="lang" value="(#ENV{lang})" />]   

        <B_csvrecherchefab>
        <h4><:rech_fab:></h4>
        <select name="manufacturer" class="tailleselect">
            <option value=""> </option>
            <BOUCLE_csvrecherchefab(spip_produits){fusion manufacturer}{manufacturer !== 'manufacturer'}{manufacturer>''} >	
               [<option value="(#MANUFACTURER|textebrut|unique)" [(#ENV{manufacturer}|=={[(#MANUFACTURER|textebrut|supprimer_tags)]}?{"SELECTED"})]>[(#MANUFACTURER)]</option>]
	</BOUCLE_csvrecherchefab>
         </select>
        </B_csvrecherchefab>

<br /><br />

       <B_csvrecherchefam>
        <h4><:rech_fam:></h4>
        <select name="famille" class="tailleselect">
            <option value=""> </option>
            <BOUCLE_csvrecherchefam(spip_produits){famille !== 'famille'}{famille>''}{fusion famille}>
            [<option value="(#FAMILLE|unique)" [(#ENV*{famille}|=={[(#FAMILLE)]}?{"SELECTED"})]>
            [(#FAMILLE*)]
            </option>]
           </BOUCLE_csvrecherchefam>
        </select>
        </B_csvrecherchefam>

<br /><br />

        <input type="submit" class="btnsubmit" value="" title="<:info_rechercher:>" />

        </form>

Un grand merci à celui qui m’expliquera comment procéder ;-)

Formulaires Résolu

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

aleks

Septembre 2011

Joli site !

Peut-être qu’en mettant le select dans un INCLURE ajaxé avec un #ENV{manufacturer} sinon toutes les familles.

Et il faudrait valider le premier select en js pour filtrer les résultats du second.

Ce serait sympa de mettre le code ici si ça marche...
Indiquez l’intérêt que vous portez à cette réponse

0
mirobolus

Septembre 2011
Joli site !

Merci ;-)

Je regardais aussi du côté du code dans menu_lang.html :
<form method="post" action="#ENV{url}"> <div> [(#ENV{url}|form_hidden)] <label for="#ENV{nom}"><:info_langues:></label> <select name="#ENV{nom}" id="#ENV{nom}" onchange="this.parentNode.parentNode.submit()">#ENV*{langues}</select> <noscript><p class="boutons"><input type="submit" class="submit" value=">>" /></p></noscript> </div> </form>
Cette histoire de "onchange", je n’y comprends encore rien, mais pourrait-il que ce soit une piste également ?
Je vais tester tout çà et si j’y arrive, je poste ici : promis.
Je crois que compte tenu du niveau, je l’encadrerai aussi tiens !
Indiquez l’intérêt que vous portez à cette réponse

0

aleks

Septembre 2011

Normalement, onchange="submit();" dans la balise select devrait le faire.

Et sinon il faudrait un #ENV{manufacturer} dans la deuxième boucle pour filtrer, peut-être avec une boucle CONDITION (de chez spip bonux) avant, de type :
<BOUCLE_test(CONDITION){si #ENV{manufacturer}}> Ici on place une boucle qui affiche toutes les sous-familles du manufacturer </BOUCLE_test> Ici on place une boucle qui affiche toutes les familles <//B_test>
Et attention != s’écrit avec un seul signe égal.

mirobolus

Septembre 2011

Bon, j’y arrive paaaas... pas encore !...

Je récapitule :
– Je mets un onchange="submit();" dans mon 1er select
– Je remplace mon 2ème select par un
[(#INCLURE{fond=recherchefam}{env}{ajax})]
– Ce fichier appelé (recherchefam.html) contient ceci :

<h4><:rech_fam:></h4>
<div class="ajax">#FORMULAIRE_RECHERCHE_FAMILLE2</div>

– qui contient ceci (avec spip-bonux installé) :

<BOUCLE_test(CONDITION){si #ENV{manufacturer}}>
    <!--Ici on place une boucle qui affiche toutes les sous-familles du manufacturer-->
    
    <br />debug : manufacturer choisi
    <B_csvrecherchefam>
    <select name="famille" class="tailleselect">
    <option value=""> </option>
    <BOUCLE_csvrecherchefam(spip_produits){manufacturer==#ENV{manufacturer}}{famille != 'famille'}{famille>''}{fusion famille}>
    [<option value="(#FAMILLE|unique)" [(#ENV*{famille}|=={[(#FAMILLE*)]}?{"SELECTED"})]>[(#FAMILLE*)]</option>]
    </BOUCLE_csvrecherchefam>
    </select>
    </B_csvrecherchefam>
    
</BOUCLE_test>
    <!--Ici on place une boucle qui affiche toutes les familles-->
    
    <br />debug : manufacturer vide
    <B_csvrecherchefamTout>
   <select name="famille" class="tailleselect">
    <option value=""> </option>
    <BOUCLE_csvrecherchefamTout(spip_produits){famille != 'famille'}{famille>''}{fusion famille}>
    [<option value="(#FAMILLE|unique)" [(#ENV*{famille}|=={[(#FAMILLE*)]}?{"SELECTED"})]>[(#FAMILLE*)]</option>]
    </BOUCLE_csvrecherchefamTout>
   </select>
   </B_csvrecherchefamTout>

<//B_test>

Est-ce bien çà ?
Parce que voilà ce que çà donne :
– si les 2 select sont vides : le select 1 liste bien tous les fabricants / le select 2 est vide
– quand je sélectionne un fabricant : la page se recharge en me donnant le résultat de la recherche pour le fabricant choisi et le select 2 se remplit de toutes les familles. La condition ne fonctionne donc pas actuellement.

Je doute de l’écriture de ma boucle Condition et de {manufacturer==#ENV{manufacturer}} pour construire mon 2ème select.

Mille milliards de mercis (0h38 ! quand même !)

Indiquez l’intérêt que vous portez à cette réponse

0
mirobolus

Septembre 2011
J’ai trouvé !!!
Avec des petits messages pour pister #MANUFACTURER, je constate effectivement que je conserve #ENV{manufacturer} en entrant dans la noisette recherchefam.html mais je le perds en entrant dans le 2ème formulaire.

Comment lui dire qu’il faut prendre en compte #ENV{manufacturer} ? En modifiant la fonction charger() (voir cette discussion) en indiquant non seulement la variable famille, mais aussi la variable manufacturer qu’il ne connaissait donc pas !
'famille' => _request('famille'), 'manufacturer' => _request('manufacturer'),
Yesss !!!
Maintenant, mon code n’est peut-être pas très propre...
Un grand merci à toi aleks :-)
Indiquez l’intérêt que vous portez à cette réponse

0

aleks

Septembre 2011

Ca fait plaisir quand ça marche !

Il faudrait peut-être utiliser un <INCLURE{fond=..}> plutôt que [(#INCLURE{fond=..})] si les données changent souvent.

Pour la fonction charger(), normalement c’est à recopier puis modifier dans squelettes/formulaires/recherchefam.php

Sinon rien à voir, mais comme j’étais intrigué par cette curieuse table spip_produits j’ai retrouvé cette discussion. D’où ma question : as tu trouvé un moyen ergonomique pour la transition csv / mysql (un machin d’import via l’admin). Ca pourrait m’intéresser...
Indiquez l’intérêt que vous portez à cette réponse

0
mirobolus

Septembre 2011
Ah ah ! très drôle ! Dans cette discussion-là, c’est moi qui te répondais ! Et bien, c’est cool de voir que je peux aussi aider !

Pour résumer, j’ai un ami qui m’a donné le tuyau : créer, dans un article, un iframe qui appelle un script php placé dans un dossier avec un nom alambiqué (par sécurité).
Ce script comporte un include de Quick_CSV_import.php qu’on peut trouver facilement sur le Web,
Le code à placer dans l’article est :
<iframe src="../dossier/script.php" width="100%" height="600"> <p>Your browser does not support iframes.</p> </iframe>
et je peux t’envoyer en pv les 2 fichiers si tu veux (mes coordonnées sont en pied de page du site Bonplanmicro).

P’tite question : quelle nuance entre les 2 écritures de INCLURE ?

mirobolus

Septembre 2011

Nuance importante, effectivement, concernant les INCLURE, lue ici :

<INCLURE{fond=..}> et [(#INCLURE{fond=..})] ont donc des fonctionnements différents : 
— avec <INCLURE{fond=..}>, chaque squelette inclus a un cache indépendant ; 
— avec [(#INCLURE{fond=..})], la page principale appelante contient, en cache, l’intégralité du code généré, et les fichiers inclus n’ont pas de cache séparé.

Merci Aleks. J’ai modifié.

Indiquez l’intérêt que vous portez à cette réponse

0

guindo223

Septembre 2011

Tres beau site. Peut que vous pouvez maider aussi. Jai de besoin de piste. avant de lancer ma recherche, je veux pouvoir choisir "ou chercher quoi". Exemple : dans la table empolé chercher le mot clé Natha. Merci
Indiquez l’intérêt que vous portez à cette réponse

0
mirobolus

Septembre 2011
Merci pour le compliment ! Je vais en faire part à mon client qui sera ravi.

Pour sélectionner la table avant d’effectuer une recherche, il faudrait pouvoir attribuer un mot par table (exemple "produits" pour "spip_produits") et construire un 1er select (ou checkbox) listant ces mots (avec un onchange="submit();" et de l’ajax, comme ci-dessus).

Ensuite, on construirait le menu déroulant sur le même modèle que mon test conditionnel : on testerait le contenu de ENV et on créerait autant de boucles qu’il y aurait de tables :
<BOUCLE_test(CONDITION){si #ENV{mot_clé_table1}}> <BOUCLE_recherche(nom_table1)...
Indiquez l’intérêt que vous portez à cette réponse

0

guindo223

Septembre 2011

Merci bcp nathbni, je m’y lance voir.
Indiquez l’intérêt que vous portez à cette réponse

0

Julien

Octobre 2011

Bonjour,

Très bonne chose cette contrib !!!

J’ai parfaitement mis en place à une chose prêt. Rien compris au onchange="submit();". Pour le moment j’y arrive avec cette class dans le formulaire :

class="bouton_action_post ajax" avec le bouton submit :-(

Mais c’est vraiment beaucoup plus sans comme dons ton exemple ci-dessus

Une idée de pourquoi cela ne marche pas ? J’ai raté quelque chose ?

Merci mille fois !

Julien
Indiquez l’intérêt que vous portez à cette réponse

0

mirobolus

Octobre 2011

Salut !

Alors, pour répondre à ta question, je pense qu’il est essentiel que ton formulaire soit appelé dans ton squelette en l’intégrant dans la balise <div class="ajax">#TONFORMULAIRE</div>

Cette discussion m’avait aidé à comprendre cette histoire-là : http://comments.gmane.org/gmane.comp.web.spip.user/156878

Tiens-moi au courant si çà a pu résoudre ton pb !
Indiquez l’intérêt que vous portez à cette réponse

0

guindo223

Octobre 2011

Salut nathbni, un petit au hors sujet si ca derrange pas :)
As-tu eu a boucler sur des tables differentes, en fonction : de l’option, de la radio ou du check coché ? pour faire une recherche.
Un petit exemple me sera tres utile.

Merci
Indiquez l’intérêt que vous portez à cette réponse

0

Octobre 2011

Oui, je suis moi aussi tomber sur ce post. C’est d’ailleurs de la ou j’utilise la class bouton_action_post ajax dans mon formulaire avec le bouton submit.

Mais vraiment pas moyen de mettre le onchange="submit(); même avec le formulaire dans une div Ajaxée.

Et quand je change le formulaire "canton" (chez toi manufacturer), il me quitte la page pour revenir au sommaire. Il ne retient pas le ?page=inc-test la ou se trouve mon squelette.

Une idée ? Merci bien !

Julien.
Indiquez l’intérêt que vous portez à cette réponse

0

Octobre 2011

Pourrais-tu me montrer ta boucle qui affiche le résultat ? Je ne suis pas sur de mon coup. J’ai fais ça :
<div class="ajax"> #FORMULAIRE_RECHERCHE_STATE <BOUCLE_city(CONDITION){si #ENV{city}}> <BOUCLE_city_result(ARTICLES){city IN #ENV{city}}{par titre, num titre}> [(#TITRE|unique)<br>] </BOUCLE_city_result> </BOUCLE_city> <BOUCLE_state(CONDITION){si #ENV{state}}> <BOUCLE_state_result(ARTICLES){state IN #ENV{state}}{par titre, num titre}> [(#TITRE|unique)<br>] </BOUCLE_state_result> </BOUCLE_state> <//B_city> </div>
Merci ! :-)
Indiquez l’intérêt que vous portez à cette réponse

0
mirobolus

Octobre 2011
Je vais essayer de regrouper toutes mes étapes ici.
Attention, çà risque d’être long... désolée !

Etape 1 : Dans la page recherche.html
Appel du formulaire de recherche (ajax) :
<div class="ajax"> #FORMULAIRE_RECHERCHE_FUSIONNEE </div>
Etape 2 : Dans le fichier recherche_fusionnee.html
<div class="formulaire_spip rechStock" id="formulaire_recherche"> <form action="[(#ENV{action})]" method="get"> [(#ENV{action}|form_hidden)] [<input type="hidden" name="lang" value="(#ENV{lang})" />] <B_csvrecherchefab> <h4><:rech_fab:></h4>  <select name="manufacturer" class="tailleselect" onchange="submit()"> <option value="">Tous</option> <BOUCLE_csvrecherchefab(spip_produits){fusion manufacturer}{manufacturer != 'manufacturer'}{manufacturer>''} > [<option value="(#MANUFACTURER|textebrut|unique)" [(#ENV{manufacturer}|=={[(#MANUFACTURER|textebrut|supprimer_tags)]}?{"SELECTED"})]>[(#MANUFACTURER)]</option>] </BOUCLE_csvrecherchefab> </select> </B_csvrecherchefab>  <INCLURE{fond=recherchefam}{ajax}{env}> </form> </div>
Etape 3 : Pour appeler mon 2ème formulaire, le fichier recherchefam.html ne contient que ceci :
<div class="ajax"> #FORMULAIRE_RECHERCHE_FAMILLE </div>
Etape 4 : Dans le fichier recherche_famille.html
<BOUCLE_test(CONDITION){si #ENV{manufacturer}}>  <B_csvrecherchefam> <select name="famille" class="tailleselect" onchange="submit()"> <option value="">Tous</option> <BOUCLE_csvrecherchefam(spip_produits){manufacturer=#ENV{manufacturer}}{famille != 'famille'}{famille>''}{fusion famille}> [<option value="(#FAMILLE|unique)" [(#ENV*{famille}|=={[(#FAMILLE*)]}?{"SELECTED"})]>[(#FAMILLE*)]</option>] </BOUCLE_csvrecherchefam> </select> </B_csvrecherchefam> </BOUCLE_test>  <B_csvrecherchefamTout> <select name="famille" class="tailleselect" onchange="submit()"> <option value="">Tous</option> <BOUCLE_csvrecherchefamTout(spip_produits){famille != 'famille'}{famille>''}{fusion famille}> [<option value="(#FAMILLE|unique)" [(#ENV*{famille}|=={[(#FAMILLE*)]}?{"SELECTED"})]>[(#FAMILLE*)]</option>] </BOUCLE_csvrecherchefamTout> </select> </B_csvrecherchefamTout> <//B_test>
A noter que chaque formulaire doit être couplé avec son pendant en php, sur le même modèle que le fichier de recherche de la dist.
Exemple : recherche_fusionnee.html est accompagné de son pote recherche_fusionnee.php qui contient :
<?php if (!defined("_ECRIRE_INC_VERSION")) return; // chargement des valeurs par defaut des champs du formulaire function formulaires_recherche_fusionnee_charger_dist($lien_filtre = NULL,$lien_arg = NULL){ $lien = $lien_filtre ? $lien_filtre : $lien_arg; if ($GLOBALS['spip_lang'] != $GLOBALS['meta']['langue_site']) $lang = $GLOBALS['spip_lang']; else $lang=''; return array( 'action' => ($lien ? $lien : generer_url_public('recherche')), # action specifique, ne passe pas par Verifier, ni Traiter 'manufacturer' => _request('manufacturer'), 'famille' => _request('famille'), 'lang' => $lang ); } ?>
Je pense que ce code a besoin d’être optimisé mais je n’ai pas eu le temps d’y regarder de plus près (d’ailleurs, les conseils seront les bienvenus ! ).
J’espère que ce regroupement général du code vous aidera.
Indiquez l’intérêt que vous portez à cette réponse

0

Julien

Octobre 2011

D’accord ! Cool !

1. J’ai un problème mais c’est normal. Car j’ai une arborescence différente de la tienne. Les résultats du deuxième formulaire sont différents à chaque fois. Ce ne sont pas des famille comme chez toi. Normal, il ne peut pas y avoir la même ville dans chaque département...

Par exemple :

Quand je sélectionne : Californie il m’affiche bien toutes les ville en Californie :

&page=inc-test&state=California&city=

Après je sélectionne une des ville "Thao City" en Californie. Il m’affiche bien tout les magasins en Califirnie :

&page=inc-test&state=California&city=Thao+City

Mais la je veux changer de département et mettre Utah. La ça merde la première fois parce que la ville et mémorisée dans l’url ce qui me donne :

&page=inc-test&state=Utah&city=Tahoe+City

Alors qu’il n’y a pas de "Thaoe City" dans Utah. En revanche la seconde fois tout rentre dans l’ordre car il a bien listé les villes de Utah dans le second formulaire.

Il faudrait alors trouvée le moyen de mettre un résultat nul à la ville, chaque fois que l’on change de département.

2. Autrement j’ai pas bien compris pourquoi faire 2 formulaires et pas réunir les 2 dans un seul fichier #FORMULAIRE_RECHERCHE_XXX Il me semble avoir le même résultat avec moins de fichier.

3. La boucle qui t’affiche les résultats avec les produits (pas les résultats du formulaire) tu peux me montrer à quoi elle ressemble ?

Pire cool ! Merci encore !

Julien.
Indiquez l’intérêt que vous portez à cette réponse

0

mirobolus

Octobre 2011

Hello !

1. Même comportement relevé pour moi, mais comme je dois proposer une recherche par famille et/ou par fabricant, on doit pouvoir utiliser l’un ou l’autre des select ou les deux. J’ai opté pour indiquer un message d’erreur en cas de couple fabricant+famille improbable.
<... texte rectifié...>
J’ai testé ceci dans le 1er select :
onClick=' document.forms["tonform"].elements["nom2emeSelect"].value = "" ' et çà marche !

2. Voui peut-être... j’avoue que j’ai tellement séquencé mes fichiers pendant mon dév que je n’ai pas tenté le regroupement. J’ai un grand ménage à faire maintenant. D’autant que mon client souhaite maintenant que le résultat des recherches (code ci-dessous) se transforme en bon de commande ;-) pas fini de me gratter la tête !...

3. Code qui affiche les résultats :
<B_result> #ANCRE_PAGINATION <p><:total:> : #GRAND_TOTAL</p> <table border="1" width="630px">   <BOUCLE_result(spip_produits) {manufacturer?}{famille?}{part_number?}{condition?} {par part_number}{pagination 50}> <tr> <td>[(#PART_NUMBER)]</td> <td>[(#CONDITION)]</td> <td>[(#MANUFACTURER)]</td> <td>[(#DESCRIPTION)]</td> <td>[(#FAMILLE)]</td> <td>[(#QUANTITY)]</td> </tr> </BOUCLE_result> </table> [<p class="pagination">(#PAGINATION)</p>] </B_result> <br clear="all" /> [(#REM) (Recherche infructueuse)] Message pour recherche infructueuse <//B_result>
(Référence)
Voili-voilà M’sieur !
Indiquez l’intérêt que vous portez à cette réponse

0

Julien

Octobre 2011

Ha beaucoup mieux cette boucle ! :-) Merci beaucoup !

Je vais essayé d’intégrer les "onclick" mais ce qui me gène, c’est qu’il recharge la page avec le onclick et ça crée évidement l’url suivant : ?page=inc-test&state=XXX&city=YYY

En gardant les boutons submit (voir mon exemple) ça marche bien et la page ne se rafraichi pas. Le souci... il faut valider à chaque fois :-/

Je vais encore chercher de mon coté.

En tout cas merci pour ton implication ! Ça fait plaisir ! :-)
Indiquez l’intérêt que vous portez à cette réponse

0

mirobolus

Octobre 2011

En effet, je trouve çà moins périlleux avec les boutons. Et peut-être plus clair pour l’utilisateur.

Petit doute : as-tu mis le onClick dans la balise du 1er select (choix de l’etat pour ton cas) ? comme ceci ?

<select name="manufacturer" class="tailleselect" onchange="submit()" onClick=' document.forms["cherchestock"].elements["famille"].value = "" '>

Je n’ai pas l’impression que la page se recharge complètement chez moi.
Indiquez l’intérêt que vous portez à cette réponse

0
Julien

Septembre 2012
Re salut, j’ai trouvé une solution a mon petit problème.

Si jamais, il faut mettre ceci dans ton squelette pour ne pas a avoir besoin des boutons pour valider la recherche.
<script> $('option').live('click',function() { $(this).closest('form').submit(); }); </script>
Avec dans la class du formulaire :

"bouton_action_post ajax"

Et la t’as un joli URL avec un chargement en AJAX

Julien