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, включающий вытягивание одного и того же нижнего колонтитула на каждую страницу. Изменен на класс для разрешения.
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, она не будет работать, пока не будет перезапущена.
Похожие вопросы
Связанные вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.