jQuery.sortable not working in PS 1.5.4.x

[endriudb]

Hi all!

I've realized a module for Prestashop and I use the jQueryUI sortable function in the backoffice. The same code works with PS 1.6.x and PS equal/over to 1.5.5.x but not with versions below 1.5.5.x. For example, with PS 1.5.4.0 it doesn't work and it returns a javascript error:

Errore: TypeError: $(...).sortable is not a function
Source file: http://prestashop1540.it/js/jquery/jquery-1.7.2.min.js line 2 > eval
Riga: 69

I have set an IF to avoid errors to be shown to users, but I'd like to solve this because my module can't be compliant to PS versions below 1.5.5.x with this bug.

The strange thing is just that the same code works with a version near up. Can be a difference between the jQueryUI versions included in 1.5.4.x and 1.5.5.x?

In my module I include the ultimate version of jQueryUI, with a raw call in the template, including the whole library

<link href="/modules/mymodule/views/templates/js/jqueryui/jquery-ui.min.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="/modules/mymodule/views/templates/js/jqueryui/jquery-ui.min.js"></script>

but the sortable function doesn't seem to work...

Any suggestions?

I've searched around for days but can't find a solution

[bellini13]

just looking at the jquery.ui.sortable.min.js file included with Prestashop, in PS v1.5.4 the version is 1.8.16.  In PS v1.5.5 the version is 1.10.3

 

So there is an obvious difference in just the sortable plugin alone.  Most likely PS v1.5.5 included new jquery, jquery UI and various plugins to address issues.

 

Not really sure there is anything you can do about this.

[vekia]

how you included sortable libraries?

[endriudb]

how you included sortable libraries?

 

I include the whole library with a call in the module's template (in the backoffice), and the version I include in the module has all the sublibraries of jQueryUI (I download it from the official site with all options checked).

<link href="/modules/mymodule/views/templates/js/jqueryui/jquery-ui.min.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="/modules/mymodule/views/templates/js/jqueryui/jquery-ui.min.js"></script>

With the "Net" panel in Firebug I see the script has been loaded correctly, but it doesn't work, it seems to be not in action.. or sort of.

Now my question is: is it possible that the version I include creates a conflict with the version included by Prestashop? And if so, why does it happen only with the "older" versions? In the newer versions it's all ok!

I've not tested with PS <= 1.4 yet..

[bellini13]

are you asking Prestashop why a jquery library would not work?

 

remove Prestashop from the equation, create a small test script by loading the older jquery, jquery ui and plugins from PS v1.5.4, and then load your new versions that you include to see if it works.

 

In theory it should not work, and that is likely due to the conflicting jquery versions, and nothing to do with Prestashop.

[vekia]

include sortable with this simple code:

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

after that each instance of ps 1.5 and 1.6 will always load correct library which will work with associated jquery library (associated with ps version)

[endriudb]

include sortable with this simple code:

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

after that each instance of ps 1.5 and 1.6 will always load correct library which will work with associated jquery library (associated with ps version)

 

This sounded like a potential beautiful solution, but it doesn't work

I copied your code right before calling the template, but when i reloaded the page nothing changed.

if ($().sortable) { .... }

This IF continues to return FALSE. If it's true that 2 versions of jQueryUI conflict, why in the newer version there are no errors? Loading the library the same way, the equation needs the "prestashop" parameter..

Referring to the 1.5.4.0 version, I see that in the "/js/jquery/ui/" folder the "jquery.ui.sortable.min.js" is present. So I think that loading that library fails.

Any other suggestions?

[vekia]

i think that it's just fault in your js code.

to include some sortable to list:

<ul id="myList">
<li>item1</i>
<li>item2</li>
</ul>

you have to use code (an example) like:

$("#myList").sortable({
opacity:0.5,
cursor:move,
update" function() {
  //do something
}
});

 

code you show in your last post looks a little wierd for me 

btw. i use this solution without problems in many modules, they work well in each instance of 1.5.x !

[endriudb]

This is the entire code I use:

if ($().sortable) {
        $(".sortable").sortable({
            update: function(event, ui) {
                var order = $(this).sortable("serialize");
                $.ajax({
                    type: 'POST',
                    url: "/modules/mymodule/ajax.php",
                    data: 'method=reorderProductImages&id_product={$id_product}&'+order,
                    dataType: 'json',
                    success: function (json) {
                        renumberImages();
                    }
                });
            }
        });
        $(".sortable").disableSelection();
    }
    else {
        $("h1").append('<div class="alert alert-danger" role="alert" style="font-size: 12px;">{l s='The image sorting function is not available.'}</div>');
    }

as you can see it's not too much different from what you wrote

But i've wrapped the code inside the main IF so if the sortable function is not defined it doesn't throw an error but skips the function and reports to the user that the sortable function can't be used. I think it's an elegant way to manage the exception, a sort of try-catch

Anyway, this is the code I use in the controller:

public function hookDisplayAdminProductsExtra($params)
    {
        $id_product = (int)Tools::getValue('id_product');    
        if (Validate::isLoadedObject($product = new Product($id_product)))
        {
            $images = Db::getInstance()->ExecuteS('---MYQUERY---');
            $active = Db::getInstance()->ExecuteS('---MYQUERY---');
            $this->context->smarty->assign(array(
                'id_product' => $id_product,
                'form_action' => Tools::safeOutput($_SERVER['REQUEST_URI']),
                'roundview_images' => $images,
                'active' => (!empty($active[0]) ? $active[0]['active'] : false)
            ));
            $this->context->controller->addJqueryUI('ui.sortable');
            return $this->display(__FILE__, 'views/templates/admin/MyModuleForm.tpl');
        }
    }

Can you check if I load the sortable library correctly?

[bellini13]

ideally you want to load js files in hookheader

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

This IF continues to return FALSE. If it's true that 2 versions of jQueryUI conflict, why in the newer version there are no errors?

 

where exactly is the conflict?  You don't show loading your external libraries, but you are implying that you are loading both the included PS libraries and some other external library?

[endriudb]

ideally you want to load js files in hookheader

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

 

Yeah, you gave me solution!

public function hookDisplayBackOfficeHeader($params)
    {
        $this->context->controller->addJqueryUI('ui.sortable');
    }

This was the key!

I had to use the header hook and not put it with the other code

Thank you so much! :D

Edited August 1, 2014 by endriudb (see edit history)