Discussion :

[Guizmo95]

Bonjour,

Je suis actuellement sur du Jquery mobile (version 1.3.0).

J'utilise un select multiple, contenant par exemple ceci :

Animaux

cheval

mouton

boeuf

etc

Objet

Table

lampe

etc

Je souhaite que pour chaque catégorie (Animaux/Objet/...) 2 critères maximum peuvent être choisi.

J'ai deux solutions d'affichage et toutes deux on des problèmes :

Soit la solution A avec :

Code :

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

data-native-menu="true"

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name="Selector" id="Selector" multiple="multiple" data-native-menu="true" data-overlay-theme="c" data-theme="c"  data-icon="grid" data-iconpos="left">
    <optgroup label="Animaux">
        <option value="cheval" selected="selected">cheval</option>
        <option value="mouton">mouton</option>
        <option value="boeuf">boeuf</option>
        <option value="etc">etc</option>
    </optgroup>
    <optgroup label="Objet">
        <option value="Table">Table</option>
        <option value="lampe">lampe</option>
        <option value="etc">etc</option>
    </optgroup>
</select>

Soit la solution B : la même chose que la solution A mais avec :

Code :

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

data-native-menu="false"

Puis pour le javascript, quelque chose comme ça : (ici c'est pour l'exemple, et ce n'est pas le sujet du problème. ça déselection l'option si on a plus de 2 elements séléctionné sur la totalité du select)

Code :

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

1
2
3
4
5
6
7
8
9
var last_valid_selection = null;
    $('#Selector').change(function(event) {
     if ($(this).val().length > 2) {
         $(this).val(last_valid_selection);
         $('#Selector').selectmenu("refresh");
     } else {
       last_valid_selection = $(this).val();
     }
   });

Solution A :
Affichage correcte, la sélection d'un critère ne se fait pas si on dépasse 2 critères. Très bien, par contre c'est extrêmement lent. L'attente est d'au moins 1sec entre le "click" et l'affichage de la sélection (sur un iphone 5... ce n'est pas normal)

Solution B :
Affichage correcte, rapidité au TOP puisqu'on utilise l'affichage natif de l'OS (comme ceci : http://adressedequentin.files.wordpr...3893.png?w=208)
Par contre sur cette solution, on peut cocher autant de critères que l'on souhaite... Du moins pour l'affichage car si on quitte la liste déroulante et qu'on revient dessus ALORS on a bien que deux critères sélectionné.
Le problème ici est donc de décocher (ou de ne pas cocher dès le départ) le critère de trop sans à avoir à quitter la liste déroulante et a revenir pour avoir un affichage correcte.

Alors voilà, si vous avez une résolution à mon problème (à au moins une des deux solution) je suis preneur.

J'espère avoir été clair :s

Merci d'avance

[Guizmo95]

Pour ajouter une information supplémentaire :

Avec la solution A :

Code :

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

data-native-menu="true"

J'arrive à cocher mais pas à décocher un critère dynamiquement... Très étrange.
D'autant plus que la coche est affichée uniquement si le critère n'est pas affiché à l'écran : c.a.d si je coche dynamiquement un élément alors que je le vois sur l'écran, alors il ne sera pas coché. Par contre si je scroll pour le cacher puis que je scroll pour l'afficher alors le critère est bien coché :s :s

[Lorenzo77]

salut,

ceci fonctionne chez moi : http://jsfiddle.net/LorenzoFR/9rSKb/#base

[Guizmo95]

Merci pour la réponse.
Par contre le problème est situé sur le alert que tu as ajouté.
Je m'explique. J'arrive bien a afficher le alert. Par contre, c'est sur la désélection du critère de trop qui pose problème (pour la solution A).

Donc, j'ai bien le alert par contre le critère reste sélectionné.

[Lorenzo77]

ben suffit de remplacer l'alerte par un bout de code qui de-selectionne les options en trop !
http://jsfiddle.net/LorenzoFR/9rSKb/4/

[Guizmo95]

Comme je le disais un peu plus haut (pas simple d'expliqué le problème sorry) :
Pour la solution A : la dé-sélection fonctionne correctement depuis le début. Par contre, la sélection d'un critère prends environ 1 sec (ce qui est beaucoup trop long. Il doit y avoir un bug du côté du javascript de Jquery MOBILE)

Pour la solution B : La sélection d'un critère dynamiquement fonctionne (même s'il faut scroller sur la liste déroulante pour mettre à jour l'affichage : le critère doit disparaitre de l'écran pour être ré-affiché coché)
Pour la désélection : IMPOSSIBLE. Que je fasse :

Code :

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

.removeAttr("selected");

ou

Code :

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

.prop("selected", false);

Dynamiquement RIEN ne se passe. Si je ferme la liste déroulante et que je la ré-ouvre à ce moment là les "critères de trop" sont supprimés.
Même en faisant :

Code :

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

$('#Selector').selectmenu("refresh", true);

ou

Code :

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

$('#Selector').selectmenu("refresh");

ou

Code :

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

$('#Selector').trigger('create');

La mise à jour en dynamique ne se fait pas

Je rappel que cette fonctionnalité est testé sur un iphone 5 (donc liste déroulante native pour la solution B)

[Lorenzo77]

oups, la j'ai fait une connerie, c'est pas le bon lien, celui ci est le bon :
http://jsfiddle.net/LorenzoFR/9rSKb/5/
est ce que ca fonctionne sur l'iphone ?

si c'est non, alors on doit tomber sur le meme probleme qu'avec chrome, il faut enlever et remettre le bloc pour forcer l'affichage des modifications

[Guizmo95]

Merci pour la réponse.
En ajoutant juste après le while le code ci-dessous (sinon rien ne se passe sur l'iphone)

Code :

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

 $('#Selector').selectmenu("refresh", true);

Le comportement est le même. C.a.d l'affichage dynamique n'est pas fait. Par contre si on ferme et si on ré-ouvre la liste déroulante, alors les critères en trop ne sont pas sélectionné.

Comment enlever et remettre le bloc pour forcer l'affichage des modifications? Et dans ce cas, la liste déroulante ne se ferme-t-elle pas automatiquement?

(ps: pour la solution A, le temps de plus d'une seconde est dû au nombre important de critères dans la liste déroulante (environs 40), une solution alternative (et non désirée) serait de faire plusieurs petites listes déroulantes au lieu d'une grande)

[Lorenzo77]

oui, il y a des chances que ca ferme la liste !

exemple :
http://jsfiddle.net/LorenzoFR/Ny4np/

une autre piste serait de ne plus utiliser l'évenement "change" mais plutot mousedown, mouseup, mousemove -> a tester, ca eviterait de devoir scroller la liste pour faire disparaitre les options de-selectionnées

[Guizmo95]

Malheureusement, aucune des deux options ne fonctionne. J'ai toujours le même comportement

[Guizmo95]

La solution A me conviendrait pleinement mais elle reste extrêmement lente (même avec peu de critères) Et je n'ai pas l'impression qu'il y ai une solution là non plus

[Lorenzo77]

sans iphone sous la paluche, je peux pas t'en dire plus !
est ce que tu as accés a un debugger et un profiler sur l'iphone ?
si oui, tu peux essayer de trouver ou ca merdouille

[Guizmo95]

Non je n'ai pas ça sous la main. Je pense que je vais devoir malheureusement "ré-inventer la roue" et faire une page "made in Home" avec des checkbox