CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilejquery-events
jnrbsn
jnrbsn

Reputation: 2533

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.

Upvotes: 2

Views: 2763

Answers (3)

Dmitry Stropalov
Dmitry Stropalov

Reputation: 790

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

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

Upvotes: 0

jnrbsn
jnrbsn

Reputation: 2533

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;
}

Upvotes: 3

BumbleB2na
BumbleB2na

Reputation: 10743

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 );

Upvotes: 0

Related Questions