Discussion :

[BLEITE]

Bonjour,

je réalise un formulaire dans lequel j'ai mis une liste déroulante (filteringselect) dont les données sont issues d'une BDD.
Jusque là rien de bien compliqué.

ce que je cherche à faire est de rajouter un bouton "+" ou "ajouter un produit" qui lorsque l'on clique dessus nous rajoute dans le formulaire une nouvelle liste déroulante (avec les même données que la précédente) et avec un id et un nom différent (ça c'est pour le traitement de données en POST).

Du coup j'aurai un formulaire avec par exemple une liste de produit, et lorsque l'utilisateur à choisi un produit il peut en rajouter autant de fois qu'il cliquera sur le bouton "+".

Voilà et merci à tous, bonne journée.

[Daniel_Gibot]

Bonjour
Je ne vois qu'un moyen. C'est créer une fonction javascript qui va créer dynamiquement tes filteringSelect dynamiquement (avec le store issu de ta BDD) au click sur ton bouton "+".

[BLEITE]

Bonjour,

En effet j'avais bien en tête un fichier js appelé depuis le formulaire, mais le dojo ne s'active pas...
ex de code avec un ValidationTextBox et un système de vérif d'adresse mail.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var i = 1;
function create_champ(){
 var nouveau = document.createElement('div');
 
	nouveau.id = 'produit_ajout' + i;
	nouveau.innerHTML = 'Produit suppl&eacute;mentaire : <input type="text" name="produit_ajout[' + i + ']" id="produit_ajout_' + i + '" dojoType="dijit.form.ValidationTextBox" regexpgen="dojox.validate.regexp.emailAddress"	trim="true"	required="true"	invalidmessage="Email Invalide" />&nbsp;&nbsp;<a  onclick="remove_champ(' + i + ')" href="#" />Supprimer</a><hr></div>';
	document.getElementById('produit_ajout').appendChild(nouveau);
	i++;
}
 
function remove_champ(i){
	var parent = document.getElementById("produit_ajout"+i).parentNode;
	parent.removeChild(document.getElementById("produit_ajout"+i));
}

le champ se met en place, la suppression aussi, mais le dojo ne s'active pas....

[Daniel_Gibot]

Il faut créer l'objet dojo dans la fonction javascript et non l'insérer dans une balise.
Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
	var monStore = new dojo.data.ItemFileReadStore({
		url: "./store/monStore.json"
	});
	var filteringSelect = new dijit.form.FilteringSelect({
		id: "monSelect",
		name: "monSelect",
		store: monStore,
		searchAttr: "uneColonne",
		promptMessage : "Sélectionnez un élément"
	},"maBalise");

"maBalise" correspond à l'id d'un div (ou autre) dans ma page. Dans ton cas ce serait "nouveau.id"

[BLEITE]

Bonjour,

Tout d'abord merci à toi, tes indications m'ont été précieuses. Je bosse depuis 15 sur le sujet et j'ai bien avancé.

Mais il reste un léger détail que je ne m'explique pas, lorsque je cliques sur le bouton "+" il m'ajoute bien bien un élément mais c'est une textebox (en fait on voit qu'il n'active pas dojo) mais si on reclique sur le bouton "+" alors d'une part il m'ajoute une nouvelle textebox, mais il me transforme bien la textebox précédente en filteringSelect comme demandé avec les données à l'intérieur (grace à mon fichier produit_json.php qui inclut une requête à la BDD avec les données à l'intérieur).
donc voici mon code modifié grace à tes informations :

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
var i = 1;
var monStore = new dojo.data.ItemFileReadStore({url:"functions/produit_json.php"});
function create_champ(){
 var nouveau = document.createElement('div');
nouveau.id = 'produit_ajout' + i;
 
 var filteringSelect = new dijit.form.FilteringSelect({
        id: "id_produit" + i,
		name: "produit" + i,
		value: "1",
		store: monStore,
		searchAttr: "name"
	}, "nouveau.id");
 
	nouveau.innerHTML = 'Produit suppl&eacute;mentaire : <input id="nouveau.id">&nbsp;&nbsp;<a  onclick="remove_champ(' + i + ')" href="#" />Supprimer</a><hr></div>';
	document.getElementById('produit_ajout').appendChild(nouveau);
	i++;
}
 
function remove_champ(i){
	var parent = document.getElementById('produit_ajout' + i).parentNode;
	parent.removeChild(document.getElementById('produit_ajout' + i));
}

il doit me manquer quelque chose..... rhaaaa

[Daniel_Gibot]

Bonjour,

Content de te faire gagner du temps

Je pense que cela vient de la création de ton input. Etant donné que tu crées l'objet filteringselect et que tu veux l'insérer dans ta nouvelle balise, il faudrait qu'elle soit créée avant. Or ta balise "<input>" est créée juste après voir m^me tout ton bloc "div".

Par contre, au niveau de la suppression, je pense qu'il faut detruire l'objet. Pas que la balise. Sinon tu risques de rencontrer des conflits d'id si tu recrées avec le même.

[BLEITE]

Salut,

bon à force de chercher et un peu par hasard j'ai trouvé la solution...
il suffisait simplement de mettre l'objet filteringSelect après la création de l'élément... et cela fonctionne... je ne comprends pas la logique mais cela fonctionne... si tu as une explication, je la lirai avec plaisir.

voici le code corrigé

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
 
var i = 1;
 
function create_champ(){
 var nouveau = document.createElement('div');
	nouveau.id = 'produit_ajout' + i;
	nouveau.innerHTML = 'Produit suppl&eacute;mentaire : <input id="nouveau.id"> &nbsp;&nbsp;<a  onclick="remove_champ(' + i + ')" href="#" />Supprimer</a><hr>';
	document.getElementById('produit_ajout').appendChild(nouveau);
 
var filteringSelect = new dijit.form.FilteringSelect({
        id: "id_select_produit" + i,
		name: "select_produit[" + i + "]",
		value: "1",
		store: SelectProduit,
		searchAttr: "name"},
        "nouveau.id");
 
	i++;	
}

et encore merci de tes explications et de ton aide.

Bonne soirée.