Magento Asked by Watista on November 23, 2020
tl;dr After upgrading from Magento 2.3.1 to Magento 2.3.5-p1 our custom JavaScript, part of our custom theme, stopped working. I’m receiving the following error when trying to close the accordion using the Magento Accordion widget like so: $('#accordion').accordion('deactivate');
jquery.js:2 Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method ‘deactivate’
I’m using the native Magento Accordion Widget in my custom theme. The file contains a single #accordion
, with a #readmore
and #readless
button.
Both are loaded into the DOM, however, the #readless
button has the default styling: display: none
Block code
<div class="homepage-block">
<div id="accordion" class="fade-active" data-mage-init="{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": true}}">
<div class="row">
<p>Lorum Ipsum</p>
</div>
<div class="col2-set">
<div id="readmorecontainer">
<div id="readmore" data-role="collapsible">Read More...</div>
</div>
<div data-role="content">
<div class="col-1">
<p>Lorum Ipsum</p>
</div>
<div class="col-2">
<p>Lorum Ipsum</p>
</div>
<div id="readlesscontainer" class="col-1">
<div id="readless">Read Less...</div>
</div>
</div>
</div>
</div>
Javascript code
The JS code has always worked, the functionality is as follows:
On #readmore
click
#readless
buttonfade-active
class (Pure styling, used as kind of overlay)On #readless
click
#readmore
button.accordion('deactivate')
function. require([
'jquery'
], function($) {
'use strict';
$(function() {
// Accordion readmore
$("#readmore").on("click", function () {
$('#readmore').hide();
$('#accordion').toggleClass('fade-active');
});
// Accordion readless
$('#readless').on('click', function () {
$('#readmore').show();
$('#accordion').accordion('deactivate');
$('#accordion').toggleClass('fade-active');
});
});
});
The issue
After the update the block, pressing the #readless
button triggers the error. I guess the accordion
function changed, or my JavaSript file isn’t loaded in the correct order.
Any advice is welcome
After trying lots of different solutions I've finally managed to fix the problem.
In the JS code I simply had to add 'jquery/ui' to the require.
require([
'jquery',
'jquery/ui'
], function($) {
'use strict';
...
After adding this to the JS and deploying the static content the deactivate method works for the accordion.
I have no idea why this problem only occured after upgrading to Magento 2.3.5-p1.
Correct answer by Watista on November 23, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP