Discussion :

[informer]

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 :

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

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 :

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

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

je n'ai plus aucune OPTION dans le DOM

Code :

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

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 :

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

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 :

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

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

[danielhagnoul]

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

[informer]

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


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


Bonsoir chez toi

[danielhagnoul]

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.

[informer]

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




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 :

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

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 :

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
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é

[danielhagnoul]

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();.

[informer]

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 !!!!!

[informer]

danielhagnoul,

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

[informer]

danielhagnoul,

A priori a méthode JQuery bugue :

Code :

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

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

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

Code :

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

$(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 !

[SpaceFrog]

Code :

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

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

[informer]

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 :

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

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

[SpaceFrog]

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

[informer]

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 :

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

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

[SpaceFrog]

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 ...

[informer]

Salut SpaceFrog,

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

Encore merci pour ton aide si précieuse.