How can I “reset” to its original state afte

Question

I have a DIV with a form in it. When users submit the form and it gets successfully submitted, I replace the form with a simple "everything is good now" message:

$("#some_div").html("Yeah all good mate!");

Is there a good way to "reset" the div to its "original state" as per the HTML it has arrived with? I can only think of actually doing something like this:

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);

It doesn't look very elegant - I guess there is a better solution for this, no?

Answer 1

What you're doing is not optimal. The best solution would be this:

When the form gets successfully submitted, just hide() the FORM element, and show() the message (which is initially hidden). And then, later, just show() the FORM element and hide() the message.

Answer 2

You have basically three options.

1. Remember your original markup, as you do with your originalState variable above.
2. Use AJAX to re-request the markup. You can do this easily if you have server side code using the $.ajax() method in jQuery.
3. Cause the page to reload.

Answer 3

You can use the data attribute to save the state rather than a variable

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));

Answer 4

var originalState = $("#some_div").clone(true, true); $("#some_div").replaceWith(originalState.clone(true, true));

Answer 5

In my opinion best is to use this:

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

This way you can repeatedly use this to restore your div to original state while keeping the data in "originalState" intact. Worked for me.

Answer 6

Yeah, the way you have is the way to do it. The DOM does not save the previous states of DIVs, so you need to save that yourself.