jQueryUI 不工作（在 Prestashop 中）如何排除故障？

Question

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

在我的主 php 文件中包含 JQueryUI 中的模块（扩展模块类），如下所示：

    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 is not a function。

它看起来不像 jQuery 是 included twice，因为当我不调用任何 UI 方法时它工作正常。只有这个“迁移”的东西，但如果我重命名文件以使其不能被包含，它会引发一大堆不同的错误（它突然发现其他函数未定义）。

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

很有趣

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

这表示它已加载！

可能出了什么问题？

我该如何解决这个问题？

Answer 1

目前它已通过使用 Google 的托管库修复：

$this->context->controller->addCSS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
$this->context->controller->addJS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');

我有一种感觉，但一旦我再次包含其他模块，它就会崩溃。

Answer 2

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

$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),