[JAVASCRIPT] Comment créer un select dynamiq?

Résolu/Fermé
Signaler
-
 lingus -
Bonjour à tous,
Je suis en train de faire un script qui lors d'un événement de l'utilisateur créé dynamiquement deux select.
Pour crééer les options des select j'ai un petit bou d'ajax qui me premet d'aller chercher des infos en PHP.
Cela marche nikel sous IE mais sous Firefox il faut que je rajoute un "alert('nimporte quoi')" apres l'Ajax si je veux que les options des select soient remplies.
En gros mes variables "strLangues" et "strLanguesNiveaux" sont vides si je met pas de "alert()" juste avant.
J'aimerai bien avoir ce code fonctionnel sans "alert()" ^^.
Quelqu'un aurait il une idée ?

Pour la piste que je suis en train de suivre:
- C'est peut être la gestion des espaces et retour à la ligne dans l'arbre DOM sous Firefox.


function	AjoutLangue(){
		var	table			=	document.getElementById('Langues');
		var	tbody			=	document.createElement('tbody');
		var	trLangue		=	document.createElement('tr');
		var	tdLangue		=	document.createElement('td');
		var	tdNiveau		=	document.createElement('td');
		var	selectLangue	=	document.createElement('select');
		var	selectNiveau	=	document.createElement('select');
		var check			= 	document.createElement('input');
		var	strLangues = "";
		var	strLanguesNiveaux = "";
		
		// checkbox pour supprimer
		check.type		= 'checkbox';
		check.onclick	= function(){
		   letd      	= 	this.parentNode;
		   letr			=	letd.parentNode;
		   letable		=	letr.parentNode;
		   letable.removeChild(letr);
		}
		var reg=new RegExp('[|]+');
		/*** Creation du select des langues ***/
		// recherche des infos pour constituer les select de langue
		var callbackLangue = function(result) {
			strLangues	=	result;
		}
		var url = '/modules/emploi/candidat/library/sel_langues.php';
		HTML_AJAX.grab(url, callbackLangue);
                /** Il faut decommenter ce alert pour que ca marche sous Firefox
		alert('aloha'); */
		// Creation des options du select
		var tabLangues=strLangues.split(reg);
		selectLangue.name	=	'Langues[]';
		for (var i=0; i<tabLangues.length; i++) {
			var	optionLangue		=	document.createElement('option');
			optionLangue.value		=	tabLangues[i];
			optionLangue.text		=	tabLangues[i];
			selectLangue.appendChild(optionLangue);
			
			/*selectLangue.options[i].value = tabLangues[i];
			selectLangue.options[i].text = tabLangues[i];*/
		}
		
		/*** creation du select des niveaux ***/
		// recherche des infos pour constituer les select de niveau
		var callbackNiv = function(result) {
			strLanguesNiveaux	=	result;
		}
		var url = '/modules/emploi/candidat/library/sel_niveaux.php';
		HTML_AJAX.grab(url, callbackNiv);
		/** Il faut decommenter ce alert pour que ca marche sous Firefox
		alert('aloha'); */
		// Creation des options du select
		var tabLanguesNiveaux=strLanguesNiveaux.split(reg);
		selectNiveau.name	=	'Niveaux[]';
		for (var i=0; i<tabLanguesNiveaux.length; i++) {
			var	optionLangueNiveau			=	document.createElement('option');
			optionLangueNiveau.value		=	tabLanguesNiveaux[i];
			optionLangueNiveau.innerHTML	=	tabLanguesNiveaux[i];
			selectNiveau.appendChild(optionLangueNiveau);
		}
		
		//Affichage
		tdLangue.appendChild(selectLangue);
		trLangue.appendChild(tdLangue);
		tdNiveau.appendChild(selectNiveau);
		tdNiveau.appendChild(check);
		tdNiveau.appendChild(document.createTextNode("Enlever"));
		trLangue.appendChild(tdNiveau);
		tbody.appendChild(trLangue);
		table.appendChild(tbody);	
	}

4 réponses

Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
608
Hum si c'est celle de Pearl c'est peut être pas buggué alors mais c'est toujours possible hein. Faut pas non plus avoir une confiance aveugle dans les librairies toutes faite. lol

Voici mon explication qui vaut ce quelle vaut : tu exécutes une requête Ajax en mode asynchrone çàd qui rend tout de suite la main au programme et s'exécute en tâche de fond. Maintenant si tu n'attends pas la fin de la requête et que tu continues dans ta fonction AjoutLangue() tu risques de te retrouver avec la variable strLanguesNiveaux vide. Le alert() introduit une sorte de pause c'est pour ça que lorsque tu l'ajoute la requête à le temps de s'exécuter et ta variable est correctement initialisée.
Maintenant c'est juste un coup de chance si ça fonctionne sur IE : il va peut-être plus vite que FF à gérer les requêtes Ajax.

Pour être certain que FireFox passe bien dans le callback place un alert() dedans.

Pour que ça marche tu dois donc mettre tout le code qui charge tes listes dans la fonction de callback :

	var callbackNiv = function(result) {
			strLanguesNiveaux	=	result;
PLACE TON CODE ICI :-)
		}



De plus à ta place je déclarerais la fonction de callback à l'extérieur de la fonction AjoutLangue() car en faisant ainsi tu créés ce qu'on appelle une "closure" (du moins je crois faut dire que j'ai du ml avec cette notion ...) sauf la doc de Pearl te dit de faire de cette façon.

2
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
608
Bjr,

A mon avis c'est ton "petit bijoux d'AJAX" qui vaut pas grand chose ...lol !

Ta librairie Ajax doit être bugguée. Pesonnellement, ,ne trouvant pas de classe AJAX digne de ce nom je m'en suis écrit une en JS tout objet.
C'est encore en cours de test mais ça fonctionne déjà sous IE et FF sans problème. ;-)

Si tu veux je peux essayer de te retrouver mon code avec un exemple : par contre c'est pas encore documenté ... T'Oh !!!!!

Sinon cherche une éventuelle erreur dans le code de la librairie Ajax : je sais c'est pas simple ... Eventuellement poste le code ou un lien.

Bon courage
1
Et m****,
je me doutais que ca pouvais venir de là, mais comme je débute en DOM je m'étais dis que j'avais fait une boulette.
C'est pas grave je vais aller voir dans cette lib.
Le truc c'est que je crois que c'est la lib Ajax de PEAR donc je pensais que ca ne serait pas buggué.
Bref merci beaucoup PhP de m'avoir aiguillé.
0
C'est exactement ce que je voulais entendre.
Merci c'est trop cool, tes explications sont nikel krom.
Je vais remanier mon petit script pour exécuter mon code là où il doit l'être.
Je pensais à tort que nos amis les browsers étaient des Flash Gordon.
Encore merci PhP et à bientot pr de nouveaux débugages !
0