Discussion :

[ibill]

Bonjour,

Assez peu expérimenté en js, encore moins en jQuery, j'essaie en vain depuis quelques jours d'arriver à mes fins : il s'agit de faire un form dynamique dont un select affiché changerait en fonction de la valeur d'un bouton radio :

Le bouton radio :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="field">
	<label for="f_transfert">Transfert du défunt... : </label>
		<input name="f_transfert" type="radio" value="vers ossuaire" id="vossuaire">Vers ossuaire&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input name="f_transfert" type="radio" value="vers jardin du souvenir" id="vjardin">Vers jardin du souvenir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input name="f_transfert" type="radio" value="vers colombarium" id="vcolumbarium">Vers colombarium
</div>

A noter que ma page est une jsp avec du jstl dedans, ce dernier permet de créer le html du select à afficher. Pour le moment - et c'est le cadet de mes soucis - les 3 listes sont fabriquées en même temps que la page (pour ne pas refaire des appels au serveur : pas d'ajax dans mon appli).

L'idée est d'aller mettre dans une balise (id='transfertvers') le code html correspondant, soit au moyen de .Add, soit au moyen de .html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="field">
	<div>TEST JQUERY</div>
	<div id="transfertvers">
		<!-- insertion dynamique jQuery -->
	</div>
</div>

Pour le moment, j'arrive à récupérer la valeur de mon radio avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
jQuery('[name=f_transfert]').click(function(event){
     alert(jQuery('[name=f_transfert]:checked').val());
});

Mais je devrai passer par ce genre de fonction pour aller au final mettre le html de la liste voulue dans le document :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
switch(jQuery('[name=f_transfert]:checked').val()){
	case "vers ossuaire" :
		return ${htmloss} ;
		break;
	case "vers jardin du souvenir" :
		return ${htmljds} ;
		break;
	case "vers colombarium" :
		return ${htmlcol} ;
}

...Et là je suis un peu perdu car je ne sais plus où mettre quoi !

J'ai ma jsp qui inclue du js et notamment le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery(document).ready(function() {

J'ai aussi une feuille js avec des fonctions - notamment certaines appelées par la même page, donc je me verrai bien mettre le traitement à la suite.

Bref, suis un peu perdu, je vous remercie d'avance pour votre aide !

B.

[mathieu]

pour modifier l'intérieur d'une balise, il y a la fonction jQuery "html"

essaye ce code par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#transfertvers").html($("#htmloss"));

regarde cette page pour d'autres fonctions de modification :
http://api.jquery.com/category/manip...ertion-inside/

[ibill]

Merci pour la réponse...
J'ai un peu avancé :
Mon code est désormais (j'ai mis les variables jstl dans des var js, c'est plus clair pour la suite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery('[name=f_transfert]').click(function(event) {
       var oss = '<c:out value="${htmloss}"/>';
       var jds = '<c:out value="${htmljds}"/>';
       var col = '<c:out value="${htmlcol}"/>';
       switch (this.value) {
           case "vers ossuaire" :
               jQuery("#transfertvers").html(oss);
               break;
           case "vers jardin du souvenir" :
               jQuery("#transfertvers").html(jds);
               break;
           case "vers colombarium" :
               jQuery("#transfertvers").html(col);
               break;
           }
});

Le seul souci, c'est qu'au lieu de me mettre le contrôle dans la page, il me met le html en dur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='prectransf'><label for='f_ossuaire_id'>Ossuaire : </label><select name='f_ossuaire_id'><option value='67017311'>67017311</option><option value='67017312'>67017312</option></select></div>

EDIT : Ok, c'est résolu : le passage de la variable jstl vers js ne doit pas échapper au html :
Donc : fonction unescape donnée sur un autre forum :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function unescapeHTML(htmlstring) {
  var elem = document.createElement("div");
  elem.innerHTML = htmlstring;
  return elem.childNodes.length === 0 ? "" : elem.childNodes[0].nodeValue;
}

Et affectation à la variable js de cette manière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oss = unescapeHTML('<c:out value="${htmloss}"/>');