CODEWITHSUNDEEP
javascripthtmlajax
Ali RJ
Ali RJ

Reputation: 159

Cannot set the inner html to null while running ajax request?

Hi i am trying to have two data.html files to be inserted to two different html files (not a on click event here at all). all that i want is that my data.html structure stays the same but the template of my website which changes from time to time have the ability to insert its content by only calling the data.html through ajax xhr request. i ran the following code it only works for one of the data which is the data-two.html but for the first one nothing loads.

this is the js file

var xhr = new XMLHttpRequest();                 
xhr.onload = function() {                       
if(xhr.status === 200) {                     
document.getElementById('content').innerHTML = xhr.responseText;
document.getElementById('content1').innerHTML = xhr.responseText;
}
};

xhr.open('GET', 'data/data-one.html', true);      
xhr.open('GET', 'data/data-two.html', true);
xhr.send(null);

this is the main html which are two files actually but as a sample i include one of them( the second similar html file has only a different id of content which is content1: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript &amp; jQuery - Chapter 8: Ajax &amp; JSON - Loading HTML</title>
    <link rel="stylesheet" href="css/c08.css" />
  </head>
  <body>
  <nav>
    <ul>
      <li><a href="article-1.html">Article One</a></li>
      <li><a href="article-2.html">Article Two</a></li>
    </ul>
  </nav>
    <h2>title</h2>
    <section id="content"></section>

    <script src="js/data-html.js"></script>

  </body>
</html>

and this is the data-one.html file

<div>
<p>some constant text</p>
</div>

and this is the data-two.html file

<div>
<p>some other constant text</p>
</div>

the data html files never changes thats why i need them to be like this but as the template of the website changes, this way, i just need to call the content of data.html by only referring to their ids. when i run the code i get error that i can not set the innerHTML to null but it is funny it does work for one link but not the other one. i hope i could explain well. please shoot any suggestions. thank you

Upvotes: 0

Views: 83

Answers (1)

epascarello
epascarello

Reputation: 207511

You can not use the same XMLHttpRequest object to call two different things at the same time. Make two XMLHttpRequest objects and have their onload events do what each one needs to do.

Upvotes: 1

Related Questions