creer des option dans une liste deroulate à la volée

Question

Bon je vais essayer d'etre le plus clair possible En gros j'ai un formulaire pour remplir une base de donnée et qui va recolter des infos dans celle ci pour les menu deroulant. a coté des menu deroulant j'ai un lien qui m'ouvre une popup pour rajouter des element a la liste deroulante. Le problème c'est que je voudrais mettre a jour la liste déroulante à la volée juste apres avoir fait mon insertion dans la base! j'ai essayer le code suivant : function reload(id,nom){ var o = new Option(id,nom); window.opener.frmFormCollec.lstEditeur.options[window.opener.frmFormCollec.lstEditeur.options.length]=o; //window.opener.location = "./admin.php?sLienAdmin=AdmCollec&sAction=collec&btnAction=nouveau&btnAction=&lstChoix="; window.close(); } Avec comme id la valeur de mon choix dans la liste et nom ce qui doit s'afficher Le problème c'est que quand j'execute ca ie me renvoie une erreur javascript me disant que le serveur a fait une exception dans j'imagine qu'il doit y avoir une erreur mais j'arrive pas a voir laquelle!! Merci de m'aider please!!!!

cs_jeca · Answer

Ci-dessous, copie d'un mail envoyé il y a plusieurs mois à propos d'un problême tout à fait similaire :

Je vais essayer de t'expliquer le plus clairement possible le problème 
que j'ai eu, et la manière dont je l'ai résolu. Ensuite, tu extrapoleras
en fonction du tien. Je vais raccourcir car le même problème se produit
plusieurs fois dans le formulaire.
 
Il s'agit d'un BDD destinée à enregistrer des livres, et donc des formulaires
permettant d'enrichir les tables.
 
LES TABLES
 livres : Id,
      		Titre,
      		Id_Auteur
      
 auteurs : Id,
      		 Nom,
       Prenom
      
LE FORMULAIRE
 livres :
  Champ "titre" type "text"
  Champ "auteur" type "select"
  Champ "Créer un auteur" type "button"
  Champ "valider" type "submit"
  Champ "supprimer" type "submit"
  Champ "divers" type "hidden"
  
 auteurs(popup) :
  Champ "nom" type "text"
  Champ "prenom" type "text"
  Champ "valider" type "submit"
  Champ "annuler" type "button" (fermeture de la popup sans action)
  Champ "divers" type "hidden"
 
LE BUT
Je voulais donc, lorsque je crée un livre, pouvoir crée un auteur dans un formulaire d'une popup, s'il n'est pas dans le "select", le soumettre afin mettre à jour la table "auteurs", fermer automatiquement la popup après soumission, revenir dans ma fenêtre appelante (opener) sans avoir perdu les infos déjà saisies, sans rafraîchir et avoir ajouté dans
le "select" l'auteur nouvellement créé, reclassé par ordre
alpha.
 
Après divers essais, j'ai vu qu'il m'était impossible d'ajouter une "option" dans le "select" à partir de la popup.
 
LE PRINCIPE ADOPTE
Lorsque je clique sur "créer un auteur", j'ouvre un popup.
Lorsque le formulaire de la popup est soumis, php effectue 
l'enregistrement dans la table "auteurs", je récupère la nouvelle clé par une seconde requête, je la mets dans le champ caché "divers" et je relance la popup. Mais l'utilisateur ne la voit pas car il y a un event-handler (onload) dans le  qui va tester si le champ caché est renseigné. S'il l'est, la fonction va : 
 écrire dans le champ caché de la fenêtre appelante la clé, le nom, le prénom de l'auteur dans le format "cle,nom,prenom".
 fermer la popup.
 
Lorsque je reviens sur la fenêtre appelante, un event-handler (onfocus) dans le  va effectuer le reste si le champ caché est renseigné : 
 récupérer le contenu texte du "select" dans un tableau,
 ajouter le nouvel auteur dans le tableau,
 trier le tableau (tri à bulle, car il y a peu d'enreg.),
 réinjecter tous ceci dans le "select",
 redonner le focus au "select".
 
A part la soumission, tout le reste est réalisé en javascript.
Le texte est long, mais l'exécution est tout à fait insensible pour l'utilisateur.
 
Je ne suis pas sûr que tout fonctionne correctement avec NN, mais c'est bon avec IE.
 
J'ajouterai qu'il y a peut-être une solution plus simple, mais je ne l'ai pas trouvée. Si tu trouves, je suis preneur. 

Cordialement

jc

axl63800 · Answer

alors ta reponse est presque parfaite et je t'en remercie!!

Du reste, j'ai un chtit probleme concernant le fait de réinjecter le tableau dans le select en fait j'ai meme pas tout compris a cette histoire de tableau parceque j'ai l'impression que tu stocke les données de ta table dans un tableau en javascript mais je vois pas trop comment d'une part et je ne sais pas comment injecter des données dans un select (du code serait le bienvenue!!)

Merci encore pour ta reponse et pour la suivante j'espere

cs_jeca · Answer

Ci-dessous les 2 fonctions que j'utilise. Lis les commentaires car il y a une petite différence avec ce que je t'ai écrit dans le 1er message : le contenu du champ "hidden".

Il y a sûrement de l'optimisation à faire car cela date de mes débuts en javascript, en conséquence, je me pardonne.

//-- fonction appelée par l'évènement "onload" de  ----------------
    function insere()
    {
//-- optioncache = champ renseigné par la popup -----------
//-- il contient : nom du select, texte de l'option, value de l'option ----------
//-- séparés par une virgule -------------------------
      var valeur = document.FormArticle.optioncache.value;
      if (valeur == "") return;
      
      tableau = valeur.split(",");
//-- amettreajour = nom du select à modifier -----------
      var amettreajour = tableau[0];
      var nom = tableau[1];
      var cle = tableau[2];
      var indice = eval("document.FormArticle."+amettreajour+".length");
      var nouveau = new Option(nom, cle);      commande "document.FormArticle."+amettreajour+".options[indice] nouveau";
      eval(commande);
      document.FormArticle.optioncache.value = "";
      tri(amettreajour, nom);
    }

    function tri(amettreajour, nom)
    {
      balise = eval("document.FormArticle."+amettreajour);
      for (var i = 0; i < balise.length; i++)
      {
        for (var j = i + 1; j <= maxi ; j++)
        {
          if ((balise.options[i].text).toUpperCase() > (balise.options[j].text).toUpperCase())
          {
            var texte_temp = balise.options[i].text;
            var valeur_temp = balise.options[i].value;
            balise.options[i].text = balise.options[j].text;
            balise.options[i].value = balise.options[j].value;
            balise.options[j].text = texte_temp;
            balise.options[j].value = valeur_temp;
          }
        }
      }
      sel_indice = balise.selectedIndex;
      sel_valeur = balise.options[sel_indice].text;
      if (nom.toUpperCase() < sel_valeur.toUpperCase())
      {
        balise.options[sel_indice].selected = false;
        balise.options[sel_indice + 1].selected = true;
      }
    }

Cordialement

jc

axl63800 · Answer

MERCI BEAUCOUP c'est super agréable de tomber sur des reponses aussi précises et adaptées a son problème!! merci de m'eviter des heures de recherche!! 

ENCORE MERCI

Creer des option dans une liste deroulate à la volée

4 réponses

Votre réponse

Discussions similaires