Multiple application/json blocks confuse javascript code
-
Hi,
When multiple widgets with calendar (or widget and the calendar itself) are used on a page (two same widgets for desktop/mobile responsive design, for example), each creates its own
<script data-js="tribe-events-view-data" type="application/json">block, while the script is not able to deal with the array of the repeating JSONs breaking JSON.parse with an error (all JSONs from the blocks concatenated into one string):t.setup = function(n) {
const i = e(n);
if (!i.is(t.selectors.container))
return;
const s = i.find(t.selectors.dataScript);
let a = {};
s.length && (a = JSON.parse(s.text().trim())),
t.initTasks(i, a)
}The easiest solution is to assume that
scan have more than a single element and verify that the same data was not already parsed before.
-
No, I can not – it is not public yet.
I looked closely into the problem, only multiple same widgets on the same page create this problem, not the calendar itself.
I added the widget with featured events to the header of the Astra theme, which doubles them for desktop and mobile version. Browser console showed a couple of errors related to the JSON parsing. Looked into the HTML code, found that every widget (2 in total) adds it’s own code (cut to reduce space):<script data-js="tribe-events-view-data" type="application/json">
{"slug":"widget-events-list","prev_url":"","next_url":"","view_class": ..</script>Two same errors are in the console:
Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 5149 (line 2 column 1)because variablesis an array with 2 same elements. The codes.text()combines them into invalid JSON string{...}\n{...}Two errors are due to the same javasript code for widgets inserted twice – function
initBreakpoints:var container = document.querySelectorAll( '[data-view-breakpoint-pointer="UUID"]' );
if ( ! container ) { return; }
window.tribe.events.views.breakpoints.setup( container );containerhas 2 elements in array as there are two same DIVs with the samedata-view-breakpoint-pointerHi @d0153
1) Fresh WP
2) Astra Theme + The Events Calendar plugin + 1 future event
3) Customize header, add Widget 1 with the Events List block into menu in Desktop view, add the same Widget 1 into the Mobile view. Both will be present on the same page at the same time (only one is visible) with the same UUID indata-view-breakpoint-pointerattribute.Result:
Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 5265 (line 2 column 2)
at JSON.parse (<anonymous>)
at Object.setup (breakpoints.statopt_ver.1765957124.js:1:1382)
at HTMLDocument.initBreakpoints (s-qgzw3lyh9g79/:253:42)and
Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 5265 (line 2 column 2)
at JSON.parse (<anonymous>)
at Object.setup (breakpoints.statopt_ver.1765957124.js:1:1382)
at HTMLDocument.initBreakpoints (s-qgzw3lyh9g79/:423:42)
You must be logged in to reply to this topic.
