Jquery-ui dialog iframe + back button = disaster

I don't know where to begin this one and the chances of getting a fix are probably 1 in 1,000,000 but here is the problem: I have elements on a page that have classes of "Edit" or "Add". They also each have a custom attribute called "edit" or "add" which I use to pass an ID. When you click one of these, I use the following functions to open a jquery-ui dialog with an iframe with the src based on the ID mentioned above. The problem is, say I'm on PAGE1 and I click EDIT123. I then go to PAGE2 and click EDIT234. Everything works normally. BUT, when I hit the back button, which takes me back to PAGE1, no matter what I click it always opens EDIT123. The weird thing is if you set breakpoints you can clearly see that the URL and corresponding iframesrc are correct. It always opens the LAST thing you clicked on PAGE1, regardless of how many things it correctly opened when PAGE1 was initially loaded or when you were on PAGE2.

EDIT: I forgot to mention, if you hit back and then click an ADD button, it STILL opens the last EDIT page...

<script language="javascript" type="text/javascript">

$(document).ready(function () {


    var date = new Date();

    //catch a click on an item with the class "edit" open modal div.
    $('.Edit').live('click', function () {
        var thing = $(this).attr('edit')
        var date = new Date();
        var url = 'edit/' + thing + '.aspx?appid=' + $('.lblAppID').html() + '&value=' + $(this).attr('entityid') + '&' + date.getTime();
        var iframesrc = $('<iframe width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" src="' + url + '" scrolling="auto" title="Dialog Title"></iframe>');
        $('#modalDiv').dialo开发者_StackOverflow社区g("option", "title", "Loading...").empty().append(iframesrc).dialog('open');
        return false;
    });


    //catch a click on an item with the class "add" open modal div.
    $('.add').live('click', function () {
        var thing = $(this).attr('add')
        var url = 'add/' + thing + '.aspx?appid=' + $('.lblAppID').html() + '&' + date.getTime();
        var iframesrc = $('<iframe width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" src="' + url + '" scrolling="auto" title="Dialog Title"></iframe>');
        $('#modalDiv').dialog("option", "title", "Loading...").empty().append(iframesrc).dialog('open');
        iframesrc.history.next();
        return false;
    });

});
</script>

<div id="modalDiv"></div>

EDIT2 I just set the following code in my master page codebehind to disable all caching. When I click back it is noticable that it actually reloads everything... but the issue still persists. :batshitcrazy:

    HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1))
    HttpContext.Current.Response.Cache.SetValidUntilExpires(False)
    HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches)
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache)
    HttpContext.Current.Response.Cache.SetNoStore()

EDIT3 Also added this to the main js file

$(window).bind('unload', function () {
    jQuery.cache = {};
    alert('clearing cache');
});

Each time I navigate away from a page, hitting back or forward, I do get the alert. Issue still persists.

I'm not sure why you need an Iframe when there's AJAX, but this sounds like a history management issue.

This may help: Current state of Jquery history/back-button plugins?

I gave the iframe an ID of the current timestamp and now it works fine... not sure why I'm having all these weird caching issues.