jQuery UI Menu not working in PrestaShop back office

[george65]

I have asked a related question before, but I still have problems.

I am building a PrestaShop module. PS Version 1.6.10 and I want to use jQuery UIs Menu and Dialog.

TLDR: My code is working fine in front office. But not in back office. Depending on how many jQueryUI modules I include, I get different errors. If I include it in a way where there are no errors, my menus don't do what they're supposed to. Dialog works fine, but Menu doesn't (It partially works, see image).

The content I display has been completely moved into a separate file, so the html code that we see in front and back office are identical, because they both reference the same file. Since the front office works perfectly fine, the error should not be within my code.

However, I can't get it to work in back office, here's everything I've tried:

1.) Not including any Jquery Modules [results in errors in the console and nothing works]

Now I get errors in the console:

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

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

2.) Including all Jquery Modules from Google [results in errors in the console and nothing works]

This is what I do to make it work in front office. I add the google hosted jquery UI library to hookHeader. For back office I am pasting the same code in 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');

But I get these errors:

3.) Including all Jquery Modules from Pretashop [results in errors in the console and nothing works]

Next I try to include ALL the jQuery UI libraries that come with prestashop, using this code:

$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]);
        }
    }   

This script executes just fine, but now I get these errors:

4.) Including from PS, but skipping the effect libraries [results in NO errors but the UI still doesn't work]

$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]);
        }
    }   

 

Finally, I get no more errors! But now Menu won't work. I mean it works in terms of styling the element, and it's correctly hiding the sub menus. But when I hover over the menu nothing happens and the little arrow to the side is also gone... Just like in the picture at the very top.

5.) Only including those Jquery Modules that are absolutely needed [results in NO errors but the UI still doesn't work]

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

If I do this, I get the same result: No more errors in the console, but the hover effect doesn't work (just like in the picture above).

Why is this happening, and how can I fix it?

as requested, here's the rest of my code:

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();
});

 

 

 

 

 

 

Edited December 28, 2021 by george65 (see edit history)