Adding data to a div called from JS

Question

I have a simple script im testing which calls a HTML file. In that html file is a div with the id "test2".

I am then trying to add content to its innerHTML but it acts like it don't exist, even though the div shows in the browser.

This is how I have approached the idea:

<script>

function call_file(file,div_id){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(div_id).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",file,true);
xmlhttp.send();

}

window.onload = function() {  

  file = 'test.html';
  div_id = 'test';
  call_file(file,div_id);
  document.getElementById('test2').innerHTML = 'Hi';
};
</script>
  <div id="test" class="outer""></div>

Content of "test.html":

<div id="test2" class="inner"></div>

Why does it not find id "test2" with this error, even though i see the div with my own eyes:

Cannot set property 'innerHTML' of null

You could also try placing the script AFTER the div. That way it only runs after the DIV has been loaded into the DOM. Another way to go is to use the $(document).ready() function in jQuery. That only calls after all of the DOM objects have been loaded. — Felix Guo
– Felix Guo, Commented Nov 19, 2012 at 23:12

abeyer · Accepted Answer · 2012-10-15 05:24:20Z

2

You're making an asynchronous call, so send() will return before the response is received and added into the DOM. Any code that depends on the received data should be in your onreadystatechange function, or somehow triggered by it, so that it won't execute until the response data has been received.

answered Oct 15, 2012 at 5:24

abeyer

7454 silver badges12 bronze badges

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

6 Comments

Sir Over a year ago

I tried this as posted in the other answer: paste.to/MTQwNzY4OA== so it would call a different function once it was ready =/ but not working

abeyer Over a year ago

Line 31 in your paste.to code is still looking for a DOM element that may not exist yet.

Sir Over a year ago

What can i add on line 31 to check the function previous completed correctly tho ?

abeyer Over a year ago

There are lots of possible ways, the easiest change to your current code would just be to move that into call_back()

Sir Over a year ago

Hmm that would limit the options for that function,, is there way to return a true/false and use a if statement to then call line 31?

|

generalhenry · Accepted Answer · 2012-10-15 05:24:00Z

1

You Cannot set it because it doesn't exist, yet. You need to wait until it's loaded.

You can do that with a callback function.

function call_file(file,div_id, callback){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(div_id).innerHTML=xmlhttp.responseText;
    return callback();
    }
  }
xmlhttp.open("GET",file,true);
xmlhttp.send();

}

window.onload = function() {  

  file = 'test.html';
  div_id = 'test';
  call_file(file,div_id, function () {
   document.getElementById('test2').innerHTML = 'Hi';
  });
};

answered Oct 15, 2012 at 5:24

generalhenry

17.3k4 gold badges51 silver badges63 bronze badges

1 Comment

Sir Over a year ago

Hmm im trying to make it bit more flexible by calling a function instead of return like this: paste.to/MTQwNzY4OA== but the issue remains what should i alter?

Collectives™ on Stack Overflow

Adding data to a div called from JS

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related