Post by protechtrader » Fri Dec 11, 2020 3:50 am

I am working on OC 1.5.6 with a custom theme that is no longer supported and I have been researching the console error I started receiving after upgrading my Jquery lib past 1.9 which is:
"Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'"
I understand it has to do with the timing of the library loading and the function running at the wrong time or due to the accordion being empty I believe from my research, but I have not been able to find a working way to rewrite this code to work. Any suggestions or workarounds for this?

The JS from the themes product.php

Code: Select all

jQuery( function($) {

  function set_product_info() {
    var w = $("html").width();
    if (w < 768) {
      $(".s_tabs").tbTabs("destroy");
      $(".s_tab_box").accordion ({
        autoHeight:         false,
        collapsible:        true,
        active:             false
      });
    }
    else {
      $(".s_tab_box").accordion("destroy");
      $(".s_tabs").tbTabs({ fx: { opacity: 'toggle', duration: 300 } });
    }
  }

New member

Posts

Joined
Fri Nov 01, 2013 12:20 am

Post by ADD Creative » Fri Dec 11, 2020 7:00 am

Have you tried using jquery-migrate?

https://github.com/jquery/jquery-migrat ... ble#readme

www.add-creative.co.uk


Expert Member

Posts

Joined
Sat Jan 14, 2012 1:02 am
Location - United Kingdom

Post by protechtrader » Fri Dec 11, 2020 9:58 am

ADD Creative wrote:
Fri Dec 11, 2020 7:00 am
Have you tried using jquery-migrate?

https://github.com/jquery/jquery-migrat ... ble#readme

Yes I am using it. Currently the following JS libs load in my header.tpl:

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script> 

New member

Posts

Joined
Fri Nov 01, 2013 12:20 am

Post by ADD Creative » Fri Dec 11, 2020 8:34 pm

You could try using the instance method to check the accordion in not 'undefined' before destroy. https://api.jqueryui.com/accordion/#method-instance

www.add-creative.co.uk


Expert Member

Posts

Joined
Sat Jan 14, 2012 1:02 am
Location - United Kingdom

Post by protechtrader » Thu Dec 17, 2020 4:27 am

ADD Creative wrote:
Fri Dec 11, 2020 8:34 pm
You could try using the instance method to check the accordion in not 'undefined' before destroy. https://api.jqueryui.com/accordion/#method-instance
Doing that seemed to stop the error but broke the product accordion box being created making it loop.

Any other suggestions for my code:

Code: Select all

      function set_product_info() {
        var w = $("html").width();
        if (w < 768) {
          $(".s_tabs").tbTabs("destroy");
          $(".s_tab_box").accordion ({
            autoHeight:         false,
            collapsible:        true,
            active:             false
          });
        }
        else {
          $(".s_tab_box").accordion("destroy");
          $(".s_tabs").tbTabs({ fx: { opacity: 'toggle', duration: 300 } });
        }
      }

New member

Posts

Joined
Fri Nov 01, 2013 12:20 am
Who is online

Users browsing this forum: No registered users and 23 guests