Use innerHTML to reload the center panel of the page

Question

Instead of using an iframe, I want to use the following method to refresh the center panel of the page.

I would like to get some help on the following. If there is another HTML page that I want to load into the central pane, why would this be the correct syntax?

document.getElementById( 'centerPane' ).innerHTML.??? = 'SampleHTML.htm' ; 

What attribute do I need to get after innerHTML?

Or I need to do this using some other calls.

Answer 1

If you are not using jQuery or another library with built-in ajax methods:

 var setHtml = function (element, url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { element.innerHTML = xhr.responseText; } }; xhr.timeout = 10000; xhr.open('GET', url, true); xhr.send(); }; 

Then just call the setHtml function as follows:

 setHtml(document.getElementById('centerPane'), 'SampleHTML.htm'); 

Answer 2

If you accidentally use jQuery, this might be simple:

$ ('# centerPage') load ('SampleHTML.htm') ;.

Answer 3

You must use ajax to do this. Example: http://jsfiddle.net/wGw9X/1/

You could (should) also use jQuery to simplify it and make it a more creative compiler. In jquery, this will be just one line of code.

EDIT: Updated jsfiddle link to use the best file upload example.