jQuery UI Datepicker не работает

Question

jQuery UI Datepicker не работает

30 окт. 2011 г., 23:09:17

Просмотры: 64.5K

Голосов: 4

Я хочу добавить datepicker на пользовательскую страницу, но он не работает. Версия WP 3.2.1. Вот строки инициализации, которые я использовал в коде WP:

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', get_bloginfo('template_url') . '/js/jquery-ui-datepicker.min.js', array('jquery','jquery-ui-core'));
wp_enqueue_style('jquery.ui.theme', get_bloginfo('template_url') . '/js/smoothness/jquery-ui-1.8.16.custom.css');

Эти подключения генерируют следующий код:

<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-includes/js/jquery/ui.core.js?ver=1.8.12'></script>
<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/jquery-ui-datepicker.min.js?ver=3.2.1'></script>
<link rel='stylesheet' id='jquery.ui.theme-css'  href='http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/smoothness/jquery-ui-1.8.16.custom.css?ver=3.2.1' type='text/css' media='all' />

В теле страницы я использую этот код:

<script type="text/javascript">
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
</script>
<div class="row"><label for="day">Дата</label><input type="text" id="datepicker" name="day" class="text" /></div>

Datepicker не работает. Я не знаю, как отладить эту проблему. Он не делает ничего, как будто jQuery вообще отсутствует.

ОБНОВЛЕНИЕ:

С вашей помощью мне удалось отладить код. Я разместил скрипт после div и изменил его на:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

Этот код выдает ошибку при вызове метода datepicker, ошибка гласит:

Uncaught TypeError: Object [object Object] has no method 'datepicker'

Если я ввожу jQuery('#datepicker') в консоли JavaScript, я получаю:

[<input type="text" id="datepicker" name="day" class="text">]

Я не получаю никаких других ошибок, кроме этой, все ссылки на jQuery, похоже, работают нормально.

ОБНОВЛЕНИЕ 2:

Наконец-то заработало! Мне пришлось использовать 'wp_print_scripts' вместо 'init', и пришлось переместить некоторый код инициализации другого плагина, который конфликтовал. Единственная оставшаяся проблема - это темы... если я использую базовую тему из googlecode, все работает. Если я использую другие темы (встроенные в wp или подключенные через wp_enqueque_style), тема не загружается... если проверить сгенерированный html, там нет строки, которая должна загружать тему jQuery.

Terix

173

jquery javascript html jquery ui выбор даты

Комментарии

Это выглядит корректно на уровне WP (правильные вызовы enqueue, вывод, не сокращенный вызов jQuery), поэтому, вероятно, не специфично для WordPress. Нужны ли дополнительные детали, связанные с WP? В противном случае лучше задать вопрос на StackOverflow.

Rarst

30 окт. 2011 г. 23:22:10

Если ваша "пользовательская страница" является страницей администратора, то вам нужно подключать скрипты немного иначе. См.: http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Tom Auger

31 окт. 2011 г. 00:24:34

Какие еще детали WP вам нужны? Спросите, и я отвечу. Страница не относится к админке. Это просто страница WP, созданная с использованием специального шаблона страницы, который содержит используемый мной код.

Terix

31 окт. 2011 г. 09:16:57

Также, просто потому что enqueue добавил необходимые теги SCRIPT или STYLE в ваш head, это не обязательно означает, что они действительно загрузились (URL-адреса могут быть неверными — со мной такое случалось десятки раз!). Снова используйте Firebug или Google Chrome и проверьте сетевую статистику — если вы видите красные ошибки 404, это означает, что скрипт или CSS-файл не найден по указанному адресу.

Tom Auger

31 окт. 2011 г. 14:58:37

скрипты и стили все найдены, единственная ошибка появляется гораздо ниже, при вызове метода datepicker()

Terix

31 окт. 2011 г. 22:57:15

Показать остальные 1 комментариев

Все ответы на вопрос

Комментарии

Я последовал вашим советам и сделал несколько шагов: теперь у меня есть ошибка, которая останавливает работу моего кода. Она говорит: Uncaught TypeError: Object [object Object] has no method 'datepicker' на строке jQuery('#datepicker').datepicker

Terix

31 окт. 2011 г. 22:33:05

Если это так, значит скрипт datepicker не подключен правильно или это неправильный скрипт. Я обновлю свой пост с рабочим кодом.

v0idless

31 окт. 2011 г. 23:14:13

Это сводит меня с ума... у меня все та же ошибка! Я изменил код согласно вашим рекомендациям, когда я пишу jQuery('#datepicker'), я получаю div как и раньше, но все равно получаю ту же самую ошибку! Я тестировал с пустым HTML-файлом, помещая туда HTML-вывод wp_enqueues, и с этой тестовой страницей все работает, так что есть что-то внутри WordPress, что ломает datepicker(), но я понятия не имею, как это исправить...

Terix

1 нояб. 2011 г. 09:34:20

Затем я бы порекомендовал установить вашу тему на twentyeleven и отключить все остальные плагины. Включайте их по одному, пока не найдете тот, из-за которого перестает работать datepicker.

v0idless

1 нояб. 2011 г. 14:32:08

Наконец-то у меня получилось! Мне пришлось использовать 'wp_print_scripts' вместо 'init', а также переставить код инициализации другого плагина, который вызывал конфликт. Единственная оставшаяся проблема - это темы... если я использую базовую тему из googlecode, все работает. Если я использую другие темы (встроенные или подключенные через wp_enqueque_style), тема не загружается.

Terix

2 нояб. 2011 г. 09:20:47

Для тех, кто отлаживает "неработающий" datepicker - у меня была проблема с моим reset css, а именно с этим:

html, body { overflow: auto; }

Мой datepicker был в порядке, но продолжал появляться в самом верху экрана. :)

Petr Cibulka

426

27 апр. 2013 г. 21:47:52

В вашем примере jQuery расположен перед созданием div с 'datepicker'. Поэтому он ничего не сделает. Либо поместите блок script после div с 'row', либо используйте jQuery(document).ready().

Tom Auger

7.1K

31 окт. 2011 г. 00:27:17

Комментарии

Я поместил скрипт после '<div>', но ничего не изменилось. Я создал тестовую страницу, простой html, только с html-кодом, сгенерированным из wp страницы, но это всё равно не работает. Как я могу отладить это?

Terix

31 окт. 2011 г. 09:22:08

Убедитесь, что у вас установлен Firebug, Google Chrome, или используйте Explorer с включёнными Инструментами разработчика (F12). Вам нужно проверить консоль ошибок и найти ошибки JavaScript. Можете разместить ссылку, и мы посмотрим.

Tom Auger

31 окт. 2011 г. 14:56:32

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

bueltge

17.1K

31 окт. 2011 г. 03:08:16

Комментарии

вы имеете в виду поместить код jquery в js-файл и затем его вызвать?

Terix

31 окт. 2011 г. 09:23:20

@bueltge это решило бы проблему только если Terix вызывал бы его так: wp_enqueue_script( 'do-date', 'http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/do_date.js' , array('jquery-ui-datepicker'), 1, true ) - последний параметр 'true' важен, чтобы скрипт помещался в подвал, то есть после создания div. Я всё же предпочитаю использовать document.ready(), независимо от этого.

Tom Auger

31 окт. 2011 г. 15:01:53

v0idless 802 · Accepted Answer · 2011-10-31T17:11:38Z

Я часто допускаю ошибки при наборе. Поэтому я бы начал отладку с копирования и вставки ссылок на JS-скрипты в браузере, чтобы убедиться, что они загружаются.

Затем в Chrome перейдите в меню Гаечный ключ -> Инструменты -> Консоль JavaScript. Здесь вы сможете напрямую вводить/выполнять JavaScript-код. Я бы начал с ввода jQuery в консоль, чтобы убедиться, что jQuery действительно загружен. Затем попробуйте выполнить jQuery('#datepicker') - если возвращаются пустые скобки [], значит, ваш селектор не срабатывает. Если сработает, попробуйте открыть datepicker - скорее всего, вы увидите ошибку в JS-консоли.

Как уже отмечали другие, я думаю, проблема в том, что скрипт выполняется до фактической отрисовки элемента. Я бы предложил сделать следующее:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

Это заставит скрипт выполняться после полной загрузки страницы.

== ПРИМЕР ==

add_action( 'init', 'wp29r01_date_picker' );
function wp29r01_date_picker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
}

add_action( 'wp_footer', 'wp29r01_print_scripts');
function wp29r01_print_scripts() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
</script>
    <?php
}