Home/ Questions/Q 8060279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T09:56:01+00:00

I’m having an issue with trying to redirect to another page when a user

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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