I am using the admin template via PHP and so wanted to move the Core.js to the top of the page rather than the bottom so that I can easily call functions within include files.
I have tested this and almost everything works as expected except AJAX Modals - it working for Inline structured ones but not for the other kind and I'm getting the error "Cannot read properties of null (reading 'querySelector')"
Everything else i've tested seems to work fine and if i specify the target of the container in-line, this also works i.e. ( data-ajax-modal-container="#my_custom") but the other examples don't
Please try to add both javascripts without "async" on them: <script src="assets/js/core.min.js"></script> <script src="assets/js/vendor_bundle.min.js"></script>
What is vendor_bundle.min.js? - is loaded by core.min.js if not manually added - contains the bootstrap scripts (required by modals)
I tried to replicate your issue but with no luck. Please let me know if this is working for you.
to within the head section - you will find that the normal Modals work (scrollable for instance)
but the Modal AJAX ones fail
Another example is in: /html_frontend/documentation/plugins-sow-ajax-modal.html
Again, move those two lines to within the head part of the script and you will find that the in-line modal button works but none of the other modal examples do -
The error is:
ajxModal.querySelector('.modal-content').innerHTML = _loader; // reset & show loading spinner
Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
I've tried to trace this through and my guess is that it is not waiting until the body has been loaded and so is attempting to append the sow_ajax_modal too early if it is contained within the head section - This seems to be the case as if i move the script to just inside the body tag, it works again.
it seems to only affect the modal and toast / confirm functions and so seems to behave differently to all the other functions, perhaps as it is appending the required tag to the page body?
I love how you have included the vendor bundle to auto-load but if it not manually added, you get an error when calling some functions such as the toast
To replicate this, take any standard page and call the: $.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-center', 0, true);
function (works)
now remove the <script src="assets/js/vendor_bundle.min.js"></script>
and you will get a JS error
I think that perhaps with this and the models function, the timing might be throwing things off and they are being called in-line rather than after the document is ready?
Position of Core.js causing Javascript error
I am using the admin template via PHP and so wanted to move the Core.js to the top of the page rather than the bottom so that I can easily call functions within include files.
I have tested this and almost everything works as expected except AJAX Modals - it working for Inline structured ones but not for the other kind and I'm getting the error "Cannot read properties of null (reading 'querySelector')"
Everything else i've tested seems to work fine and if i specify the target of the container in-line, this also works i.e. ( data-ajax-modal-container="#my_custom") but the other examples don't
Any ideas?
Last edited 1 year ago
Please try to add both javascripts without "async" on them:
<script src="assets/js/core.min.js"></script>
<script src="assets/js/vendor_bundle.min.js"></script>
What is vendor_bundle.min.js?
- is loaded by core.min.js if not manually added
- contains the bootstrap scripts (required by modals)
I tried to replicate your issue but with no luck.
Please let me know if this is working for you.
Thanks,
Dorin
I'm afraid this did not work - the scripts were not set to async
to replicate, use:
html_frontend/documentation/components-modals.html
and move:
<script src="../assets/js/core.min.js"></script>
<script src="../assets/js/vendor_bundle.min.js"></script>
to within the head section - you will find that the normal Modals work (scrollable for instance)
but the Modal AJAX ones fail
Another example is in:
/html_frontend/documentation/plugins-sow-ajax-modal.html
Again, move those two lines to within the head part of the script and you will find that the in-line modal button works but none of the other modal examples do -
The error is:
ajxModal.querySelector('.modal-content').innerHTML = _loader; // reset & show loading spinner
Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
I've tried to trace this through and my guess is that it is not waiting until the body has been loaded and so is attempting to append the sow_ajax_modal too early if it is contained within the head section - This seems to be the case as if i move the script to just inside the body tag, it works again.
it seems to only affect the modal and toast / confirm functions and so seems to behave differently to all the other functions, perhaps as it is appending the required tag to the page body?
Last edited 1 year ago
I love how you have included the vendor bundle to auto-load but if it not manually added, you get an error when calling some functions such as the toast
To replicate this, take any standard page and call the:
$.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-center', 0, true);
function (works)
now remove the
<script src="assets/js/vendor_bundle.min.js"></script>
and you will get a JS error
I think that perhaps with this and the models function, the timing might be throwing things off and they are being called in-line rather than after the document is ready?