CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Peter Peng
Peter Peng

Reputation: 1958

JQuery Mobile Multiple Select Menu (Native & Custom) issue

I have a jQuery-mobile application which retrieves data from a server on beforepageshow event and then create UI elements base on the data retrieved.

Now among those dynamically created UI elements, there is a multiple-select menu. I have tried both the native select menu and the custom select menu. It seams that they both have bit of issues.

First, the native select menu approach (view it on the mobile device):

https://jsfiddle.net/pengyanb/kb8ad014/7/

The issue is that each time when user click on one item in the select menu, the menu automatically hide itself. User has to open the menu again to make more selection. 

$(document).on("pagebeforeshow", "#page1", function(){
   console.log("pagebeforeshow");
   $('#page1UiContent').empty();
   $('#page1UiContent').append('<select id="dynamicSelect" multiple="multiple" data-theme="b">'+
            '<option value="1" selected>option 1</option>'+
            '<option value="2" selected>option 2</option>'+
            '<option value="3">option 3</option>'+
            '<option value="4">option 4</option>'+
            '<option value="5" selected>option 5</option>'+
            '<option value="6" selected>option 6</option>'+
            '<option value="7">option 7</option>'+
            '<option value="8">option 8</option>'+
            '<option value="9">option 9</option>'+
            '<option value="10">option 10</option>'+
            '<option value="11">option 11</option>'+
            '<option value="12">option 12</option>'+
        '</select>'); 
    $('#dynamicSelect').selectmenu().trigger('create');
});
<div data-role="page" data-theme="a" id="page1">
    <div data-role="header" data-position="fixed">
        <h5>Native Multi-Select Menu</h5>
    </div>
    <div data-role="main" class="ui-content" id="page1UiContent">
    </div>
</div>

Secondly, I tested the custom select menu approach:

https://jsfiddle.net/pengyanb/9q6ows90/2/

This time the issue is that when the long-list "popup select menu" close, it will cause the original page to reload, a "pagebeforeshow" event is triggered and everything will be re-created. Thus, user's modifications on the selectmenu will be lost. 

$(document).on("pagebeforeshow", "#page1", function(){
   console.log("pagebeforeshow");
   $('#page1UiContent').empty();
   $('#page1UiContent').append('<select id="dynamicSelect" data-native-menu="false" multiple="multiple" data-theme="b">'+
            '<option value="1" selected>option 1</option>'+
            '<option value="2" selected>option 2</option>'+
            '<option value="3">option 3</option>'+
            '<option value="4">option 4</option>'+
            '<option value="5" selected>option 5</option>'+
            '<option value="6" selected>option 6</option>'+
            '<option value="7">option 7</option>'+
            '<option value="8">option 8</option>'+
            '<option value="9">option 9</option>'+
            '<option value="10">option 10</option>'+
            '<option value="11">option 11</option>'+
            '<option value="12">option 12</option>'+
        '</select>'); 
    $('#dynamicSelect').selectmenu().trigger('create');
});
<div data-role="page" data-theme="a" id="page1">
    <div data-role="header" data-position="fixed">
        <h5>Custom Multi-Select Menu</h5>
    </div>
    <div data-role="main" class="ui-content" id="page1UiContent">
    </div>
</div>

Anyone has a solution on these issues, thanks in advance.

Upvotes: 0

Views: 1473

Answers (1)

ezanker
ezanker

Reputation: 24738

Instead of pagebeforeshow, use the pagecontainer widget's beforeshow event:

http://api.jquerymobile.com/pagecontainer/#event-beforeshow

For long lists jQM creates a dialog instead of a popup which is actually a new page. It therefore triggers page events when it is opened and closed. The dialog is given an id of the select + '-dialog'; so in the pagecontainer event you can create the dynamic select when the toPage is page1 and the prevPage is not the dialog:

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    if (ui.toPage.prop("id") == "page1" && ui.prevPage.prop("id") != "dynamicSelect-dialog") {
       $('#page1UiContent').empty().append('<select id="dynamicSelect" data-native-menu="false" multiple="multiple" data-theme="b">'+
                '<option value="1" selected>option 1</option>'+
                '<option value="2" selected>option 2</option>'+
                '<option value="3">option 3</option>'+
                '<option value="4">option 4</option>'+
                '<option value="5" selected>option 5</option>'+
                '<option value="6" selected>option 6</option>'+
                '<option value="7">option 7</option>'+
                '<option value="8">option 8</option>'+
                '<option value="9">option 9</option>'+
                '<option value="10">option 10</option>'+
                '<option value="11">option 11</option>'+
                '<option value="12">option 12</option>'+
            '</select>'); 
        $('#dynamicSelect').selectmenu();
    }
});

Updated FIDDLE

Upvotes: 1

Related Questions