0

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."?

Community
  • 1
  • 1
Supreme Dolphin
  • 2,248
  • 1
  • 14
  • 23
  • 1
    i thing your are looking for an SPA ( single page application ) system. like emberjs,angular and ..., with this framework you could do anything on your question even more and better. Gmail and facebook use SPA framework too. – Shayan Feb 21 '16 at 06:32
  • *"this is a new page. You should not carry variables from the previous page to this one."* - if you want to replace the whole page including variables, why are you using Ajax? Just use a traditional link without JS. (Or a form submit if you have to pass data to the next page.) – nnnnnn Feb 21 '16 at 07:37

2 Answers2

1

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

Nitin Sali
  • 339
  • 1
  • 9
  • That product name again? Why, Angular JS. For all your coding needs. – nnnnnn Feb 21 '16 at 07:35
  • This is exactly what I have been looking for, although *exactly* isn't the word. Using Angular means I have to dump PHP rending of the view. Well, for my project, I cannot leave PHP rendering just yet. – Supreme Dolphin Feb 21 '16 at 09:04
0

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