jQuery UI PrestaShop 后台无法使用菜单

Question

之前问过一个，还是有问题

我正在构建 PrestaShop 模块。 PS 版本 1.6.10，我想使用 jQuery UIs Menu 和 Dialog.

TLDR: 我的代码在前台工作正常。但不是在后台。根据我包含的 jQueryUI 模块的数量，我会得到不同的错误。如果我以没有错误的方式包含它，我的菜单就不会执行它们应该执行的操作。 Dialog 工作正常，但 Menu 不工作（部分工作，见图）。

我展示的内容已经完全移动到一个单独的文件中，所以我们在前台和后台看到的html代码是相同的，因为它们都引用了同一个文件。由于前台工作正常，错误不应该在我的代码中。

但是，我无法让它在后台工作，这是我尝试过的所有方法：

1.) 不包括任何 Jquery 模块 [导致控制台出错，没有任何效果]

现在我在控制台中收到错误消息：

Uncaught TypeError: $(...).dialog is not a function

Uncaught TypeError: $(...).menu is not a function

2.) 包括来自 Google 的所有 Jquery 模块 [导致控制台出错，没有任何效果]

这就是我为了让它在前台工作而做的事情。我将 google 托管 jquery UI 库添加到 hookHeader。对于后台，我在 hookBackOfficeHeader.

中粘贴相同的代码

$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');

但是我得到了这些错误：

3.) 包括来自 Pretashop 的所有 Jquery 模块 [导致控制台出错，没有任何效果]

接下来，我尝试使用以下代码包含 prestashop 附带的所有 jQuery UI 库：

    $all_plugins = scandir ( dirname(dirname(dirname(__FILE__))).'/js/jquery/ui' );
    foreach($all_plugins as $file)
    {
        if( substr( $file, 0, 10 ) === "jquery.ui.")
        {
            $comp =  explode('.',$file);
            $this->context->controller->addJqueryUI('ui.'.$comp[2]);
        }
    }

这个脚本执行得很好，但现在我得到了这些错误：

4.) 包括来自 PS，但跳过效果库 [没有错误，但 UI 仍然不起作用]

    $all_plugins = scandir ( dirname(dirname(dirname(__FILE__))).'/js/jquery/ui' );
    foreach($all_plugins as $file)
    {
        if( substr( $file, 0, 10 ) === "jquery.ui." 
        && substr( $file, 0, 17 ) !== "jquery.ui.effect-" )
        {
            $comp =  explode('.',$file);
            $this->context->controller->addJqueryUI('ui.'.$comp[2]);
        }
    }

终于，我再也没有错误了！但是现在 Menu 不行了。我的意思是它在元素样式方面起作用，并且它正确地隐藏了子菜单。但是当我将鼠标悬停在菜单上时，没有任何反应，旁边的小箭头也消失了......就像最上面的图片一样。

5.) 只包含那些Jquery绝对需要的模块 [没有错误，但 UI 仍然不起作用]

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

如果我这样做，我会得到相同的结果：控制台中不再有错误，但是悬停效果不起作用（就像上图一样）。

为什么会这样，我该如何解决？

根据要求，这是我的其余代码：

modules/mymodule/controllers/admin/AdminMyMenuController.php

class AdminMyMenuControllerextends ModuleAdminController {

            public function display()
            {
                
                $this->context->smarty->assign(array(
                        
                        'mymenu_html_code' => $this->getMenuHtmlCode(),
                        
                    ));
                parent::display();
            }


            public function getMenuHtmlCode($vars)
            {
                return
                    '<ul>
                    
                        <li>
                        <div><small>'.$var0.'</small></div>
                            <ul>
                                <li class="ui-widget-header">Test Menu:</li>
                                <li class="ui-state-disabled"><div><b>'.$var1.'</b></div></li>
                                <li class="ui-state-disabled">'.$var2.'</li>
                                <li class="ui-state-disabled">'.$var3.'</li>
                                <li><div>
                                '.$var4.'
                                <i class="icon-pencil"></i> edit</div></li>
                                
                                <li><div><i class="icon-trash"></i> delete</div>
                                    <ul>
                                        <li class="ui-state-disabled">Sure?</li>
                                        <li>
                                            <form method="POST">
                                                <input type="hidden" name="id_menu" value="'.$id.'">
                                                <input type="hidden" name="delete" value="delete">
                                                <div id="delete_menu" onclick="$(this).parent().submit();"><i class="icon-check"></i> Yes!</div>
                                            </form>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>'; 
            }

modules/mymodule/js/back.js

$(document).ready(function(){
    $( "td.mymenu ul" ).menu();
});

Answer 1

jQuery UI 库也已包含在 PrestaShop 前端和后台中。您可以在 PrestaShop 安装中检查以下路径中的文件：

/js/jquery/ui

您可以检查页面的来源，您添加的文件可能已经包含在内。如果它们不存在，那么您可以包括它们。

Answer 2

只使用必需的组件是可行的方法（#5），而且您可能不想在每个后台页面上加载组件而只在您的控制器中加载组件，因此将代码从 displayBackOfficeHeader 挂钩移至您的控制器的 setMedia() 方法。

public function setMedia()
{
    parent::setMedia();
    $this->addJqueryUI('ui.dialog');
    $this->addJqueryUI('ui.menu');
}

您必须在 <li> 菜单项上使用 ui-menu-item class 才能使悬停功能正常工作。

public function getMenuHtmlCode($vars)
{
    return '<ul>
                <li class="ui-menu-item">
                    <div><small>'.$var0.'</small></div>
                        <ul>
                        ...';
}

我还要再说一遍，Prestashop 中有 MVC 是有原因的。不要在控制器或模型中生成 HTML。你有模板是有原因的。

jQuery UI PrestaShop 后台无法使用菜单

jQuery UI Menu not working in PrestaShop back office

javascript

jquery

jquery-ui

prestashop

prestashop-1.6