- 1
[Opened] génération dynamique de liste par radio bouton
Posted by Macharius on 05/03/2011 17:56
Bonjour, Je travail sur un site en Jelix qui contient des formulaires. Dans un de ces formulaires, il y a plusieurs radio bouton. Ces radio bouton viennent d'une table de la base de donnée (ex: table : table_a, champs de la table : a_id et a_libelle). J'aimerai que quand on check un certain radio bouton, ça fasse une requête sql et ça affiche le résultat juste en dessous des radio bouton. J'ai trouvé 2 solutions a mon problème, une élégante et une beaucoup moins XD. L'élégante serai de faire une génération de <div> en javascript ^^ alors que l'autre :( serai de pré-changer toutes mes requêtes et de cacher des <div> que je ne veux pas voir (ce qui serai très lourd). Donc j'ai voulu faire la première :) et j'ai rencontré un petit problème. C'est pour cela que je me tourne vers vous :p
Voila mon problème. Dans un fichier tpl j'ai la <div> avec la table complète de ma requête qui marche parfaitement, sauf que je voudrai que ça affiche que certaine ligne.
<div id="leDiv" > <p> <code> <table class="expanded" cellspacing="0" > <tr> <th class="color1">Description </th> <th class="color2">Cochez la case appropriée</th> <th class="color3">Tarif </th> </tr> {foreach $oTarifs as $oTarif} <tr class="row{$i++%2+1}"> <td class="color4" style="width:70%">{$oTarif->fichetarif_libelle}</td> <td class="color2" style="text-align:center"><input type="checkbox" value="{$oTarif->fichetarif_id}" name="capteur_TestAFaire[]" {foreach $oDescriptionTestCopy as $o} {if $oTarif->fichetarif_id == $o->fichetarif_id} checked = "checked" {/if} {/foreach} /></td> <td class="color4" style="text-align:center">{$oTarif->fichetarif_tarifHT}</td> </tr> {/foreach} </table> </p></div> </code>
Il faut donc que je mette ce code dans une fonction javascript, mais je n'y arrive pas :( car tout ce qui est entre {} est directement écrit sur la page.
document.getElementById('leDiv').innerHTML += "<div id='leDiv2'><p><table class='expanded' cellspacing='0' ><tr><th class='color1'>Description </th><th class='color2'>Cochez la case appropriée</th><th class='color3'>Tarif</th></tr>{foreach $oTarifs as $oTarif}<tr class='row{$i++%2+1}'><td class='color4' style='width:70%'>{$oTarif->fichetarif_libelle}</td><td class='color2' style='text-align:center'><input type='checkbox' value='{$oTarif->fichetarif_id}' name='capteur_TestAFaire[[]]' {foreach $oDescriptionTestCopy as $o}{if $oTarif->fichetarif_id == $o->fichetarif_id}checked = 'checked'{/if}{/foreach} /></td><td class='color4' style='text-align:center'>{$oTarif->fichetarif_tarifHT}</td></tr>{/foreach}</table></p></div>";
Donc j'aimerai savoir si vous avez une solution :)
Merci.
[Opened] génération dynamique de liste par radio bouton
Posted by Tpt on 05/03/2011 19:17
As-tu mis {literal} avant ton code js ? si oui, il faut le fermer avant tout appel de fonction template puis le rouvrir. Si ce n'est pas cela, montre-nous tout ton template.
[Opened] Re: génération dynamique de liste par radio bouton
Posted by Macharius on 05/03/2011 20:27
non j'ai pas mis {literal}
Voici ma fonction dans mon fichier.js
function create_DivTarif(capteurId) { <code> document.getElementById('div_tarif').innerHTML += "<div id='div_tarifu'><p><table class='expanded' cellspacing='0' ><tr><th class='color1'>Description du test (ou des tests) sur l'échantillon</th><th class='color2'>Cochez la case appropriée</th><th class='color3'>Prix HT (euros)</th></tr>{foreach $oTarifs as $oTarif}<tr class='row{$i++%2+1}'><td class='color4' style='width:70%'>{$oTarif->fichetarif_libelle}</td><td class='color2' style='text-align:center'><input type='checkbox' value='{$oTarif->fichetarif_id}' name='capteur_TestAFaire[]' {foreach $oDescriptionTestCopy as $o}{if $oTarif->fichetarif_id == $o->fichetarif_id}checked = 'checked'{/if}{/foreach} /></td><td class='color4' style='text-align:center'>{$oTarif->fichetarif_tarifHT}</td></tr>{/foreach}</table></p></div>";
}
</code>Pourtant j'ai d'autre fonction du meme genre en beaucoup plus simple qui marche (sans foreach, ni variable php :p)
[Opened] génération dynamique de liste par radio bouton
Posted by catsoup on 05/03/2011 22:47
Bonjour, si le code pour jtpl est dans un fichier js externe, il ne sera en effet pas compilé :p
A voir aussi {ldelim}
et {rdelim}
http://jelix.org/articles/fr/manuel-1.2/(..)
Mais pour ce cas pratique, le plus simple est d'utiliser jquery et une réponse Ajax par exemple quelquechose comme ça:
<script type="text/javascript"> var get_tarifs = {urljsstring 'myshop:get_tarifs'}; {literal} $(function(){ <code> $('input[name=choix]').change(function(){ getTarifs($(this).val()); });
});
function getTarifs(choix_id){
$.get(get_tarifs, {choix_id: choix_id}, function(data) { $('#tarifs').html(data)); });
} {/literal}
</code>[Opened] Re: génération dynamique de liste par radio bouton
Posted by Macharius on 05/04/2011 09:34
désolé mais je ne comprend rien a ton code :( mais merci quand même ^^
[Opened] génération dynamique de liste par radio bouton
Posted by catsoup on 05/04/2011 23:45
Salut! Si tu connais pas encore jquery, c'est normal, par contre faut s'y mettre ! voila quelques liens:
Je te remet le code avec des commentaires
<script type="text/javascript"> // affectation variable qui contient le lien formatté pour javascript // avec le plugin de template {urljsstring} var get_tarifs = {urljsstring 'myshop:get_tarifs'}; {literal} // onload version jquery (lancement au chargement du DOM) $(function(){ <code> // surveille l'evenemenent change sur tous les boutons radios $('input[name=choix]').change(function(){ // lors de cet evenement, appeler la fonction getTarifs getTarifs($(this).val()); });
});
function getTarifs(choix_id){
// appel ajax de l'url get_tarifs $.get(get_tarifs, {choix_id: choix_id}, function(data) { // remplace le contenu de la div #tarifs // par la reponse obtenue contenue dans la variable data $('#tarifs').html(data)); });
} {/literal}
</code>- 1