<script> tags in report widget templates are not executed when dashboard loads

[hirisov]

Winter CMS Build

dev-develop

PHP Version

8.0

Database engine

MySQL/MariaDB

Plugins installed

No response

Issue description

If there is a <script> tag in the template of a report widget, and that report widget is added to the dashboard, then the scipt is not executed. This was working fine in October CMS 472.

If the script is moved to an external JS file and added in the loadAssets() of the report widget, then it cannot interact with the DOM elements defined in the template, as at the time of the asset loading and executing the partial is not loaded yet.

So there is no working way currently to use JS in a report widget which interacts with the DOM elements defined in the template.

Steps to replicate

Create a report widget with this template:

<div class="report-widget">
    <div id="test">before script run</div>
</div>

<script>
    const testElement = document.getElementById("test");
    testElement.innerHTML = 'after script run';
</script>

then add this report widget to the dashboard.

Upon visiting the dashboard the widget's content should be "after script run", but instead it stays "before script run". If the user opens the properties panel of the report widget by clicking on the cogwheel icon and then closes it (without changing anything), then the content changes to "after script run".

Workaround

If the user opens the properties panel of the report widget by clicking on the cogwheel icon and then closes it (without changing anything), the script defined in the <script> runs.

[ericp-mrel]

Have you tried using an event listener so the script waits until the DOM has been rendered before trying to modify DOM elements?

Something like:

document.addEventListener('DOMContentLoaded', () => {
    // your code here...
    const testElement = document.getElementById("test");
    testElement.innerHTML = 'after script run';
});

[hirisov]

It is still the same that way if I use in the template. Even if I put a single console.log() there, that will not run either - so nothing runs which is defined inside the template file <script> tag.

I tried to put that into the external JS and load it via loadAssets(), but still the div#test does not exists when it runs and I get javascript error:

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

[bennothommo]

Report widgets are brought in by an AJAX call, and both the original framework and Snowboard use innerHTML writes to write the HTML of the report widget into place. One of security measures of innerHTML is that it does not execute inline JavaScript, so yes, using JavaScript in your template will not work.

What you must do is load the JavaScript in an external asset with addJs, as you mentioned doing, and depending on whether you use jQuery or Snowboard, listen for the event that fires after AJAX requests are completed:

jQuery

$(document).on('render', function () {
    if (!$('#test').length) {
        return;
    }

    $('#test').html('after script run');
});

Snowboard

Snowboard.on('ajaxDone', () => {
    if (document.getElementById('test')) {
        document.getElementById('test').innerHTML = 'after script run';
    }
});

[hirisov]

@bennothommo great thanks, I will stick to that practice from now on! I think this is not trivial and it would be very nice to add all this somewhere in the docs, either to https://wintercms.com/docs/backend/widgets#report-widgets or https://wintercms.com/docs/snowboard/migration-guide . Also it would be great to have some details about how the dashboard works regarding the report widgets and clarify some questions, like:

• what happens when the widget configuration changes, so the partial might get updated? Will the script run again then? Or the "data-initialised" stays true in this case for that report widget and the script won't run in a second time?
• it seems to me the more report widget I have on the dasboard, the slower the update of a single report widget if I change the configuration of (only) that report widget. Is it true that when I updated the configuration of a report widget all others gets reloaded too? This is a problem for one of our client, he likes to have many report widgets with different configurations on the dashboard and it is very slow for him now both the dashboard initial loads, and updates when he changes only one widget's configuration. We will add caching to all the report widgets to help with this issue, but it is still strange for me why it reloads all others (if that is the case).

[hirisov]

Yes there is still some problem, if I open the configuration panel for this widget and close it (doesn't matter if I change any properties or not) then the widget resets to "script not run" state and the attached script does't run again :( As I test I added some console logging:

template:

<div class="report-widget">
    <div class="status" data-widget="myWidget">
        <div class="status">script not run</div>
    </div>
</div>

script:

Snowboard.on('ajaxDone', () => {
	console.log('inside ajaxDone');
	document.querySelectorAll('[data-widget="myWidget"]:not([data-initialised])').forEach((element) => {
		console.log('inside querySelectorAll');
		element.dataset.initialised = true; // Sets the data-initialised attribute on the element, so it won't reinitialise on that same instance
		const status = element.querySelector('.status');
		status.innerHTML = 'script has run';
	});
});

When I add a second instance of the widget, the script does not run, the second widget shows "script not run", but I get an error in console:

Uncaught TypeError: Cannot read properties of null (reading 'removeClass')
    at storm-min.js?v=1.2.1:2216:115
(anonymous) @ storm-min.js?v=1.2.1:2216
setTimeout (async)
Popup.setLoading @ storm-min.js?v=1.2.1:2216
Popup.hideLoading @ storm-min.js?v=1.2.1:2220
(anonymous) @ storm-min.js?v=1.2.1:2249
each @ jquery.min.js?v=1.2.1:2
each @ jquery.min.js?v=1.2.1:2
$.fn.popup @ storm-min.js?v=1.2.1:2245
(anonymous) @ storm-min.js?v=1.2.1:2261
dispatch @ jquery.min.js?v=1.2.1:2
v.handle @ jquery.min.js?v=1.2.1:2
trigger @ jquery.min.js?v=1.2.1:2
(anonymous) @ jquery.min.js?v=1.2.1:2
each @ jquery.min.js?v=1.2.1:2
each @ jquery.min.js?v=1.2.1:2
trigger @ jquery.min.js?v=1.2.1:2
(anonymous) @ framework.js?v=1.2.1:441
c @ jquery.min.js?v=1.2.1:2
fireWith @ jquery.min.js?v=1.2.1:2
l @ jquery.min.js?v=1.2.1:2
(anonymous) @ jquery.min.js?v=1.2.1:2
load (async)
send @ jquery.min.js?v=1.2.1:2
ajax @ jquery.min.js?v=1.2.1:2
e.ajax @ jquery-migrate.min.js?v=1.2.1:80
Request @ framework.js?v=1.2.1:432
$.fn.request @ framework.js?v=1.2.1:499
documentOnSubmit @ framework.js?v=1.2.1:683
dispatch @ jquery.min.js?v=1.2.1:2
v.handle @ jquery.min.js?v=1.2.1:2

Now If I reload the dashboard both widgets shows "script has run" and I see this in console:

inside ajaxDone
(2) inside querySelectorAll

If I open the configuration panel of any of the 2, then that revers back to "script not run" and I see no new "inside querySelectorAll" message, so the script not runs again. This is problematic as upon configuration change the markup might have changed and the script should run again to process it.

[bennothommo]

I agree @hirisov, we do need to add some more documentation especially for report widgets - it historically has been lacking it. We'll keep it in mind.

To your issue, there's 2 things at play here:

• Report widgets do refresh (via AJAX) whenever the configuration inspector closes, regardless of if there's any changes or not. This will reset the template back to its default state.
• If you're using the Snowboard code, I've realised that Snowboard event listeners cannot listen to AJAX requests made with jQuery, which the Backend does use. You will need to use the jQuery examples here. We may have to look into ways that we can improve this.

The main issue is the report widget was written a fair while ago for October and hasn't had much updating since. It seems to me, based on the history and the code, that it was only meant for simple static reports, with only the configuration being the only way to make the reports "dynamic".

I did do some work on the report widgets for the Google Analytics plugin to load the data through AJAX after the widget was loaded, as having multiple reports did slow down the dashboard considerably. You could perhaps have a look at those to get some ideas on how to do this, but the report widgets themselves don't use much JS to provide additional functionality.

[hirisov]

@bennothommo thanks a lot, I can confirm with the jQuery method it works fine. If you can tell me where you think it should be best to put in the docs I can make an initial PR with this example there.

[bennothommo]

@hirisov best place would be this page, I would say: https://github.com/wintercms/docs/blob/main/backend-widgets.md - specifically within the "Report Widgets" sections.