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;

Type: Ticket
Status: Resolved
katalysis
View Replies:
katalysis replied on at Permalink Reply
katalysis
Visible here and elsewhere on our site, form can be made visible by clicking the "talk to us about upgrading...' button

https://www.katalysis.net/concrete-cms/concrete5-to-concrete-cms-upg...
mnakalay replied on at Permalink Reply
mnakalay
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.
katalysis replied on at Permalink Reply
katalysis
Thanks for the pointer.

I deleted the missing blocks that were loading js from the database and that seems to have fixed things.
katalysis replied on at Permalink Reply
katalysis
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>
mnakalay replied on at Permalink Reply
mnakalay
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?
mnakalay replied on at Permalink Reply
mnakalay
I was thinking, any chance you'd give me access to the site and an FTP access to try a few things?
katalysis replied on at Permalink Reply
katalysis
Access details coming by PM - many thanks
mnakalay replied on at Permalink Reply
mnakalay
I'm having problems connecting. I sent you a PM
mnakalay replied on at Permalink Reply
mnakalay
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.
katalysis replied on at Permalink Reply
katalysis
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.

concrete5 Environment Information

# Concrete Version
Core Version - 9.1.1
Version Installed - 9.1.1
Database Version - 20220516191423

# Database Information
Version: 10.2.44-MariaDB
SQL Mode: STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

# Concrete Packages
Ajax Forms - Express Edition Light (2.0.3), Anti-Spammer Master (2.0.3), Clear Clipboard (1.0.1), Hidden Data Attributes for Express (2.0.3), Katalysis Base Bootstrap (0.0.6.0.0), Katalysis Business (0.1.3), Katalysis Hub (0.0.2.4), Katalysis Instagram Displayer (0.9.5), Katalysis Mailing (0.0.01), Katalysis Theme Bootstrap (0.0.6.0), Minify HTML (2.0.0)

# Concrete Overrides
blocks/vivid_simple_slider/templates/katalysis_header_slideshow/img/arrow-right.png, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/img/arrow-left.png, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/img, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/view.php, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/js/swiper.js, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/js, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/css/swiper.css, blocks/vivid_simple_slider/templates/katalysis_header_slideshow/css, blocks/vivid_simple_slider/templates/katalysis_header_slideshow, blocks/vivid_simple_slider/templates, blocks/vivid_simple_slider/img/arrow-right.png, blocks/vivid_simple_slider/img/arrow-left.png, blocks/vivid_simple_slider/img, blocks/vivid_simple_slider, attributes/hidden/controller.php, attributes/hidden/type_form.php, attributes/hidden/form.php, attributes/hidden, mail/email_config.php, mail/images/feefo-twitter-icon.jpg, mail/images/email-logo.png, mail/images/feefo-linkedin-icon.jpg, mail/images/feefo-awards.png, mail/images/feefo-facebook-icon.jpg, mail/images/spacer.png, mail/images/feefo-email-logo.png, mail/images, mail/roi_form_submission.php, src/Concrete/Url/SeoCanonical.php, src/Concrete/Url, src/Concrete

# Concrete Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - On - In all cases.
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
7.4.30

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, enchant, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, intl, ionCube Loader, json, ldap, libxml, mbstring, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, redis, Reflection, session, SimpleXML, soap, sockets, sodium, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 60
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 258M
post_max_size - 128M
upload_max_filesize - 128M
ic24.api.max_timeout - 7
ldap.max_links - Unlimited
mbstring.regex_retry_limit - 1000000
mbstring.regex_stack_limit - 100000
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
redis.pconnect.connection_limit - 0
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
unserialize_max_depth - 4096
opcache.max_accelerated_files - 10000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.