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

Question

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

在我的模块主 php 文件中（扩展模块 class）包含在 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');
}

我正在检查我的 header，我发现所有脚本都以正确的顺序包含在内。（见图）jQuery 本身就可以正常工作。但是一旦我调用 jQueryUI 方法，它就会说该方法未定义。

我只是想让 basic example 工作，有两种不同的方法，但都不起作用。

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

这也不起作用：

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

它一直在说$(...).datepicker is not a function。

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

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

够有趣

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 class.

中定义

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

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

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

jQueryUI not working (in Prestashop) how to troubleshoot?

jquery

jquery-ui

prestashop

prestashop-1.6