Twenty One Child Theme script.js error

[Jon87]

Hi Guys,

I have updated to 8.1 and decided to move over to Twenty One theme. I've created a child theme for my front end templates, and almost everything works perfectly.

The one problem I'm having is that script.js/script.min.js throw out a load of errors that seem to be preventing jquery from executing at all. I've checked and it only happens within the child theme. I have tried copying just the JS files across, and even tried copying across every theme file besides the template files I have edited but to no avail.

The errors given are;

main.js:501 Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:501
scripts.js?v=eafa76:21193 Uncaught TypeError: Cannot set property 'setInputError' of undefined
at HTMLDocument.<anonymous> (scripts.js?v=eafa76:21193)
at fire (scripts.js?v=eafa76:3232)
at Object.fireWith [as resolveWith] (scripts.js?v=eafa76:3362)
at Function.ready (scripts.js?v=eafa76:3582)
at HTMLDocument.completed (scripts.js?v=eafa76:3617)

A page that they can be found on for example is;

https://host-gb.com/cart.php?a=add&pid=9&promocode=pennymonth

Any suggestions you may have would be greatly appreciated.

Kind Regards,

Jon

[linux4me]

I was using the Twenty One theme as well, and discovered from a client that it was not possible to add an address through the client UI to update a credit card.

I am able to reproduce the issue on another client account using the procedure below. I've tested on both Firefox and Chromium with a clear cache. The error appears in both browsers.

To reproduce the problem, log in to the client area and go Billing -> Payment Methods, click Edit for an existing credit card, then Add a New Address. Fill out the form, and then click Save Changes. When you click Save Changes, nothing happens. The dialog stays open, and in the console, the following javascript error appears:

Uncaught TypeError: No method named "destroy"
    _jQueryInterface https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:6
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    _jQueryInterface https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:6
    clearFieldError https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    clearErrors https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    clearErrors https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    init https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    dispatch https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:3
    handle https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    add https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    C https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    C https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    on https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:3
    init https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    initAll https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    each https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    initAll https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:7
    <anonymous> https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:8
    l https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    fireWith https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    ready https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    s https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    promise https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    <anonymous> https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:2
    <anonymous> https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
    <anonymous> https://whmcs.mydomain.com/templates/twenty-one/js/scripts.min.js?v=7bf6c8:1
scripts.min.js:6:19698

I submitted a support ticket, and got this response:

Quote

We are aware of this issue and Case #CORE-16119 is open with our developers in order to have this reviewed for future releases. I checked and it appears that the issue will be resolved in the next update. Till then, you can switch to the Six template as the issue only affects the new Twenty One template.

Based on that, I recommend you switch to the Six template, as even if you fix the issue you're having with Twenty One, you're still going to have problems until the next update.