JQuery Mobile и загрузка дополнительных скриптов убивают меня. Я просмотрел их документацию и понимаю, что их модель AJAX вызывает некоторую сложность, я получил некоторую помощь отсюда, чтобы применить информацию, но я все еще не могу заставить все работать согласованно. Вот пример:

У меня есть страница с двумя полями формы, одно для даты и одно для времени. Я вызываю jQuery UI Datepicker в поле даты и сторонний Timepicker в поле времени ( этот timepicker ). Если я обращаюсь к странице напрямую или выполняю обновление, оба работают нормально. Но если я перейду на страницу из другого места, запустится только datepicker. Они оба связаны в заголовке моего документа и оба вызываются на странице с помощью pageinit. Почему один работает, а другой нет?

Голова:

<!DOCTYPE html>
<!--[if IE 8]>               <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <title>Test Site</title>

    <!-- Make it Mobile friendly -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="_css/normalize.css" />
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
    <link rel="stylesheet" href="_css/red_variant/red_variant.css" />
    <link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="_css/foundation.css" />
    <link rel="stylesheet" href="_css/main.css" />

    <!-- jQuery Including UI and Mobile -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.js" type="text/javascript"></script>

</head>

Рассматриваемая форма:

<form>
    <label for="addAgendaDate" class="ui-hidden-accessible">Date:</label>
<input name="addAgendaDate" id="addAgendaDate" placeholder="Date" value="" type="text">
    <label for="addAgendaTime" class="ui-hidden-accessible">Time:</label>
<input name="addAgendaTime" id="addAgendaTime" placeholder="Time" value="" type="text">
</form>

<script>
        $(document).on('pageinit', function(){       
            $( "#addAgendaTime" ).timepicker({
                showPeriod: true,
                showLeadingZero: true
            });
        });

        $(document).on('pageinit', function(){       
            $( "#addAgendaDate" ).datepicker();
        });
</script>

Что мне не хватает, что заставляет оба работать при нормальной загрузке страницы, но только один работает при загрузке jQuery Mobile AJAX?


Решено! На это потребовался месяц, но я, наконец, осмыслил это. Гайотрес и Кевин Б. помогли мне понять основные проблемы использования скрипта, но каждая из моих проблем скрипта в конечном итоге имела разные дополнительные проблемы:

  • Несоответствие выбора даты и времени, приведенное ниже, на самом деле связано с Проблема CSS с z-index. Средство выбора времени было появлялось и работало нормально по сценарию, но по какой-то причине jQueryUI устанавливал свой z-индекс встроенный в ноль, что помещает его за наложением мобильной страницы. CSS переопределение (нужно было сделать! важно) исправлено.
  • Была проблема с обратным отсчетом jQuery, которая была проблемой с дублированием идентификатора, так как у меня был PHP, включающий вытягивание одного и того же нижнего колонтитула на каждую страницу. Изменен на класс для разрешения.
0
Chaz 7 Май 2013 в 22:01
Поскольку идентификаторы должны быть уникальными, а в JQM страницы не удаляются из DOM при переходе к следующей странице, что приводит к конфликту идентификаторов на обеих страницах.
 – 
Kevin B
7 Май 2013 в 22:05
B Идентификаторы уникальны для всего сайта.
 – 
Chaz
7 Май 2013 в 22:27

1 ответ

Лучший ответ

Как jQuery Mobile обрабатывает изменения страницы

Чтобы понять эту ситуацию, вам нужно понять, как работает jQuery Mobile. Он использует AJAX для загрузки других страниц.

Первая страница загружается нормально. Его HEAD и BODY загружаются в DOM , и они ждут другого содержимого. Когда загружается вторая страница, только ее ТЕЛО содержимое загружается в DOM .

Вот почему ваша кнопка отображается успешно, но событие нажатия не работает. То же событие щелчка, родительский элемент HEAD которого не учитывался при переходе страницы.

Если вы хотите узнать больше, прочтите мою другую статью: Почему я должен поместить весь скрипт в index.html в jquery mobile

Вот официальная документация: http://jquerymobile.com/demos /1.2.0/docs/pages/page-links.html

К сожалению, вы не найдете этого в своей документации. Эфир они думают, что это общеизвестно, или они забыли описать это как мои другие темы. (jQuery Mobile документация большая, но многого не хватает).

Решение 1

На своей второй странице и на каждой другой странице переместите свой тег SCRIPT в содержимое BODY, например:

<body>
    <script>
        // Your javascript will go here
    </script>
    // And rest of your HTML content
</body>

Это быстрое решение, но все еще ужасное.

Решение 2

Переместите весь свой javascript в исходный первый HTML. Соберите все и поместите в один файл js в HEAD. Инициализируйте его после загрузки jQuery Mobile.

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

В конце я опишу, почему это часть хорошего решения.

Решение 3

Используйте rel = "external" в своих кнопках и во всех элементах, которые вы используете для изменения страницы. Из-за этого ajax нужно использовать для загрузки страниц, и ваше приложение jQuery Mobile будет вести себя как обычное веб-приложение. К сожалению, в вашем случае это не лучшее решение. Phonegap никогда не должен работать как обычное веб-приложение.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Официальная документация, найдите главу: Связывание без Ajax

Реалистичное решение

Реалистичное решение будет использовать решение 2 . Но в отличие от решения 2, я бы использовал тот же файл index.js и инициализировал его внутри HEAD каждой возможной другой страницы.

Теперь вы можете спросить меня ПОЧЕМУ ?

Телефонный промежуток, такой как jQuery Mobile, содержит ошибки, и рано или поздно произойдет ошибка, и ваше приложение выйдет из строя (включая загруженный DOM), если каждый ваш контент js находится внутри одного файла HTML. DOM можно стереть, и Phonegap обновит вашу текущую страницу. Если на этой странице нет javascript, она не будет работать, пока не будет перезапущена.

5
Community 20 Июн 2020 в 12:12
Спасибо, извините за задержку с ответом. Я все еще не могу заставить скрипты вести себя последовательно. Я перепробовал все 3 варианта - у меня уже были загружены скрипты в теле для исходной проблемы. Переход к файлу, связанному в голове, по-прежнему не решен, и отключение AJAX не вызывает затруднений. Я не понимаю, что делаю не так.
 – 
Chaz
17 Май 2013 в 19:47
Если это не проблема, напишите мне свой проект, и я исправлю его за вас. Обычно это что-то простое, и вам нужна вторая пара глаз, чтобы найти проблему. Моя почта: dragan.gaic@gmail.com
 – 
Gajotres
17 Май 2013 в 19:53
Я ценю предложение, к сожалению, это рабочий проект, и я не могу его отправить. Я немного продвинулся в работе над одним из скриптов, с которым у меня возникли проблемы (в данном случае ckeditor), переместив его только на несколько конкретных страниц - но он все еще несовместим с другими. Я только что разместил еще один связанный с этим вопрос специально по сценарию обратного отсчета jQuery: stackoverflow.com/questions/16614659/…
 – 
Chaz
17 Май 2013 в 21:20