it-roy-ru.com

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

я хочу добавить 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');

Эти enqueques генерируют этот код:

<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">Data</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.

4
Terix

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

Затем в Chrome перейдите в меню гаечного ключа -> Инструменты -> Консоль JavaScript. Здесь вы сможете напрямую набирать/выполнять свой JavaScript. Я начал бы с ввода jQuery в консоль, чтобы убедиться, что jQuery действительно загружен. Затем попробуйте выполнить jQuery('#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
}
4
v0idless

Для тех, кто отлаживает "не работающий" DatePicker - для меня это была проблема моего сброса CSS, а именно:

html, body { overflow: auto; }

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

2
Petr Cibulka

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

0
Tom Auger

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

0
bueltge