Redirect on change of large select menu in jQuery Mobile

问题

I'm having an issue with trying to redirect to another page when a user selects an option from a <select> menu in jQuery Mobile.

Below is a very small example similar to what I'm trying to do that demonstrates the issue I'm having. The problem is that when the list of options is too big to fit on the screen, the redirect does not work. It works fine when the options fit on the screen. (You can reproduce this in a desktop browser by making your window really small.)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <script>
    $(function () {
      $('#mySelect').bind('change', function () {
        // The actual logic for building the URL is more complicated, obviously.
        // This is just an example.
        var url = 'jquery-mobile-test.html?param=' + this.value;
        location.href = url;
      });
    });
  </script>
</head>
<body>
  <div data-role="page" class="type-home">
    <div data-role="content">
      <div data-role="fieldcontain">
        <select data-native-menu="false" name="param" id="mySelect">
          <option>Select an Option...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
          <option value="7">Seven</option>
          <option value="8">Eight</option>
          <option value="9">Nine</option>
          <option value="10">Ten</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>

Some background from the jQuery Mobile Docs:

When the select has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition. [...] When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard list view for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.

When it creates the new "page", it adds #&ui-state=dialog to the end of the URL, and then when select an option, it changes the URL back. I think this is what is interfering with the redirect that I'm trying to do.

Any suggestions on the best way to fix this?

Edit #1: I should have mentioned that I'm unable to use $.mobile.changePage() because the page to which I'm redirecting does some weird redirecting of it's own that's messing up the transitions. I'm sorry that this was not represented in the example.

Edit #2: I pasted my code above (instead of using a gist) so that people can find this question easier via search.

回答1:

I figured it out so I'm answering my own question.

Here's the code that fixed it for me:

var url = 'redirect-to-this-page.html',
    $dialog = $('div.ui-page.ui-dialog.ui-page-active');

if ($dialog.length > 0) {
    $dialog.bind('pagebeforehide', function () {
        location.href = url;
    });
} else {
    location.href = url;
}

回答2:

Might as well let jQuery Mobile finish its little magic show by replacing your location.href redirect with jQuery Mobile's implementation:

  $.mobile.changePage( 'jquery-mobile-test.html?param=' + this.value );

回答3:

This is a dirty fix, but you can surround window.location with the setTimeout function:

setTimeout(function() {
   window.location.href = '/some-url.html';
}, 0);

来源：https://stackoverflow.com/questions/10920495/redirect-on-change-of-large-select-menu-in-jquery-mobile

标签

javascript

jquery

html

jquery-mobile

jquery-events