CODEWITHSUNDEEP
jquerymobiledrop-down-menu
user1707810
user1707810

Reputation: 123

Jquery Mobile issue with long select multiple option and data-native-menu="false"

I am using the jquery 1.9.1 js and jquery mobile 1.3.2 css and js.

I have a page with a long selectbox, 20 items. When I open the selectbox, choose some items and close it again, I end up with a blank page.

Has anyone had this problem?

With jquery mobile 1.3.1 there was the problem that the selectbox was empty when you opened it for the second time, but this is no improvement.

EDIT:

This the code on my page:

<div data-role="page" id="new_agent_edit" data-theme="d" qs="">
    <div data-role="header" data-theme="b">

        <h1>New Agent Edit</h1>
    </div>

    <div id="new_agent_editContent" data-role="content">

          <div>
            <h2 style="display:inline">Agent #Test Agent</h2><br/>
          </div>

          <div>
          <form id="frmAgentNewEdit" name="frmAgentNewEdit">

          <div data-role="fieldcontain">
              <label for="new_agent_editsubscribers" class="select">Publishes To:</label>
              <select name="subscribers" id="new_agent_editsubscribers" data-native-menu="false" multiple="multiple">
                 <option data-placeholder="true">Choose Agents...</option>
                 <option value="1">#1 SMS Message (inactive)</option>
                 <option value="2">#2 Weather Update (inactive)</option>
                 <option value="3">#3 Stock Update (active)</option>
                 <option value="4">#4 Email Notification (inactive)</option>
                 <option value="5">#5 Digest Email (inactive)</option>
                 <option value="6">#6 Word Cloud (inactive)</option>
                 <option value="7">#7 Time Series (active)</option>
                 <option value="8">#8 Google News Sentiment Analysis (active)</option>
                 <option value="9">#9 Google Nieuws (active)</option>
                 <option value="10">#10 Twitter (active)</option>
                 <option value="11">#11 Time Series (inactive)</option>
                 <option value="12">#12 Time Series (inactive)</option>
                 <option value="13">#13 twitterstream: Sentiment Analysis (active)</option>
                 <option value="14">#14 Weather (inactive)</option>
                 <option value="15">#15 Read Email (inactive)</option>
                 <option value="16">#16 Stock (inactive)</option>
                 <option value="17">#17 it-ebooks: Last Update eBooks (inactive)</option>
                 <option value="18">#18 Dilbert (inactive)</option>
                 <option value="19">#19 Marktplaats aanbiedingen (inactive)</option>  
              </select>
          </div>

          </form>
          </div>

    </div>
</div>

And here are 2 screenshots:

Open selectbox Close selectbox

Upvotes: 2

Views: 2563

Answers (3)

Azmeer
Azmeer

Reputation: 734

I solved it by moving the select list creation code to pagecreate event:

$("#page_id").on("pagecreate", function (e) {
     //select list creation code here
});

Upvotes: 0

user1707810
user1707810

Reputation: 123

Solved it myself

The popup is opened from a page which has a pagebeforeshow event. This event contains the initialisation code for the page. Every time the popup is closed this event is triggered again and thereby the initialisation code, which causes disruption.

By making the execution of the initialisation code conditional I solved the issue:

$('#edit_agent').on('pagebeforeshow', function(event, data) {

    if ( data.prevPage.attr('id') !== 'new_agent_editsubscribers-dialog') {

        // initialisation code
        ...
        ...
    }
});

Upvotes: 1

MartinOnTheNet
MartinOnTheNet

Reputation: 144

Normally the popup becomes a new page when the number items is higher than the screen height. The caller page (now previous page) is hidden after dropdown is open.

In your case, it seems that the previous page is no longer active after dropdown is closed. Try forcing the caller page to be active if possible.

Also as carter said, it would be great if you post some code.

Cheers,

Upvotes: 0

Related Questions