JavaScript not working inside HTML Ajax loaded content

Question

I am having an issue when trying to run JavaScript inside an Ajax loaded content on a webpage. I keep getting an error "Cannot set properties of null". If I move the output of the script to the footer for example which is outside of the Ajax loaded content, the script works fine.

This is the piece of code where the ajax is loaded into on the main webpage:

<main>
    <article class="ext-content">

    </article>
    </main>

This is the JavaScript code to load the ajax content:

$('section li').click(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/'+$(this).data('content')+'.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content').html(response);
      }
    });
  });

This is part of the ajax loaded content where when a user selects the amount of items, they are shown the price of the item * the amount selected. The shopOutput is where the price will be shown on the webpage: (If I move the shopOutput outside of the Ajax content the script works fine.)

          <tr>
            <td colspan="3" class="shop-qty-select">
                <select onchange="addElements(this)">
                  <option value="0">Select aantal:</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
                <p id="shopOutput"></p>
            </td>
        </tr>

This is the JavaScript which takes the amount selected and shows the user how much the total price will be:

let shopOutput = document.getElementById("shopOutput");

const priceFractal = 10;

function addElements(selectElement) {

  let valueNumbers = selectElement.value;

  shopOutput.innerHTML = ""; 

    let yourTotal = valueNumbers * priceFractal;
    shopOutput.textContent = yourTotal;
}

Any help is much appreciated.

Like I mentioned I know that this code works if I just move the output outside of the Ajax loaded content. But when it is inside the Ajax content, I get an error "Cannot set properties of null (setting 'innerHTML')"

Does this answer your question? Why does jQuery or a DOM method such as getElementById not find the element? — Heretic Monkey
– Heretic Monkey, Commented Nov 29, 2022 at 19:13

David · Accepted Answer · 2022-11-29 19:11:05Z

2

This is running immediately when the page loads:

let shopOutput = document.getElementById("shopOutput");

Since that #shopOutput element doesn't exist yet, the shopOutput variable will of course be null. And it will always continue to be null since it's never re-assigned.

If it doesn't need to be used until the function is invoked, set it in the function instead:

function addElements(selectElement) {
  let shopOutput = document.getElementById("shopOutput");
  // the rest of the function...
}

answered Nov 29, 2022 at 19:11

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jameson Over a year ago

Do you maybe know why this might be happening: Inside the Ajax content is a Submit button which I would like to use to activate the shopOutput content. But when I click on the Submit button, the page reloads and the Ajax content disapears.

David Over a year ago

@Jameson: It sounds like you're submitting a form. You can prevent the form submission in the JavaScript even handler, or remove the <form> element entirely if you're not using it, or change the button to type="button" to prevent it from submitting the form by default. Though this is all guesses based only on that description of the problem.

Jameson Over a year ago

Yes that's correct, it was inside of a form element. Thanks for all your help @David

Thomas Skubicki · Accepted Answer · 2022-11-29 19:21:31Z

-1

Anything that deals with a reference to an element should be contained in a $.ready() so that the browser waits before attempting to get references to things that don't exist yet.

$( document ).ready(function() {
    //your code here
});

answered Nov 29, 2022 at 19:21

Thomas Skubicki

6675 silver badges12 bronze badges

1 Comment

David Over a year ago

The document's ready event doesn't "wait before attempting to get references to things that don't exist yet". It executes when the document is ready. Which will still happen before any AJAX responses have been processed.

Collectives™ on Stack Overflow

JavaScript not working inside HTML Ajax loaded content

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related