How can I make the jQuery .load tell the browser to get a “new” version of my page?

Question

I have the following:

function openClick(e) {
    e.preventDefault();
    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true
        })
        .load(this.href);
};

When it runs it loads what looks like an older version of my page and it never seems to call the controller. Could it be returning a cached version? I tried different browsers and get the same?

Answer 1

Try loading this.href?r='+Math.random()*999 . The random query string will make the browser ignore any cached copies and get a fresh one.

Answer 2

Try adding a timestamp to your request. Should disable the caching. If it does not solve the problem, I guess your caching lays somewhere else

function openClick(e) {
    e.preventDefault();
    var timestamp = Math.round(new Date().getTime() / 1000);
    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true
        })
        .load(this.href + '?_=' + timestamp);
};