So, I had an accordion element working before upgrading from FRED 1.3 to 3.0 in a MODX 2.8.7 site. The accordion still worked for a while, but now when I try to insert the accordion element, the screen hangs and dislays this message:
Unexpected end of JSON input
The accordion element that is saved in the page still works on the website, but it doesn’t display when editing with FRED.
Here’s the markup:
<div class="accordion-wrapper">
{% for i in 0..(items - 1) %}
<div data-fred-name="accordion-item-{{i}}" data-fred-rte="true" data-fred-rte-config="expanded">
<button class="accordion-title">Heading</button>
<div class="accordion-panel">
<p>Content</p>
</div>
</div>
{% endfor %}
</div>
<script>
var acc = document.getElementsByClassName("accordion-title");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
And here’s the Options JSON:
{
"remote": true,
"settings": [
{
"type": "slider",
"name": "items",
"label": "Accordion items",
"min": 1,
"max": 25,
"step": 1,
"value": 3
}
]
}
I’m also getting a few javascript errors in the browser console when opening the page in FRED. Don’t know if they are at all related.
fred.min.js?v=d31060:2 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 fred-page-setting-change listeners added. Use emitter.setMaxListeners() to increase limit
at c (/assets/components/fred/web/fred.min.js?v=d31060:2:83012)
at o.addListener (/assets/components/fred/web/fred.min.js?v=d31060:2:85596)
at new zr (/assets/components/fred/web/fred.min.js?v=d31060:2:507779)
at zr.fromMarkup (/assets/components/fred/web/fred.min.js?v=d31060:2:508122)
at /assets/components/fred/web/fred.min.js?v=d31060:2:502102
at Array.forEach (<anonymous>)
at Hr.loadElements (/assets/components/fred/web/fred.min.js?v=d31060:2:502057)
at si (/assets/components/fred/web/fred.min.js?v=d31060:2:531223)
at Xi.loadContent (/assets/components/fred/web/fred.min.js?v=d31060:2:608394)
at async Xi.init (/assets/components/fred/web/fred.min.js?v=d31060:2:614562)
Failed to load resource: the server responded with a status of 500 /assets/components/fred/web/endpoints/ajax.php?modx=2&action=render-element
POST /assets/components/fred/web/endpoints/ajax.php?modx=2&action=render-element 500 (Internal Server Error)
fetch @ fred.min.js?v=d31060:2
er @ fred.min.js?v=d31060:2
(anonymous) @ fred.min.js?v=d31060:2
remoteTemplateRender @ fred.min.js?v=d31060:2
templateRender @ fred.min.js?v=d31060:2
render @ fred.min.js?v=d31060:2
(anonymous) @ fred.min.js?v=d31060:2
(anonymous) @ fred.min.js?v=d31060:2
(anonymous) @ fred.min.js?v=d31060:2
e.emit @ fred.min.js?v=d31060:2
q @ fred.min.js?v=d31060:2
$ @ fred.min.js?v=d31060:2