Save state of div into variable

Question

I'm trying to do something that might be frowned upon, but I have no idea how else to do this. What I'm trying to do is capture the "state" of a specific div with jQuery like so:

var content = $("#Layout").html();

I'm doing this because I want to "save" the div's previous content somewhere, pull some content dynamically into the same div (#Layout) and then replace the old content back when the user clicks back. Now this all kind of works, but obviously all my jQuery needs to be re-evaluated (for stuff like powerTips and so on).

My initial thinking was to just use some regex to get all the <script> tags from the content variable and do something like eval(matched);, but I don't think this is the best solution.

Does anybody have any ideas as to how this can be done efficiently and easily? If this is the only solution, does anybody have some clue what regex I can use for this? Been searching for about an hour, and found some articles, but nothing seems to be doing the trick.

Here is the full code of what I've been trying thus far.

$(".loadDialog").live('click', function(e){
    e.preventDefault();
    var url = $(this).attr('data-rel');
    $(".AjaxLoading").show();
    var Layout = $("#Layout");
    previousContent = Layout.html();
    Layout.load(url, function(response, status, xhr) {
        if (status === "error") {
            showErrorDialog();
            Layout.html(previousContent);
        } else {
            //Create a "Back" button
            var backButton = '<div class="iconSprite backButton close-dialog" style="position: relative;"><a href="javascript:" class="close-dialog">Back</a></div>';
            Layout.prepend(backButton)
        }
        $(".AjaxLoading").hide();
    });
    return false;
});

$(".close-dialog").live('click', function(e) {
    e.preventDefault();
    $("#Layout").html(previousContent);
    var scriptMatcher = /<script[\s\S]*?>[\s\S]*?<\/script>/gm;
    var match;
    while (match = scriptMatcher.exec(previousContent)) {
        eval(match);
    }
    return false;
});

Please don't hate on this, I'm no jQuery expert.

Thanks!

Depending on what your html looks like you might be able to use serialize() in order to do this. See [this](http://stackoverflow.com/questions/6992585/jquery-deserialize-form) for some ideas how you might deserialize it afterwards. — user3334690, Mar 05 '14 at 21:24
Alternatively, you might consider using separate divs. e.g. Clone the div when a button is pressed, hiding the original in the process, and load your data into the new div instead of the old one, then when the "back" is pressed, you would simply re-show the original div and discard the clone. — user3334690, Mar 05 '14 at 21:31
I don't know if serialization is going to help for the issue of the jQuery not re-evaluating? It looks to me like it's form-specific? I have a huge custom written calendar with some AJAX events and so on. Please do correct me if I'm wrong? I'm testing the clone idea now... — iLikeBreakfast, Mar 05 '14 at 21:34
You did not give much info about the contents of your div, so I figured I'd mention it at least. — user3334690, Mar 05 '14 at 21:39

score 0 · Answer 1 · answered Mar 05 '14 at 21:36

You could use the window.history API to do this in a nice way, keeping track of the history in a browser-friendly way while allowing you to change the URL that's displayed in the address bar.

The below code will keep a snapshot of the object you pass to it, accessible again when the onpopstate event of window fires:

// load a dialog window
$('.loadDialog').click(function(evt) {
  evt.preventDefault();
  window.history.pushState({
    pageHTML: $('#Layout').html()
  }, 'this title argument may be used', '/page/newpage.any_extension'); 
});

// trigger moving around in the window history
$('#back').click(function() { window.history.back(); });

// triggered when we move around in the window history
window.onpopstate = function(evt) {
  if (event.state.pageHTML) {
    $('#Layout').html(event.state.pageHTML);
  }
};

Hmmmm... Seems interesting, but the initial `window.history.pushState({...})` doesn't do anything. I may be doing something wrong, but doing it in Chrome returns undefined and inspecting the window.history, state is null. Any ideas? - No, no, it's there... This might just work! :) — iLikeBreakfast, Mar 05 '14 at 21:47

Save state of div into variable

1 Answers1