Search code examples
jqueryjquery-uiprestashopprestashop-1.6

jQueryUI not working (in Prestashop) how to troubleshoot?

I am building a Module for Prestashop that has a Front Office Controller. I'm wanting to use jQueryUI.

In my main php file for the module (extending the Module class) in included JQueryUI like this:

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

I am checking my header, and I see all the scripts are being included in the correct order. (See image) jQuery all by itself works fine. But as soon as I'm calling a jQueryUI method, it says the method is not defined.

I'm just trying to get the basic example to work, two different ways, both don't work.

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

and this doesn't work either:

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

it keeps saying $(...).datepicker is not a function.

It doesn't look like jQuery is included twice, since it works fine when I don't call any of the UI methods. There's just this "migration" thing, but if I rename the file so it can't be included it throws a whole host of different errors (other functions it suddenly finds undefined).

Also I've already disabled all modules but mine. Same problem.

Interestingly enough

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

this says it's loaded!

What could possibly be wrong?

How do I troubeshoot this?

enter image description here

Solution

  • What you need to do is specify to load datepicker.

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

    jQuery UI in Prestashop comes with separate files for each UI component. So you need to specify which component to load.

    Have a look in folder /js/jquery/ui and you will see which components are available.

    There is no need to specify ui.core, ui.mouse etc. (unless you specifically need them only) because they are dependencies of components so they get auto loaded unless you add third parameter in addJqueryUI method to false.

    Dependencies for each component are defined in Media class.

    Example of dialog component's dependencies that are automatically loaded:

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