Блог

Главная - Вопросы по программированию - значение набора mobiscroll не работает при последующем открытии диалогового окна jQM

значение набора mobiscroll не работает при последующем открытии диалогового окна jQM

#jquery #ajax #jquery-mobile #jquery-ui-dialog #mobiscroll

#jquery #ajax #jquery-mobile #jquery-ui-dialog #mobiscroll

Вопрос:

Упрощенная версия моей проблемы находится на github.

Я использую mobiscroll 2.6.2 (поскольку это последняя бесплатная версия на github. Более поздние версии до 2.11 существуют, но имеют другую лицензию).

По сути, у меня есть индексная страница, которая ничего не делает, но содержит ссылку на страницу диалога jQM. dialog.html это страница диалога jQM с одним вводом, которую библиотека mobiscroll превращает во всплывающее окно прокрутки для выбора чисел.

Mobiscroll работает. При выборе ввода появляется всплывающее окно прокрутки. Я могу выбрать число из скроллера, и оно заполняет ввод моим выбором. Поэтому я почти уверен, что моя инициализация mobiscroll в порядке. Я повторю это здесь для упрощения обзора:

         $('#mobiInput').mobiscroll()
             .scroller({
                theme: 'ios',
                mode: 'scroller',
                display: 'bubble',
                wheels: [ // Wheel groups array
                  [ // First wheel group
                    {
                      label: 'Number', 
                      values: ['9','8','7','6','5','4','3','2','1']
                    }
                  ]
                ],
                onSelect: function(valueText, inst) {
                }
            });

Функция, которую я пытаюсь использовать, — это функция setValue mobiscroll

Я установил для него значение «2».

 var valueArray = ["2"];
$('#mobiInput').mobiscroll('setValue', valueArray, true);

Это действительно работает… в первый раз, когда я открываю страницу диалога. На входе отображается значение 2, и когда я открываю скроллер, выбирается значение 2.

Однако, когда я закрываю диалоговое окно (нажав кнопку отмены, кнопку ok или значок закрытия) и снова открываю диалоговое окно, функция setValue, похоже, не работает. Значение 2 отсутствует во входных данных. И когда я открываю скроллер, по умолчанию используется первое значение 9.

Я предполагаю, что это не ошибка в mobiscroll, а скорее мое непонимание навигации jQM ajax.

Ответ №1:

Проблема в том, что таблица стилей Mobiscroll и библиотека JS загружаются каждый раз, когда вы открываете диалоговое окно. Хотя внешний диалог удален из DOM, библиотеки, связанные с Mobiscroll, не удаляются.

  • Решение 1:

    Загрузите все библиотеки, связанные с Mobiscroll, а также код инициализации в <head> индексе / первой странице.

     <!-- index/first page -->
<head>
   <!-- Mobiscroll style sheet -->
   <!-- MobiScroll JS library -->
   <script>
      $(document).on("pagecreate", "#dialogID", function () {
         /* initialize Mobiscroll and setValue */
      });
   </script>
</head>
  • Решение 2:

    Загрузите все библиотеки, связанные с Mobiscroll, в <head> индекс / первую страницу. Для кода инициализации поместите его в div dialog. Однако вам нужно отменить привязку pagecreate и привязать его снова.

     <!-- index/first page -->
<head>
   <!-- Mobiscroll style sheet -->
   <!-- MobiScroll JS library -->
</head>

<!-- external dialog -->
<div data-role="page" id="dialogID" data-dialog="true">
   <script>
      $(document).off("pagecreate", "#dialogID").on("pagecreate", "#dialogID", function () {
         /* initialize Mobiscroll and setValue */
      });
   </script>
</div>

ДЕМОНСТРАЦИЯ

Комментарии:

1. Как всегда, ты прав, Омар! Ты как мой ангел-хранитель в мире jquery-mobile. lol

Метки: