Discussion :

[tom1970]

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 :

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
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 html :

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

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.

[SpaceFrog]

Code :

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

leselect = oXmlhttp.responseText;

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

[lysandro]

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

Fais le tri coté serveur ...

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

Sinon tu peux essayer ça :

Code javascript :

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

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 ?

[tom1970]

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 :

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

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 !

[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

[tom1970]

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

[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

[SpaceFrog]

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

[lysandro]

Code javascript :

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
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);
}

[tom1970]

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 :

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

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

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

[lysandro]

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 javascript :

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

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 javascript :

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

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.

[tom1970]

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 :

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

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

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

[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

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

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

[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