web-dev-qa-db-ja.com

jQuery UI Datepickerが機能しない

カスタムページに日付ピッカーを追加したいのですが、うまくいきません。 WP versionは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">Data</label><input type="text" id="datepicker" name="day" class="text" /></div>

日付ピッカーは機能しません。この問題をデバッグする方法がわかりません。 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'

JavaScriptコンソールでjQuery（ '＃datepicker'）と入力すると、次のようになります。

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

それ以外のエラーはありません。jQueryへの参照はすべてうまくいくようです。

更新2：

最後に私はそれがうまくいった！私は 'init'の代わりに 'wp_print_scripts'を配置しなければなりませんでした、そして私は衝突していた別のプラグインのいくつかのinitコードを再配置しなければなりませんでした。唯一残っている問題はテーマです...私がgooglecodeの中で基本的なテーマを使うならば、それは働きます。他のテーマ（wpに埋め込まれているかwp_enqueque_styleにリンクされている）を使用している場合、テーマはロードされません。

jqueryjavascripthtmljquery-uidatepicker
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

"動作していない"日付ピッカーをデバッグする人たちのために - 私にとっては、これは私のreset css、特にこれの問題だった。

html, body { overflow: auto; }

私のデートピッカーは大丈夫でしたが、スクリーンの一番上に現れ続けました。 :)

2
Petr Cibulka

あなたの例では、jQueryは の前に配置されます 'datepicker' divが作成されます。だからそれは何もしません。 scriptブロックを 'row' divの後ろに配置するか、代わりにjQuery(document).ready()を使用してください。

0
Tom Auger

Wp_enqueue_script（）であなたのカスタムスクリプトをインクルードして他のライブラリを参照すればタイムラインに問題はありません。他のすべてのスクリプトの準備ができた後にdatepickerのlibのロードを要求するカスタムスクリプト。 WPの機能リリースでも問題なく動作します。

0
bueltge