jQueryUI无法正常工作（在Prestashop中）如何进行故障排除？

Question

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

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

    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方法时，它工作正常。只有这个＆＃34;迁移＆＃34;但是，如果我重命名该文件以使其无法被包含，则会抛出大量不同的错误（突然发现其他函数未定义）。

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

有趣的是

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

这说它已经装好了！

可能出现什么问题？

我如何解决这个问题？

Answer 1

您需要做的是指定加载datepicker。

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

Prestashop中的jQuery UI为每个UI组件提供了单独的文件。因此，您需要指定要加载的组件。

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

没有必要指定ui.core, ui.mouse等（除非您特别需要它们），因为它们是组件的依赖项，因此它们会自动加载，除非您在addJqueryUI方法中添加第三个参数到{{ 1}}。

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

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

false

Answer 2

现在通过使用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');

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