Topic: Cannot read property style of null after AJAX html()

esec priority asked 3 years ago

Expected behavior

Display input box as usual after calling .html() from AJAX.

Actual behavior

After inserting .form-outline input via AJAX $().html('...'), it shows input text box without border and on hover this error is 4x shown in the console (label animation works):

mdb.min.js:310 Uncaught TypeError: Cannot read property 'style' of null
at r.value (VM23257 mdb.min.js:310)
at r.value (VM23257 mdb.min.js:310)
at VM23257 mdb.min.js:310
at l (VM23257 mdb.min.js:310)
at r.value (VM23257 mdb.min.js:310)
at HTMLInputElement.<anonymous> (VM23257 mdb.min.js:310)
at HTMLDocument.e (VM23257 mdb.min.js:310)

And border isn't shown.

I've been reading about this behavior here, but fix provided in there didn't work for me. It has to do something with DOM. I think that because I'm inserting this input via .html(), the DOM is not aware of it and thus it is returning null. Is there some workaround? Thank you.

Dawid Wajszczuk staff answered 3 years ago


Try using this solution

Keep coding,

esec priority commented 3 years ago

Thank you very much! I've added these 3 lines right after .html() and now it works like a charm!

esec priority answered 3 years ago

Thank you for your response! Well, I have a main page that users can open directly. It is a multi-step registration. Every registration step is saved under a separate .PHP file (just for data passing, it was .HTML), and every time user clicks the "Next Step" button, the entered data are validated and if everything's okay, it will make an AJAX call to the file that has the contents of the next step. Then, contents of that file are being inserted into the main file, via $("#main-inner-content").html(<retrived data from AJAX call>).

The retrieved data are HTML code and some internal JS code in <script> tag. Now, this works correctly, but the problems begin when retrieved data are being displayed. So they will be inserted as said, everything will work properly. Now here it gets pretty messy. So inside that step file (retrieved data), as I mentioned, there is also some JS code. This is because, in that step, the user can add or remove slots with data. And thus, I need to handle removing and inserting slots with two input boxes. These handlers are in mentioned internal JS code, which is inside the step file (retrieved data). Also, this works like a charm, but the problem is only when an MDB .form-outline input is being inserted in that internal JS file - it does what I described.

This AJAX call handles loading from step file to main file:

        url: `blocks/steps/${nextStepSlug}.php?${$.param( passedData )}`,
        success: (result) => {
            Animation.BtnChange( ".nextStep-btn", `<i class="far fa-check-circle"></i>` );
            Animation.Do( "#main-inner-content", "fade-out-down", ()=>{
                Animation.Do( "#main-inner-content", "fade-in-up" );
                Stepper.current_step_index = nextStepIndex;
            }, 0, 800 );
        error: (e) => {

These are the mentioned handlers in the step file that are changing the contents of the slots. Here, the input boxes are being inserted (everything is being inserted and displayed correctly, besides that input boxes) and these boxes are causing problems.

function HandleAdd(slot) {
        <div class="slot-card populated" id="slot-card-${slot}">
            <span class="remove-slot-btn" onclick="HandleRemove(${slot})"><i class="fas fa-trash-alt"></i></span>
            <div class="d-flex flex-column">
                <div class="form-outline mt-2">
                    <input type="text" id="slot-${slot}-input-name" class="form-control validate-this-box"/>
                    <label class="form-label" for="slot-${slot}-input-name">Meno...</label>
                <div class="form-outline mt-2">
                    <input type="number" id="slot-${slot}-input-age" class="form-control validate-this-box"/>
                    <label class="form-label" for="slot-${slot}-input-age">Vek...</label>
    const animType = slot <= 3 ? "down" : "up";
    Animation.Do( `#slot-card-${slot}`, `fade-in-${animType}` );

function HandleRemove(slot) {
    const animType = slot <= 3 ? "up" : "down";
    Animation.Do( `#slot-card-${slot}`, `fade-out-${animType}`, () => {
            <div class="slot-card unpopulated" onclick="HandleAdd(${slot})" id="slot-card-${slot}">
                <div class="slot-add-icon"><i class="fas fa-plus"></i></div>
        Animation.Do( `#slot-card-${slot}`, "zoom-in" );
    } );

There is a lot of information and I don't think this will be discussed much. I'm just reporting this in case that someone has this problem as well, or just to let you know. Although if you can say where could be the problem, I would be really happy :)

Not so great workaround

We can use this input:

<input class="form-control rounded" placeholder="Enter name...">

And it will work, it just won't have that nice label animation... I'm just wondering if we can somehow make it work.

Michał Duszak staff answered 3 years ago

I need more code to be able to locate the issue. Your variables may be losing reference upon AJAX calls, or your scripts run before DOM is fully loaded.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: Computer
  • Browser: Google chrome
  • OS: Windows 10 Home
  • Provided sample code: Yes
  • Provided link: Yes