Uncaught TypeError: document.querySelector(...) is null
Permalink Browser Info Environment
Getting js error: Uncaught TypeError: document.querySelector(...) is null on our site with ajax forms - not sure where it has crept in as previously worked OK.
Any idea what might be going on?
Seems to be related to:
$(document).ready(function() {
ajaxForms_express_form[6686] = new $.kalmoyaAjaxCoreForms("form[action*='submit/6686']", {"bID":6686,"url":"https:\/\/www.katalysis.net\/ajaxforms\/core\/expressform\/","handle":"express_form"});
});</script>
<script id="disable-4966" data-ignore type="text/javascript">document.querySelector("form[action*='submit/4966']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[4966] = false;
Any idea what might be going on?
Seems to be related to:
$(document).ready(function() {
ajaxForms_express_form[6686] = new $.kalmoyaAjaxCoreForms("form[action*='submit/6686']", {"bID":6686,"url":"https:\/\/www.katalysis.net\/ajaxforms\/core\/expressform\/","handle":"express_form"});
});</script>
<script id="disable-4966" data-ignore type="text/javascript">document.querySelector("form[action*='submit/4966']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[4966] = false;
Type: | Ticket |
---|---|
Status: | Resolved |
This is strange.
You have 3 forms on the page but the JS code appears 4 times, once for each form and once for a non-existent form which is where the error is coming from.
Did you have a fourth form there that you deleted?
Once thing though is, the other 3 forms work perfectly, that error is not wreaking havoc.
You have 3 forms on the page but the JS code appears 4 times, once for each form and once for a non-existent form which is where the error is coming from.
Did you have a fourth form there that you deleted?
Once thing though is, the other 3 forms work perfectly, that error is not wreaking havoc.
Thanks for the pointer.
I deleted the missing blocks that were loading js from the database and that seems to have fixed things.
I deleted the missing blocks that were loading js from the database and that seems to have fixed things.
I'm seeing this issue again on another site we're upgrading from Version 8 to 9.
Only one form is loaded on each page from a set of forms in different Global Areas. The correct global are is loaded in an element based on a page attribute.
This doesn't happen on the same site in version 8.
<script id="disable-34524" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34524']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34524] = false;
$(document).ready(function() {
ajaxForms_express_form[34524] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34524']", {"bID":34524,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script type="text/javascript">var ajaxFormSharedSettings_express_form = {"handle":"express_form","formDefaults":{"errorContainer":"<div class=\"alert alert-danger\" \/>","successContainer":"<div class=\"alert alert-success\" \/>","inlineErrorContainer":"<small class=\"alert alert-danger kalajaxforms-inline-error\" \/>"},"captchaClass":"captcha","cID":577};</script>
<script id="disable-34526" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34526']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34526] = false;
$(document).ready(function() {
ajaxForms_express_form[34526] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34526']", {"bID":34526,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34528" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34528']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34528] = false;
$(document).ready(function() {
ajaxForms_express_form[34528] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34528']", {"bID":34528,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34530" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34530']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34530] = false;
$(document).ready(function() {
ajaxForms_express_form[34530] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34530']", {"bID":34530,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34529" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34529']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34529] = false;
$(document).ready(function() {
ajaxForms_express_form[34529] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34529']", {"bID":34529,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-31590" data-ignore type="text/javascript">document.querySelector("form[action*='submit/31590']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[31590] = false;
$(document).ready(function() {
ajaxForms_express_form[31590] = new $.kalmoyaAjaxCoreForms("form[action*='submit/31590']", {"bID":31590,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-31592" data-ignore type="text/javascript">document.querySelector("form[action*='submit/31592']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[31592] = false;
$(document).ready(function() {
ajaxForms_express_form[31592] = new $.kalmoyaAjaxCoreForms("form[action*='submit/31592']", {"bID":31592,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34525" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34525']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34525] = false;
$(document).ready(function() {
ajaxForms_express_form[34525] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34525']", {"bID":34525,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
Only one form is loaded on each page from a set of forms in different Global Areas. The correct global are is loaded in an element based on a page attribute.
This doesn't happen on the same site in version 8.
<script id="disable-34524" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34524']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34524] = false;
$(document).ready(function() {
ajaxForms_express_form[34524] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34524']", {"bID":34524,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script type="text/javascript">var ajaxFormSharedSettings_express_form = {"handle":"express_form","formDefaults":{"errorContainer":"<div class=\"alert alert-danger\" \/>","successContainer":"<div class=\"alert alert-success\" \/>","inlineErrorContainer":"<small class=\"alert alert-danger kalajaxforms-inline-error\" \/>"},"captchaClass":"captcha","cID":577};</script>
<script id="disable-34526" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34526']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34526] = false;
$(document).ready(function() {
ajaxForms_express_form[34526] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34526']", {"bID":34526,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34528" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34528']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34528] = false;
$(document).ready(function() {
ajaxForms_express_form[34528] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34528']", {"bID":34528,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34530" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34530']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34530] = false;
$(document).ready(function() {
ajaxForms_express_form[34530] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34530']", {"bID":34530,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34529" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34529']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34529] = false;
$(document).ready(function() {
ajaxForms_express_form[34529] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34529']", {"bID":34529,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-31590" data-ignore type="text/javascript">document.querySelector("form[action*='submit/31590']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[31590] = false;
$(document).ready(function() {
ajaxForms_express_form[31590] = new $.kalmoyaAjaxCoreForms("form[action*='submit/31590']", {"bID":31590,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-31592" data-ignore type="text/javascript">document.querySelector("form[action*='submit/31592']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[31592] = false;
$(document).ready(function() {
ajaxForms_express_form[31592] = new $.kalmoyaAjaxCoreForms("form[action*='submit/31592']", {"bID":31592,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
<script id="disable-34525" data-ignore type="text/javascript">document.querySelector("form[action*='submit/34525']:not([data-kaf-ready])").querySelector("input[type=submit], button[type=submit]").setAttribute("disabled", "disabled");</script>
<script type="text/javascript">if (typeof ajaxForms_express_form === "undefined") {
var ajaxForms_express_form = {};
}
ajaxForms_express_form[34525] = false;
$(document).ready(function() {
ajaxForms_express_form[34525] = new $.kalmoyaAjaxCoreForms("form[action*='submit/34525']", {"bID":34525,"url":"https:\/\/dev35.katalysis.net\/ajaxforms\/core\/expressform","handle":"express_form"});
});</script>
This is annoying because it's most likely a bug in Concrete's core.
My package loads the JS using concrete's event on_block_load. So it's counting on the block to actually be loading and doesn't check whether the element querySelector() is targeting exists or not because it's supposed to exist.
I'm also trying to minimize the amount of JS to run so the forms are ready as fast as possible.
Now it seems Concrete is triggering on_block_load when blocks are not actually loading.
So I have 2 options:
1- If there's a way to verify the block is a real block and not a leftover, use that
2- otherwise use more JS to check the element and stop throwing errors.
The second option sucks because it will use extra JS and you will still have plenty of JS that shouldn't be there. But I don't know if there's a way to use the first option.
So i'm looking into it, but I can't really give you an ETA. I hope that's ok?
My package loads the JS using concrete's event on_block_load. So it's counting on the block to actually be loading and doesn't check whether the element querySelector() is targeting exists or not because it's supposed to exist.
I'm also trying to minimize the amount of JS to run so the forms are ready as fast as possible.
Now it seems Concrete is triggering on_block_load when blocks are not actually loading.
So I have 2 options:
1- If there's a way to verify the block is a real block and not a leftover, use that
2- otherwise use more JS to check the element and stop throwing errors.
The second option sucks because it will use extra JS and you will still have plenty of JS that shouldn't be there. But I don't know if there's a way to use the first option.
So i'm looking into it, but I can't really give you an ETA. I hope that's ok?
I was thinking, any chance you'd give me access to the site and an FTP access to try a few things?
Access details coming by PM - many thanks
I'm having problems connecting. I sent you a PM
Hello,
I uploaded version 2.1.0. It should resolve the issue with the Global Area blocks JS, and it should also work with PHP 8.
Please upgrade and let me know if you experience any other problem.
I uploaded version 2.1.0. It should resolve the issue with the Global Area blocks JS, and it should also work with PHP 8.
Please upgrade and let me know if you experience any other problem.
Thank you, this is working in PHP 7, the additional javascript is removed and the errors are gone.
I tried PHP8 but I am getting errors from your Hidden Attributes package making it difficult to test.
I'll post another ticket in that package with details.
I tried PHP8 but I am getting errors from your Hidden Attributes package making it difficult to test.
I'll post another ticket in that package with details.
https://www.katalysis.net/concrete-cms/concrete5-to-concrete-cms-upg...