Question

I have a mobile page, that opens a dialog.

In the dialog, there is a multiselect menu.

Everything works fine, like

1. I click the button for mulitselect menu in dialog to open the menu,
2. I select the items from mulitselect
3. close multiselect menu
4. and I close the dialog.

Now, when I add data-native-menu="false" to the multiselect menu, the dialog behavior changes, like

1. I click the button for mulitselect menu in dialog to open the menu,
2. I select the items from mulitselect
3. close multiselect menu
4. and I close the dialog.
5. Dialog is closed and I see the previous page. Otherwords, I have navigated one page back in history

What is the solution for this?

Code

This opens the first dialog

<a href="#refine-search" data-rel="dialog" data-role="button" data-theme="a" data-inline="true">Refine</a>

Code for mulitselect menu

<div class="ui-block-b">
                    <select name="select-choice-1" id="select-choice-1" multiple="multiple" data-theme="b" data-native-menu="false">
                      <option>Select</option>
                      <?php foreach($cuisines as $cuisine): ?>
                        <?php echo "<option value='{$cuisine->cuisine_id}'>{$cuisine->cuisine_name}</option>" ;?>
                      <?php endforeach; ?>
                   </select>
                </div>

Associated js

 jQuery('#refinement-done').on('click', function() {  
        console.log('refinement done');
        var options = '<?php echo $search_options; ?>&',
            min_delivery_amt,                 
            is_pure_veg,
            is_open,              
            min_rating,                       
            cuisines;
        min_delivery_amt = $('input[name="min"]').val();
        if(min_delivery_amt && !parseInt(min_delivery_amt, 10)) {
            alert('Min. Delivery Amount must be a number');
            return false;                                                           
        }                               
        jQuery('.ui-dialog').dialog('close');                                       
        if(jQuery('input[name="min"]').val())                                       
            options += 'minprice=' + jQuery('input[name="min"]').val() + '&';

        if(jQuery('#select-choice-1').val())
            options += "cuisine=" + jQuery('#select-choice-1').val().join(',') + '&';            

        options += 'pureveg=' + jQuery('#is_pure_veg').val() + '&';
        if(jQuery('#rating').raty('score')) {
            options += 'minrating=' + jQuery('#rating').raty('score') + '&maxrating=5';          
        }
        console.log('search data');
        console.log(options);
        JE.search_restaurants(options, "<?php echo $service_type; ?>");
    });

Answer 1

This is supposedly a known issue with jQM 1.2. It appears to be caused by a changeHash: false option being set on changePage calls.

However, it doesn’t look like you’re setting this option anywhere, and the default value is true. I’m actually having the same issue as you in a project I’m working on right now, I’ll let you know if I manage to pinpoint the cause. For the moment, I just reverted to an earlier version of jQM (not the ideal solution, I know).

Edit:

JQuery Mobile 1.2 Beta was released today, so I started digging into this issue again to see if it was resolved. It’s not. I did, however manage to narrow down the issue a bit, as shown in this jsfiddle. If I remove the line $.mobile.changePage.defaults.reloadPage = true; then everything works fine. Unfortunately, for my app I need this to be set to true to prevent page caching.