Bonjour,

J'ai une page qui est subdivisé en 2 zones :

• 1 qui affiche un formulaire de recherche avec notamment 2 listes
• 1 autre qui affiche le résulat d'une requête dans 1 tableau

Jusque là pas de problème.

Je souhaite dans ce formulaire que le contenu d'une liste (id = jforms_governance_searchEngine_id_theme) varie en fonction de celle de la liste de id = "jforms_governance_searchEngine_id_type_governance".

En m'inspirant des exemples, côté client dans mon template j'ai ceci

<script type="text/javascript">  
{literal} 
<code>
    
    
    function getXhr()
    {
         var xhr = null; 
	     if(window.XMLHttpRequest) // Firefox et autres
	          xhr = new XMLHttpRequest(); 
						 
		 else if(window.ActiveXObject){ // Internet Explorer 
			   try {
		              xhr = new ActiveXObject("Msxml2.XMLHTTP");
		           } 
		           catch (e) 
		           {
		              xhr = new ActiveXObject("Microsoft.XMLHTTP");
			       }
		 }
		 else
		 { 
		     // XMLHttpRequest non supporté par le navigateur 
			 alert("Votre navigateur ne supporte pas les objets  
                         XMLHTTPRequest..."); 
			 xhr = false; 
		 } 
         return xhr;
	}
    // Fonction qui s'exécute au changement d'index dans la liste "id_type_governance"
    function handleChange() 
    {   
        var listGovernance =      
        document.getElementById("jforms_governance_searchEngine_id_type_governance");
               
        var xhr = getXhr();
        xhr.onreadystatechange =
        
        function()
	{
	   if(xhr.readyState == 4 && xhr.status == 200)
	   {
	      leselect = xhr.responseHtml;
	     document.getElementById('jforms_governance_searchEngine_id_theme').innerHTML =  
             leselect;
	   }
	}
		
       __ xhr.open("POST","governance~index:index",true);__
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	
       // Je récupère la valeur actuelle dans la liste id_governance
        idGovernance = listGovernance .options[listGovernance .selectedIndex].value;
	xhr.send("idGovernance="+idGovernance);
		 
	
	}   
	
	function load() 
	{ 
	    var oElement =  
            document.getElementById("jforms_governance_searchEngine_id_type_governance"); 
		
	    if( !window.addEventListener ) 
			oElement.OnChange=function(){handleChange()}
        
            //compatibilité IE 
		
		else oElement.addEventListener("change", handleChange, false); 
	} 

{/literal}

{meta_html bodyattr array('onload'=>'load()')}

{form $SearchForm,'governance~index:criteriaSearch'}

 {formcontrols array('title')}
    <p id="motcle"> {ctrl_label} {ctrl_control} </p>
  {/formcontrols}
  
  {formcontrols array('id_type_governance','id_theme')}
    <table  class="table_governance" {ifctrl 'id_type_governance'} id = "id_type_governance" {/ifctrl},{ifctrl 'id_theme'} id = "id_theme" {/ifctrl}>
    <tr><td class="label_governance">  {ctrl_label 'id_type_governance'}</td> <td class="ctrl_id_type_governance"> {ctrl_control 'id_type_governance'}</td><td class="ctrl_id_theme">{ctrl_control 'id_theme'}</td>
    </tr>
    </table>
  {/formcontrols}
  
  {formcontrols array('id_entity_type','id_partners')}
    <table  class="table_entity" {ifctrl 'id_entity_type'} id = "id_entity_type" {/ifctrl},{ifctrl 'id_partners'} id = "id_partners" {/ifctrl}>
    <tr><td class="label_entity">  {ctrl_label 'id_entity_type'}</td> <td class="ctrl_id_entity_type"> {ctrl_control 'id_entity_type'}</td><td class="ctrl_id_partners">{ctrl_control 'id_partners'}</td>
    </tr>
    </table>
  {/formcontrols}
  
  {formcontrols array('id_publication_type')}
    <table  class="table_publication_type" {ifctrl 'id_publication_type'} id = "id_publication_type" {/ifctrl}>
    <tr><td class="label_publication_type">  {ctrl_label 'id_publication_type'}</td> <td class="ctrl_id_publication_type"> {ctrl_control 'id_publication_type'}</td>
    </tr>
    </table>
  {/formcontrols}
 
  {formcontrols array('id_authors')}
    <table  class="table_authors" {ifctrl 'id_authors'} id = "id_authors" {/ifctrl}>
    <tr><td class="label_authors">  {ctrl_label 'id_authors'}</td> <td class="ctrl_id_authors"> {ctrl_control 'id_authors'}</td>
    </tr>
    </table>
  {/formcontrols}
  
  {formcontrols array('year1','year2')}
    <table  class="table_year" {ifctrl 'year1'} id = "year1" {/ifctrl},{ifctrl 'year2'} id = "year2" {/ifctrl}>
    <tr><td class="label_year1">  {ctrl_label 'year1'}</td> <td class="ctrl_year1"> {ctrl_control 'year1'}</td><td class="label_year2">{ctrl_label 'year2'}</td><td class="ctrl_year2">{ctrl_control 'year2'}</td>
    </tr>
    </table>
  {/formcontrols}
  
  <p id=button>{formsubmit}</p>
  
  

{/form}

et j'ai aussi mon contrôleur index

protected $dbProfil = 'governance';
protected $dao = 'publication~publication';
protected $form = 'governance~searchEngine';
protected $offsetParameterName = 'offset';
protected $listPageSize = 25;
<code>
	

function index() {

     $rep = $this->getResponse('html');
     $rep->body->assignZone('PublicationsForm','governance~index_publicationsForm');
     $rep->body->assignZone('ThematicTable','governance~index_thematicTable');
    	
     return $rep;

}

et pour construire ma liste dynamiquement j'ai ce code inspiré d'1 exemple sur unforum

<?php

<code>
   $themeFactory = jDao::get('theme~theme');
   
   $conditions = jDao::createConditions();
   $conditions->addItemOrder('id_governance',$_POST["id_type_governance"]);
   $conditions->addItemOrder('designation','asc');
   
   $listThemes = $themeFactory->findBy($conditions);
     	
   echo "<select name='id_theme'>";
   foreach($listThemes as $theme)
   {
        echo "<option value='".$theme["id"]."'>".$theme["designation"]."</option>";
   }
   echo "</select>"; 	

?>

Et j'en viens aux pblms:

1. Où dois-je mettre ce dernier code qui s'exécute côté serveur: dans le contrôleur ? ma zone ?
2. Ma réponse à l'origine étant de type Html je pense qu'elle cause problème! j'ai lu dans la

  doc qu'on peut utiliser __jResponseHtmlFragment __ mais comment ? Est ce utile dans mon cas ?

Notez que mon événement sur ma liste est bien détecté (je l'ai testé en faisant un alert). Mais rien ne s'affiche dans ma seconde liste des thèmes

A la vu de ce code (de débutant) quelqu'un a-t-il une idée de la solution.

Merci

jayjay a dit :
Bonjour,

J'ai une page qui est subdivisé en 2 zones :

* 1 qui affiche un formulaire de recherche avec notamment 2 listes
* 1 autre qui affiche le résulat d'une requête dans 1 tableau

Jusque là pas de problème.

Je souhaite dans ce formulaire que le contenu d'une liste (id = jforms_governance_searchEngine_id_theme) varie en fonction de celle de la liste de id = "jforms_governance_searchEngine_id_type_governance".

pour ce genre de chose il y a "les choix améliorés" ici peut-être cela résoudrait votre soucis

Merci

Mais ma première liste est dynamique, je peux donc pas utiliser cette balise. Et je dois utiliser les listes pour respecter mon cahier des charges.

I still wait...car je suis vraiment bloqué à ce niveau.

Salut,

si tu utilises une nightly de Jelix 1.2 (pas la beta, trop vieille), tu as tout ce mécanisme de manière native et automatique. Pas de js à faire, rien, juste à indiquer 2 attributs dans ton jforms. Exemple:

<menulist ref="departement" required="true" >
<code>
    <label>Departements</label>
    <datasource dao="monmodule~departements" labelproperty="nom" valueproperty="code_dep"/>

   <label>Ville</label>
      <datasource dao="monmodule~ville" method="findByDepartement" criteriafrom="departement"
                  labelproperty="nom" valueproperty="code_ville"/>

Note que pour la ville, il y a l'attribut criteriafrom, indiquant quel est le controle dont celui ci depent, et un attribut method, qui indique la méthode du dao à appeler, sachant que cette méthode doit accepter en argument la valeur du controle dont il dépend.

Et sinon:

1. jquery est utilisé par jforms. Tu devrais franchement l'utiliser pour faire tes appels ajax. ça diviserai par 10 ton nombre de ligne de code js, au lieu de faire du xhr à la main
2. pour le code qui génère ta reponse ajax: fait un controleur et une action, et utilise la réponse htmlfragment ou json. et dans ton code js, tu appelle l'url de cette action, tout simplement, pour récupérer le contenu et l'injecter.

Salut

J'ai utilisé la nightly 1.2 comme suggéré par laurentj. Lors de la soumission de form ma 2ème liste est bien fonction de la selection de la 1ère. Mais la selection d'une autre valeur dans la première liste ne change pas dynamiquement le contenu de la seconde!!

Voici le code dans le form xml

<menulist ref="id_type_governance" required="true">
<code>
              <label>Type de Gouvernance</label>
              <datasource dao="governancetype~governance_type" method="findAll"
              labelproperty="designation" valueproprety="id"/>

              <label>Thèmes</label>
              <datasource dao="theme~theme" method="findByGovernance"  criteriafrom="id_type_governance"
                          labelproperty="designation" valueproprety="id"/>

et mon dao

<code>
       <method name="findByGovernance" type="select">
            <parameter name="id_governance"/>
            <conditions>
                <eq property="id_governance" expr="$id_governance" />
            </conditions>
       </method> 

Qu'est ce que j'ai loupé??