Loading a html page with pure Javascript using AJAX

Question

There is a main page and there are links on that page. When the individual links are clicked, it is supposed to load the contents that link loads inside a div tag of the main page.

Example: MainPage.htm

<html> ... 
    <body> ... 
        <div id="MainContent"> </div> ... 
        <a href='Link1.htm'>Link 1 </a>
    ... 
</html>

Link1.htm

<script src="main.js">...
<div> other contents here </div>

When user clicks on the Link 1, the browser doesn't go to that page, instead AJAX is used to fetch that linked document and load inside #MainContent.

But, the problem is that the linked page has a table and there are table manipulation codes that needed to be run when it first loads. In fact that linked document has link to separate script and some functions that are supposed to run on window.onload.

When I simply load that Linked document using AJAX I am using following approach:

MainContent.innerHTML = XHR.responseText;

This is not helping run the window.onload codes on that linked document.

Are there any solutions or workaround for this type of problem?

Just for side note: I am just Using Javascript no other APIs like angular or jQuery or similar.

Max · Accepted Answer · 2015-07-11 03:18:53Z

2

Something is wrong with your approach. The main problem here is that the context of the new content that you are getting via ajax is not gonna be executed because the window.onload is already done.

When you refer to "table manipulation codes" I assume that there are a couple of javascript functions that needs to be executed after the content is properly appended in the html, so what you can try over here is moving those "manipulations" to a separate js file and include it in the index.html and execute the proper functions in the success callback after getting the content via ajax.

I think this should be the more accurate approach.

answered Jul 11, 2015 at 3:18

Max

211 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

Loading a html page with pure Javascript using AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related