Search code examples
jquery-mobilejquery-mobile-popup

SelectMenu Widget data-native-menu attribute when in popup


When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.

When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.

However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.

Thanks


Solution

  • There's a good reason for this.

    As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.

    Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.

    If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:

    The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.

    On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.