How to reset DOM after manipulation?

Question

My page contains some small wizard which I built using jQuery.

I would like to offer the user to restart/reset the wizard and start it from the beginning level.

There is anyway to do it without refreshing the page?

score 5 · Accepted Answer · answered Oct 06 '11 at 08:46

One way to achieve this would be to clone() the wizard's element tree in its initial state and store it in a global variable or in the document's data:

$(document).data("initialWizard", $("#yourWizard").clone(true));

(Note that passing true to clone() also clones element data and event handlers, which might prove handy in your case.)

Then, when you want to restore the wizard to its original state, you can do:

$(document).data("initialWizard").replaceAll("#yourWizard");

The best clean solution found on the net. Awesome! – Julian Xhokaxhiu Sep 02 '14 at 08:50 — Julian Xhokaxhiu, Sep 02 '14 at 08:50

score 1 · Answer 2 · answered Oct 06 '11 at 08:42

1

The only way to start over without refreshing the page is for you to manually return the DOM to the state it was in when the page loaded and to restore any javascript state too. You would either have to record/remember the initial state so you could go back to it or keep track of all your incremental changes so you could go back there too.

If you really want to start over, what's wrong with a refresh?

answered Oct 06 '11 at 08:42

jfriend00

683,504
96
985
979

it's also a good solution but I want to avoid of posting the page again. – Yair Nevet Oct 06 '11 at 08:44
@Yair - Why do you want to avoid reloading the page? It should load from cache and be very quick. – jfriend00 Oct 06 '11 at 08:48
@jfriend00 how would you "record" the initial state? Will you be able to overwrite the running DOM with it? Will that also fully restore the state of objects (initial event handlers, and so on) to what they were when firstly received? – Redoman Oct 03 '13 at 12:38
@jj_ - you cannot save/restore an arbitrary state of the DOM very easily (event handlers, variable state, custom properties, etc...) from pure javascript. The context of this original question assumed that you know what the original state is and you can write code to either create that from scratch via javascript or change the current objects back into the desired state. One can traverse the DOM hierarchy and save a snapshot of what the hierarchy looks like and then recreate a hierarchy like that, but only if you already know what event handlers and variable state needs to be. – jfriend00 Oct 03 '13 at 21:25
@jfriend00 I am asking because in a similar question I am trying to restore the DOM and in my case I exactly know what the original state is. Actually it couldn't be simpler: I'd like to restore the state of the "default" DOM served for a completely unscripted page! Check it here if you want: http://stackoverflow.com/questions/19149917/how-to-reset-dom-state-to-the-initial-state-when-page-was-firstly-received/19149976#19149976 – Redoman Oct 04 '13 at 13:20
also, on recording changes (mutations) to DOM state: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – Redoman Oct 04 '13 at 17:24

score 0 · Answer 3 · answered Dec 25 '15 at 18:00

Similar to the above, here's what I ended up doing. I stored the entire jQuery doc contents in a bootup() function (and ran it). The initial contents of the body was stored in an originalDOM variable. Then within I had a playAgain function that would set the contents of the body to that originalDOM, and run the entire jQuery contents again by calling the bootup() function. This would all be triggered by clicking on a button of class ".startover".

bootup();
    var bootup = function(){$(document).ready(function(){
    var originalDOM=document.body.innerHTML;
    //jQuery lines of code here
    var playAgain = function(){
        $(".startover").click(function(){
            document.body.innerHTML = originalDOM;
            bootup();
        });
    };
    playAgain();

});};

Hope that helps for anyone looking for something similar, and happy to hear feedback if there's anything I could've improved on!

How to reset DOM after manipulation?

3 Answers3

Linked