Tri alpha sur texte d'un select

Version imprimable

Bonjour,

J'appel mes valeurs depuis ma BDD en JS, pour faire un menu dynamique en 3 niveaux (si valeur select 1 = X alors affiche valeur select 2 correspondant, puis select 3).

Tout marche parfaitement, sauf que je change le texte de mes options du select 2 (category) et que du coup j'ai un classement non cohérent... Je souhaite ajouter un tri alpha sur la nouvelle valeur du texte de l'option (<option value="xxxx">TEXTE</option>) du select dynamiquement créé.

Je ne sais comment et où faire ce nouveau classement/affichage, avant ou après mes "replace", dans le script ou le html. Enfin je suis perdu !!!

Mon JS qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script type="text/javascript">
if (window.XMLHttpRequest) {
   oXmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
function selectManufacturer(id) {
	document.getElementById('subcategory').innerHTML = "";
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('category').innerHTML = leselect;
  }
 
 
	 var strMessage1 = document.getElementById("category") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace('option value="13446">Acier</option>','<option value="13446">Couverts Acier</option>')
.replace('option value="13449">Acier</option>','<option value="13449">Pieces Acier</option>')
.replace('option value="13453">Accessoires</option>','<option value="13453">Auto Accessoires</option>')
.replace('.......etc.........')	;
 
	 }
 
 
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=m&id='+id;
 oXmlhttp.send (data);
}
 
function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('subcategory').innerHTML = leselect;
  }
 }
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);
}
 
 
</script>

Le HTML :

Code:

1
2
3
4
5
6
7
8
9
<form method="get" action="recherche-listesderoulantes-resultats.php">
<select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
     <option value='-1'>Choisissez</option>
     <option value="1739" >MArque 1</option><option value="5794" >MArque 2</option><option value="1753" >...........</option></select>
<div id='category' style='display:inline'>
</div>
<div id='subcategory' style='display:inline'>
</div>
</form>

D'avance un grand merci.

15/12/2014, 08h31
SpaceFrog

Code:

leselect = oXmlhttp.responseText;

Il semblerait que tu génères directement le code HTML de ton select coté serveur ?
Fais le tri coté serveur ...

Citation:

Envoyé par tom1970

Tout marche parfaitement, sauf que je change le texte de mes options du select 2 (category) et que du coup j'ai un classement non cohérent...

Citation:

Envoyé par SpaceFrog

Fais le tri coté serveur ...

coté SQL avec un jointure ou autre pour tes chgts de libellés.

Sinon tu peux essayer ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var strMessage1 = document.getElementById("category") ; strMessage1.innerHTML = strMessage1.innerHTML.replace('option value="13446">Acier</option>','<option value="13446">Couverts Acier</option>') .replace('option value="13449">Acier</option>','<option value="13449">Pieces Acier</option>') .replace('option value="13453">Accessoires</option>','<option value="13453">Auto Accessoires</option>') .replace('.......etc.........') ; Array.prototype.sort.call(strMessage1.options,function(a,b){ return a.text < b.text ? -1 : a.text > b.text ? 1 : 0; });
NB: dans ton '.replace(...)' tu remplaces 'option ...' par '<option ...' bug ou volontaire ?

15/12/2014, 11h14
tom1970

ne prends as en compte le .remplace
Bonjour,

Merci de vous pencher sur mon problème ..

Alors coté serveur pas possible car cela implique une réorganisation complète de la base ... et avec plus de 15000 références je cherche à contourner le problème ...

le code
Code:

1 2 3 4 5 6 7 Array.prototype.sort.call(strMessage1.options,function(a,b){ return a.text < b.text ? -1 : a.text > b.text ? 1 : 0; });
fonctionne ... sauf qu'il ne tient pas compte des .replace et affiche les "anciennes" valeur de texte .... c'est là tout mon problème, la fonction doit tenir compte de mes replaces et faire le tri avec les nouvelles valeurs !
15/12/2014, 14h30
lysandro

J'ai peut-être raté un truc dans la logique de ton code ... :?

A priori, ce que je voulais dire c'est :
- tu charges les nouvelles valeurs de ta liste,
- tu fais tes '.replace' anciennes valeurs par nouvelles valeurs
- tu mets à jour ta propriété '<select>.innerHTML'
- tu fais ton tri avec Array.prototype.sort sur ton élément <select>.options
15/12/2014, 15h08
tom1970

confirmation

C'est absolument cela ...

Mais le problème c'est que le Array.prototype.sort fait le tri sur les valeurs retournées par la BDD et non sur les nouvelles valeurs du replace ...
15/12/2014, 15h35
lysandro

Je ne comprends pas. Que le tri puisse ne pas fonctionner pourquoi pas, mais sur les anciennes valeurs ?!
As tu visualisé le contenu (.innerHTML) avant et après le '.replace' ? est-il correct ? puis après le '.sort' ?
Tu mets à jour tes listes en AJAX, tu dois donc faire tes '.replace', puis le '.sort' après avoir reçu ta réponse
15/12/2014, 15h36
SpaceFrog

pour trier coté client
http://jsfiddle.net/xtw3jmst/1

Possible d'essayer ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function selectManufacturer(id) {
    var category, data;
 
    document.getElementById('subcategory').innerHTML = "";
 
    oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
    oXmlhttp.onreadystatechange=function() {
        if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
            leselect = oXmlhttp.responseText;
            // ici: leselect = leselect.replace(...).replace(...)...
            // avec des alert ou console.log avant et après, le temps de voir si
            // les remplacements sont faits correctement
            if ( (category = document.getElementById('category')) != null ) {
                category.innerHTML = leselect;
                Array.prototype.sort.call(category.options, function(opta,optb){
                    ...
                }); // ou ce que propose SpaceFrog peu importe
                // avec alert ou console.log le temps de voir si le tri a bien
                // été fait
            }
        }
    }
    oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data = 'q=m&id='+id;
    oXmlhttp.send (data);
}

Y a du progrès

Alors j'ai bien mon tri avec le text et non les valeurs .. mais sur les valeur/texte avant les .replace .. Je vais devenir chèvre !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/javascript">
if (window.XMLHttpRequest) {
   oXmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
 
 
function selectManufacturer(id) {
    var category, data;
     document.getElementById('subcategory').innerHTML = "";
    oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
    oXmlhttp.onreadystatechange=function() {
        if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
            leselect = oXmlhttp.responseText;
	   leselect = leselect.replace('<option value="13709">Accessoires</option>','<option value="13709">Accessoires auto</option>').replace('<option value="13801">Produits</option>','<option value="13801">Produits Peinture</option>').replace('[........]');
 
            if ( (category = document.getElementById('category')) != null ) {
                category.innerHTML = leselect;
                Array.prototype.sort.call(category.options,function(a,b){
    return a.text < b.text
           ? -1
           : a.text > b.text
           ? 1
           : 0;
});
 
 
            }
        }
    }
    oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data = 'q=m&id='+id;
    oXmlhttp.send (data);
}
 
 
 
function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('subcategory').innerHTML = leselect;
  }
 }
 
 
 
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);
}
 
 
</script>

et toujours le meme html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form method="get"  action="recherche-listesderoulantes-resultats.php">
<select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
<option value='-1'>Choisissez</option>
<option value="1739" >MArque 1</option><option value="5794" >MArque 2</option><option value="1753" > ........</option></select>
 
 
 
<div id='category' style='display:inline'>
</div>
<div id='subcategory' style='display:inline'>
</div>
</form>

Je n'arrive a comprendre ou je bloque, soit tri mais sur ancien textes, soit nouveaux textes mais pas trier par ordre alpha .....

:D normal ... ma faute ... mal lu :

le document.getElementById renvoi le div pas le select ! donc category.options est undefined - pas de danger que ce soit trié
donc il faut essayer soit
Code:

1 2 3 4 5 6 ... if ( (category = document.getElementById('category')) != null ) { category.innerHTML = leselect; if ( (leselect = category.getElementsByTagName("select")[0]) != null ) { Array.prototype.sort.call(leselect.options,function(a,b){ ...
soit si tu as défini un id sur ton select
Code:

1 2 3 4 5 6 ... if ( (category = document.getElementById('category')) != null ) { category.innerHTML = leselect; if ( (leselect = document.getElementById("<id du select>")) != null ) { Array.prototype.sort.call(leselect.options,function(a,b){ ...
soit n'importe quelle autre méthode permettant d'attraper le select en question

(pas trouvé comment garder la coloration syntaxique et rajouter des mises en évidence)

edit: la méthode Array.prototype.sort est pratique car elle fait un tri "en-place" mais je ne sais pas si c'est la plus adaptée au web (compatibilité) SpaceFrog a proposé autre chose à base de jQuery, je crois.

j'ai besoin de soleil ...

Le problème reste le meme, a savoir pas de prise en considération des .replace.

J'ai bien le classement alpha sur texte... mais avec les anciens textes !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
		<script type="text/javascript">
if (window.XMLHttpRequest) {
   oXmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
 
 
function selectManufacturer(id) {
    var category, data;
     document.getElementById('subcategory').innerHTML = "";
    oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
    oXmlhttp.onreadystatechange=function() {
        if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
            leselect = oXmlhttp.responseText;
			leselect = leselect.replace('<option value="13709">Accessoires</option>','<option value="13709">Accessoires Hommes</option>');.replace('<option value="13709">Accessoires</option>','<option value="13709">Accessoires Femmes</option>');.replace('[....]');
 
            if ( (category = document.getElementById('category')) != null ) {
                category.innerHTML = leselect;
                if ( (leselect = category.getElementsByTagName("select")[0]) != null ) {
                    Array.prototype.sort.call(leselect.options,function(a,b){
    return a.text < b.text
           ? -1
           : a.text > b.text
           ? 1
           : 0;
});
 
   }
	}
 
        }
    }
    oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data = 'q=m&id='+id;
    oXmlhttp.send (data);
}
 
 
function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('subcategory').innerHTML = leselect;
  }
 }
 
 
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);
}
 
 
</script>

et le html "déployé "

Code:

1
2
3
4
5
6
7
8
9
10
<form method="get" action="recherche-listesderoulantes-resultats.php">
<select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
<option value="-1">Choisissez</option>
<option value="1739">Marque 1</option><option value="5794">Marques2</option><option value="1753">Marques3</option></select>
 
 
<div id="category" style="display:inline"><select style="width: 80%" name="category" onchange="selectCategory(1742,this.value);"><option value="-1">-- Catégorie --</option><option value="31379">Accessoires</option><option value="13737">Accessoires</option><option value="14492">Accessoires </option>[........]</select></div>
 
<div id="subcategory" style="display:inline"><select onchange="this.form.submit();" style="width: 80%" name="filter_id"><option value="-1">-- Sous catégorie --</option><option value="14497">Amaryllis</option><option value="14508">Arum</option>[......]</select></div>
</form>

je n'arrive a mettre le doigt sur mon erreur !!!

16/12/2014, 20h21
lysandro

Bon, le première chose à faire c'est de visualiser (console.log, alert, ...) ce que tu reçois comme réponse : le 'oXmlhttp.responseText', puis 'leselect' juste après les '.replace'. Ca permettra déjà de savoir, s'il n'y a pas un problème là. Peut-être y a t il un décalage entre ce qui est reçu et les remplacements ?

Maintenant, il y a des bricoles que je ne comprends pas, je ne pense pas que ce soit la cause du problème, mais sait on jamais ... :
- tu as un 'name' défini sur le 'select' qui a la même valeur que le 'id' du 'div' : 'category', c'était pas une bonne idée il y a longtemps, je ne sais pas si c'est mieux aujourd'hui
- dans le html déployé, tes options n'ont pas les mêmes contenus que les '.replace' que tu fais :
options:
<option value="31379">Accessoires</option>
<option value="13737">Accessoires</option>
.replace:
<option value="13709">Accessoires</option> remplacé-par <option value="13709">Accessoires Hommes</option>
<option value="13709">Accessoires</option> remplacé-par <option value="13709">Accessoires Femmes</option>
- enfin, entre tes '.replace', il y a maintenant un point virgule qu'il n'y avait pas avant
16/12/2014, 20h28
lysandro

Hep! je viens de percuter : comment fais tu pour avoir des '.replace' dans le source de ta page, alors que tu récupères tes données en AJAX, et donc sans recharger ta page ???
Tu as une page avec tous les '.replace' possibles et imaginables qui peuvent se produire en fonction des sélections ?!
16/12/2014, 21h13
tom1970

oui j'ai allégé ma liste de remplace dans mon code mais sinon ils sont tous listés ...

Et peut être que dans le html du <select> category appeler une fonction d'un script avec un onblur ou onselect de tri alpha, car dans ma version originale, sans recherche de tri j'ai bien ma liste de nouveaux textes mais mal agencé ....

.... il y a un truc qui m'échappe !
16/12/2014, 22h24
lysandro

As tu visualisé ce que tu reçois d'un coté 'leselect = oXmlhttp.responseText' et après les '.replace' ? parce mis à part les .replace sont faux -ou- tu ne mets pas à jour le bon élément (indépendamment du tri), je ne vois pas ...
La proposition de SpaceFrog de traiter coté serveur est pas mal :) même dans PHP à defaut de SQL