jQueryUI 不工作(在 Prestashop 中)如何排除故障？

Question

我正在为 Prestashop 构建一个具有前台 Controller 的模块。我想使用 jQueryUI。

在我的主 php 文件中包含 JQueryUI 中的模块(扩展 Module 类)，如下所示:

    public function hookHeader()
{
    $this->context->controller->addJqueryUI('ui.core');
    $this->context->controller->addJqueryUI('ui.widget');
    $this->context->controller->addJqueryUI('ui.mouse');
    $this->context->controller->addJqueryUI('ui.slider');
}

我正在检查我的标题，我发现所有脚本都以正确的顺序包含在内。 (见图)jQuery 本身就可以正常工作。但是当我调用 jQueryUI 方法时，它说该方法未定义。

我只是想获取basic example工作，两种不同的方式，都不起作用。

$(document).ready(function(){
    $( "#date" ).datepicker();
});

这也不起作用:

$( function() {
    $( "#date" ).datepicker();
} );

它一直说$(...).datepicker不是一个函数。

看起来 jQuery 不是 included twice ，因为当我不调用任何 UI 方法时它工作正常。只是这个“迁移”的事情，但如果我重命名该文件，以便它不能被包含在内，它会抛出一大堆不同的错误(它突然发现其他函数未定义)。

此外，我已经禁用了除我的模块之外的所有模块。同样的问题。

有趣的是

window.onload = function() {
   if (typeof jQuery.ui !== 'undefined') {  
        alert("jquery ui is loaded!");
    } else {
        alert("not working");
    }
}

这表示它已加载!

可能出了什么问题？

如何解决此问题？

Answer 1

您需要做的是指定加载日期选择器。

$this->context->controller->addJqueryUI('ui.datepicker');

Prestashop 中的 jQuery UI 为每个 UI 组件提供了单独的文件。所以你需要指定要加载哪个组件。

查看文件夹/js/jquery/ui您将看到哪些组件可用。

无需指定 ui.core、ui.mouse 等(除非您特别需要它们)，因为它们是组件的依赖项，因此除非您在中添加第三个参数，否则它们会自动加载将 addJqueryUI 方法设置为 false。

每个组件的依赖关系在 Media 中定义。类。

dialog 的示例自动加载组件的依赖项:

'ui.dialog' => array('fileName' => 'jquery.ui.dialog.min.js', 'dependencies' => array('ui.core', 'ui.widget', 'ui.position','ui.button'), 'theme' => true),