CODEWITHSUNDEEP
javascriptajaxdom
Supreme Dolphin
Supreme Dolphin

Reputation: 2624

Update page content using AJAX response with javascript

There have been a lot of questions about this although none has really helped.What other options for replacing entire HTML document via W3C DOM? was closer to what I want, but does not answer my questions.

I have a page. When a person clicks a link from that page to another page, the contents of the new page are fetched with AJAX. The responseText contains a whole new page. How do I go about replacing the old content with the new one?

Facebook does this flawlessly, so does Gmail. The page is updated, including its head (I noticed this when the page title changed according to the new content).

So far, I have tried to replace the innerHTML of <html> tag, but variables are carried from one page to another, which cause errors. I also tried document.write(xhr.responseText) but that caused conflicts when history.onpopstate is called, but mostly, it is very slow.

What I have not tried yet is doing document.replaceChild(newDom, document.documentElement), because I couldn't find a proper cross browser way of creating a new document object instance.

So, is there a clean way to cheat the browser that "this is a new page. You should not carry variables from the previous page to this one. Render it as completely different page from this HTML text I have here."?

Upvotes: 0

Views: 143

Answers (2)

Nitin Sali
Nitin Sali

Reputation: 337

You can do it flawlessly with angular js. even it's super easy with angular js

Upvotes: 1

user5862470
user5862470

Reputation:

Have you tried adding something like ... document.getElementById(elementID).innerHTML = ""; ..to your event handler and then appending the new info?

Upvotes: 0

Related Questions