JQuery UI数据选取器不工作

时间:2011-10-30 作者:Terix

我想在自定义页面上添加日期选择器,但我无法工作。WP版本为3.2.1。这些是我在wp代码上使用的init字符串:

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根本不存在一样。

UPDATE:

在你的帮助下,我成功地调试了代码。我将脚本放在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的引用似乎都很好。

UPDATE 2:

我终于成功了!我必须放置“wp\\u print\\u scripts”而不是“init”,并且必须重新定位另一个冲突插件的一些init代码。唯一剩下的问题是主题。。。如果我在googlecode中使用基本主题,它就会起作用。如果我使用其他主题(嵌入wp或与wp\\u enqueque\\u样式链接),则不会加载主题。。。。如果我检查生成的html,没有迹象表明应该加载jQuery主题的行。

4 个回复
最合适的回答,由SO网友:v0idless 整理而成

我经常把东西打错。因此,我将开始调试您在浏览器中复制和粘贴指向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
}

SO网友:Petr Cibulka

对于那些调试“不工作”日期选择器的人来说,这是我重置css的问题,特别是:

html, body { overflow: auto; }
我的日期选择器还可以,但一直出现在屏幕的最上方。:)

SO网友:Tom Auger

在您的示例中,放置jQuerybefore “日期选择器”div 已创建。所以它什么都不会做。或者将script “行”后的块div, 或使用jQuery(document).ready() 相反

SO网友:bueltge

还可以通过wp\\u enqueue\\u script()包含自定义脚本,并引用其他LIB,这样时间线就没有问题了;您的自定义脚本在所有其他脚本就绪后要求加载日期选择器的libs;工作良好,也适用于WP的功能版本。

结束