Discussion :

[lemirandais]

Bonjour à tous

Je suis face à un soucis et je ne vois pas comment effectué mon travail.

Je dispose d'un select avec plusieurs options. Jusque là pas de soucis. En fonction d'une valeur de ce select, je crais une iframe qui contient un formulaire, voici mon code.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.selectlocalisation').change(function()
    {
        if($(this).val()=='add')
        {
            var position = '.'+$(this).parent().parent().parent().attr('class');
            $( "<div id=\"LocaliteProvisoire\" class=\"span6\"><iframe id=\"localitesadding\" class=\"span5\" style=\"height:350px;\" src=\"../../localites/edit2\"></iframe></div>").insertAfter( "#Localite"+position );
            ecoute();
        }
        else
        {
            $('#LocaliteProvisoire').remove();
        }
    });

Une fois que l'utilisateur complète ce formulaire, je voudrais rajouter l'id retourné et le name dans l'option du select précédent et le mettre par défaut. J'ai donc créer une fonction écoute que j'appelle dans le code précédent, et j'exécute ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ecoute()
    {
        $("div#LocaliteProvisoire iframe").on('load', function()
        {
            if($('.newlocalityid').lenght)
            {
                alert('ok');
                $('.selectlocalisation').append('<option value="'+$('.newlocalityid').val()+'" selected="selected">'+$('.newlocalityname').val()+'</option>');
            }
        })
    }

Cependant, cela ne marche pas, je pense que je m'y prend mal.

Pourriez vous m'éclairez svp?

Merci d'avance.

lemirandais

NB, voici ce que me retourne l'iframe une fois le formulaire valider:

Code html :

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

1
2
<span class="newlocalityid">1</span>
<span class="newlocalityname">nouvelle localité</span>

[danielhagnoul]

Bonsoir

En l'absence de la totalité des codes, impossible de tester. Je suggère de remplacer les codes ci-dessus par le code suivant :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$( ".selectlocalisation" ).on( "change", function(){
	var myDivLocal, myFrameLocal;
 
	if ( $( this ).val() == "add" ){
 
		// Remplacer le "?" par le tag du parent recherché.
		var position = '.' + $( this ).parents( "?" ).attr( 'class' );
 
		myFrameLocal = $( "<iframe/>", {
			"class" : "span5",
			"css" : {
				"height" : "350px"
			},
			"src" : "../../localites/edit2",
			"load" : function(){
	            if ( $( ".newlocalityid" ).lenght ){
	                $( ".selectlocalisation" ).append( '<option value="' + 
	                	$( ".newlocalityid" ).val() + 
	                	'" selected>' + 
	                	$( ".newlocalityname" ).val() + 
	                	'</option>' );
	            }
			}
		});
 
		myDivLocal = $( "<div/>", {
			"class" : "span6"
		}).append( myFrameLocal ).insertAfter( "#Localite" + position );
    } else {
    	myDivLocal.remove();
    }
});

[Bovino]

$( ".newlocalityid" ).lenght ?

[lemirandais]

Bonjour

Tout d'abord merci pour ces réponses.
Bovino, je te contacterais en privé pour te donner mon adresse pour que tu viennes me pendre pour une erreur de frappe aussi banale. Cependant mon code ne fonctionnait pas même en corrigeant!

C'est vrai que je n'ai pas mis en place mon code source. Voici la partie du code source qui nous interresse en ce moment:

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
17
<div class="tab-pane" id="localite">
                    <div id="divlocalite" class="span6">
                        <div class="control-group">
                             <label for="InterventionLocaliteId" class="control-label">Localité de l'intervention</label>
                             <div class="controls">
                                  <select name="data[Intervention][localite_id]" class="input-block-level selectlocalisation" placeholder="Localité de l'intervention" id="InterventionLocaliteId">
                                  <option value="0">Sélectionnez la localite</option>
                                  <option value="add">Absente dans cette liste?</option>
                                  <option value="1" selected="selected">Salle 1</option>
                                  <option value="2">Salle 2</option>
                                  <option value="6">Salle 3</option>
                                  <option value="10">Salle 4</option>
                                  </select>
                              </div>
                         </div>
       </div>
</div>

Concernant ton code danielhagnoul, je n'ai pas encore testé, je préfère comprendre le code et après le mettre en fonctionnement.
Merci en tout cas.

lemirandais

EDIT APRES TEST
Je viens de faire des essaies. J'ai apporté quelques modifications et l'affichage de l'iframe fonctionne sans soucis. Le soucis qu'il y a maintenant c'est la récupération des valeurs de l'iframe.
En effet, quand j'affiche l'iframe, l'utilisateur complète le formulaire puis valide le formulaire de cette frame. Une fois la validation effective, il obtient les valeurs qui seront donc ajouter au select. L'idée que j'ai eu ce matin (je ne dirais pas où car personne ne me répondrait) c'est d'écouter l'action submit de ce formulaire, est ce faisable? SI oui comment? Pour l'instant, ces réponses restent inconnu pour moi, mais je vais commencé à chercher.
Merci encore à tous.

EDIT 2
la partie qui pose problème est au niveau de la récupération des valeurs retournées par le formulaire. En effet, déjà une erreur que j'ai faite, c'est pas val() mais text(). Ensuite, ces valeurs sont, comme je l'ai précédement indiqué, après la validation du formulaire. En l'idée serait de surveiller la validation de ce formulaire afin de lancer la récupération des éléments.

[lemirandais]

J'ai trouvé grâce à cela: http://stackoverflow.com/questions/1...me-with-jquery
Maintenant en testant, cela fonctionne sans aucun soucis.
Voici les modifications que j'ai mis en place. Si vous voyez des optimisations, je suis preneur.

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
$( ".selectlocalisation" ).on( "change", function(){
		var myDivLocal, myFrameLocal, parent;
 
		if ( $( this ).val() == "add" ){
			var position = "#divlocalite";
			myFrameLocal = $( "<iframe/>", {
				"class" : "span5",
				"css" : {
					"height" : "350px"
				},
				"src" : "../../localites/edit2",
				"load" : function(){
					parent=$("#LocaliteProvisoire iframe").contents();
		            if ( parent.find(".newlocalityid").length ){
		                $( ".selectlocalisation" ).append( '<option value="' + 
		                	parent.find(".newlocalityid").text() + 
		                	'" selected>' + 
		                	parent.find(".newlocalityname" ).text() + 
		                	'</option>' );
		                $("#LocaliteProvisoire").remove();
		            }
				}
			});
 
			myDivLocal = $( "<div/>", {
				"class" : "span6",
				"id"    :  "LocaliteProvisoire"
			}).append( myFrameLocal ).insertAfter( "#divlocalite" );
	    } else {
	    	$("#LocaliteProvisoire").remove();
	    }
	});

Merci en tout cas.
lemirandais