Перенаправление при изменении большого меню выбора в jQuery Mobile

У меня возникла проблема с попыткой перенаправить на другую страницу, когда пользователь выбирает параметр в меню <select> в jQuery Mobile .

Ниже приведен очень небольшой пример, похожий на то, что я пытаюсь сделать, который демонстрирует проблему, с которой я столкнулся. Проблема в том, что когда список опций слишком велик и не помещается на экране, перенаправление не работает. Он отлично работает, когда параметры умещаются на экране. (Вы можете воспроизвести это в настольном браузере, сделав окно очень маленьким.)

<!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>

Немного истории из документов jQuery Mobile:

Когда select имеет небольшое количество опций, которые поместятся на экране устройства, меню будет отображаться в виде небольшого наложения с всплывающим переходом. [...] Когда на экране устройства отображается слишком много параметров, платформа автоматически создает новую «страницу», заполненную стандартным представление списка для параметров. Это позволяет нам использовать встроенную прокрутку устройства для перемещения по длинному списку. Текст внутри этикетки используется в качестве заголовка для этой страницы.

Когда он создает новую «страницу», он добавляет #&ui-state=dialog в конец URL-адреса, а затем при выборе параметра изменяет URL-адрес обратно. Я думаю, что это мешает перенаправлению, которое я пытаюсь сделать.

Любые предложения о том, как лучше всего это исправить?

Правка №1: я должен был упомянуть, что я не могу использовать $.mobile.changePage(), потому что страница, на которую я перенаправляюсь, сама делает какое-то странное перенаправление, которое искажает переходы. Мне жаль, что это не было представлено в примере.

Правка №2: я вставил свой код выше (вместо того, чтобы использовать суть), чтобы людям было легче найти этот вопрос с помощью поиска.


javascript html jquery jquery-mobile jquery-events
person jnrbsn    schedule 06.06.2012    source источник
comment
Мне пришлось перенести это на jsfiddle.net, чтобы проверить ваш код. Я что-то упустил или можно проверить это в вашей сути?   -  person BumbleB2na    schedule 06.06.2012
comment
Вы можете просто загрузить html-файл и протестировать его локально на своем компьютере.   -  person jnrbsn    schedule 06.06.2012
comment
Я решил не ставить его на jsfiddle, потому что он будет внутри iframe и будет сложнее объяснить, как воспроизвести проблему.   -  person jnrbsn    schedule 07.06.2012

Ответы (3)


arrow_upward
3
arrow_downward

Я понял это, поэтому я отвечаю на свой вопрос.

Вот код, который исправил это для меня:

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;
}
person jnrbsn    schedule 06.06.2012
comment
У меня такая проблема не только со списком полноэкранных опций, но и со всплывающими опциями. Это исправление будет работать только для полноэкранного режима. Для всплывающего окна должен быть другой обработчик событий (и селектор) — я использовал mouseleave. - person Dmitry Stropalov; 26.12.2013

arrow_upward
0
arrow_downward

С таким же успехом можно позволить jQuery Mobile закончить свое маленькое волшебное шоу, заменив перенаправление location.href реализацией jQuery Mobile:

  $.mobile.changePage( 'jquery-mobile-test.html?param=' + this.value );
person BumbleB2na    schedule 06.06.2012
comment
См. Изменить в моем вопросе. - person jnrbsn; 07.06.2012
comment
Это нормально. Интересное использование события pagebeforehide, которое мне придется запомнить. - person BumbleB2na; 07.06.2012
comment
Между прочим, $.mobile.changePage() не работает последовательно даже в моем базовом примере выше. - person jnrbsn; 07.06.2012

arrow_upward
0
arrow_downward

Это грязное исправление, но вы можете окружить window.location функцией setTimeout:

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