Combobox : Remove() + rechargement => OPTION vide (<OPTION></OPTION>)

Bonjour à tous,

Mon problème en quelques point:

Contexte
J'initialise une combobox avec la résultat d'une requête via ajax et PHP qui tape dans une BdD MySQL.
Pour l'exemple, la requête d'initialisation ramène 4 lignes qui alimente ainsi la combobox:

Je charge la combo avec ce code

Code:

---

1 2 3 4 5 6 7

var listBox = "#cbFormation"; $("option", listBox).remove(); for (var i=0; i<oDataSQL.length; i++) { oDataListBox.text = oDataSQL[i]["LIBELLE"]; oDataListBox.value = oDataSQL[i]["IDSESSION"]; $(listBox).addOption(oDataListBox.value, oDataListBox.text); }

---

Après

Code:

---

$("option", listBox).remove();

---

je n'ai plus aucune OPTION dans le DOM

Code:

---

1 2	<select name="cbFormation" size="1" id="cbFormation" onchange="setRating();return false;" style="position:absolute;left:191px;top:184px;width:284px;height:21px;z-index:22;"> </select>

---

Et après le chargment (boucle for) j'ai bien mes 4 items dans le DOM

Code:

---

1 2 3 4 5

<select name="cbFormation" size="1" id="cbFormation" onchange="setRating();return false;" style="position:absolute;left:191px;top:184px;width:284px;height:21px;z-index:22;"> <option>value="0">Maconnerie du 01 mars 2016</option> <option value="1">porte du 01 mars 2016</option> <option value="2">informatique du 01 avril 2016</option> <option value="3">salle de bain du 01 mai 2016</option></select>

---

Problème
Si je recharge la combobox avec un nombre d'items inférieur au nombre initial j'ai autant de lignes à blanc que de différence entre le nombre de lignes ramenées initialement et celui du rechargement.
Si je recharge la combobox avec 3 items, après le chargement (boucle for) j'ai bien les 3 items mais avec un intrus <option></option> dont la présence est totalement inexpliquée !!!!

Voici le code copié dans l'inspecteur Chrome :

Code:

---

1 2 3 4 5

<select name="cbFormation" size="1" id="cbFormation" onchange="setRating();return false;" style="position:absolute;left:191px;top:184px;width:284px;height:21px;z-index:22;"> <option></option> <option value="1">porte du 01 mars 2016</option> <option value="2">informatique du 01 avril 2016</option> <option value="3">salle de bain du 01 mai 2016</option></select>

---

Toute aide sera la bienvenue

Bonjour chez vous :pingoin2:

$( '#cbFormation' ).empty();.

Bonsoir danielhagnoul

Je te remercie une nouvelle fois pour ton aide.

Si tu veux tester en direct mon problème, il suffit de cliquer ici!. Désolé pour la pub, ce n'est pas de mon fait mais le prix à payer pour être hébergé gratuitement

Valide avec user0/user0 et ensuite fais une recheche avec la date du jour dans le champs "Entre le " . La combobox sera alors composé de 3 items mais de 4 lignes. Et bien sûr la sélection de la ligne à blanc provoque une erreur.

On obtient
Pièce jointe 199764

C'est à n'y rien comprendre (j'adore cette expression désuette :lol:)


Bonsoir chez toi :pingoin2:

Bonjour

Je viens de tester (désolé pour le délai, j'ai été plus malade que d'habitude). Je ne vois pas de ligne blanche, juste 4 lignes d'options bien remplies.

Bonjour danielhagnoul,

Désolé d'apprendre que tu as été malade et espère que la santé revient.

Merci d'avoir testé la démo. Ce problème arrive après avoir cliqué sur le bouton recherche avec une date de début saisie dans les critères de recherche ici le 31.03.2016 Cf.ci-dessous

Pièce jointe 200044


Et dans l'inspecteur du browser, les 2 items dont la date de début est inférieure à la date saisie ont disparu mais j'ai encore les 2 <option></option> vides a priori correspondant aux 2 items supprimés. La question est pourquoi ces deux lignes à blanc?

Code:

---

1 2 3 4 5 6

<select name="cbFormation" size="1" id="cbFormation" onchange="setRating();return false;" style="position:absolute;left:191px;top:147px;width:352px;height:21px;z-index:19;"> <option></option> <option></option> <option value="2">informatique du 01 avril 2016</option> <option value="3">salle de bain du 01 mai 2016</option> </select>

---

sachant que la fonction de chargement dynamique de la combobox est :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function setListBox(pDataSQL, pListBox) { var oDataListBox= {}; var oDate = new Date(); var oDataSQL = pDataSQL; var listBox = "#" + pListBox;   $("option", listBox).remove();   for (var i=0; i<oDataSQL.length; i++) { tDate = oDataSQL[i]["DATEDEB"]; oDate = new Date(oDataSQL[i]["DATEDEB"].replace(/\s/,"T")); oDataListBox.text = oDataSQL[i]["LIBELLE"]+ " du " + oDate.toFrFormat() ; oDataListBox.value = oDataSQL[i]["IDSESSION"]; $(listBox).addOption(oDataListBox.value, oDataListBox.text);   } }

---

Bonjour chez toi et bonne santé :pingoin2:

Avec une date dans le futur et un clic sur le bouton "recherche", oui j'ai deux lignes vides.

Mais je vois qu'à la ligne 65 du code "formulaire.js", vous n'avez pas remplacé $("option", listBox).remove(); par $( listBox ).empty();.

Merci encore danielhagnoul pour ton retour

C'est quoi la différence entre .remove et .empty, svp? Histoire de pas rester bête!!!

Mais je viens d'essayer avec .empty même combat, toujours ces fichues lignes à blanc !!!!!:massacre:

danielhagnoul,

J'ai MAJ le site cliquer ici et tu verras qu'il n' y as pas de changement!!!:wow:

danielhagnoul,

A priori a méthode JQuery bugue :

Code:

---

$(listBox).addOption(oDataListBox.value, oDataListBox.text);

---

car avec la méthode ci-dessous, évaporé le problème!!!!:yaisse1:

Code:

---

$(listBox).append('<option value="'+oDataListBox.value +'">'+oDataListBox.text +'</option>');

---

Bon cela restera toujours un mystère. Les versions JQUERY utilisées, Possible, non ?

Encore merci pour ton aide et si tu élucides le pourquoi, je suis preneur !:chin:

Code:

---

$(listBox).append( $('<option/>').val(oDataListBox.value).text(oDataListBox.text) ) ;

---

Salut SpaceFrog

Merci beaucoup pour ta solution qui fonctionne a merveille.

Mais si tu connais la raison pour laquelle avec JQuery la methode addOption n'a pas fonctionné, je serais très intéressé.

Code:

---

$(listBox).addOption(oDataListBox.value, oDataListBox.text);

---

Pour moi une des raison principale pourlaquelle addOption ne focntionnerait pas c'est que ce n'est pas jquery natif, ni du js Natif ...

Tu as de la doc dessus ?


avec js un add new Option :
https://fiddle.jshell.net/xee364Lp/1

Bonjour SpaceFrog,

Merci pour ton aide et le lien vers le site https://fiddle.jshell.net/. Ce site est-il une plateforme collaborative?

Et pour le addOption, désolé mais je suis incapable de savoir d'où je l'ai sortie.

J'ai également trouvé cette méthode que je n'ai pas testé:

Code:

---

1 2 3 4 5 6

$.each(oDataListBox, function(oDataListBox) { $('#cbFormation') .append($("<option></option>") .attr((oDataListBox["SESSION"],key) .text(oDataListBox["LIBELLE"])); });

---

le site de fiddel est un bac à sable js / frameworks très pratique pour tester du code avec totues sortes de frmaeworks et version.

Et ton code ressemble à s'y méprendre au mien ...

Salut SpaceFrog,

Tu as totalement raison :ccool:. C'est pas qu'il ressemble au tien, c'est exactement le même mais indenté différemment :whistle:. Faut que j'arrête ou que je continue mais à plus forte dose :marteau:.

Encore merci pour ton aide si précieuse.:chin: