Quick links: Content - sections - sub sections
EN FR
Quick Search Advanced search
 
Page

  [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

Reply #1 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

Reply #2 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

Reply #3 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

Reply #4 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

Reply #5 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>
 
Page
  1. génération dynamique de liste par radio bouton