1

Imagine a simple list of users with "edit" links. Clicking "Edit" opens up a dialog box with details for the selected user. The "Details" popup is a partial view.

I have an issue with Partial Views being cached when opening them in JQuery dialog windows.

My partial view( Notice the OutputCache attribute as one of the things I tried to solve the caching issue):

    [HttpGet]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public PartialViewResult EditUser(int id)
    {
     var userList = userRepository.GetByRole(id);

     return PartialView("EditUser",userList);
    }

The PartialView above is requested and loaded from the following Javascript function:

function editUserOpen(id) {

    $.ajaxSetup({  ///// Another thing I tried to solve caching
        cache: false
    });

    var url = "/User/PartialViewResult/" + id;

    $('#user-wrap').empty().load(url, function () {

    $("#dialog-edit-user").dialog({
        title: "Edit User",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });

        $('#dialog-edit-user').dialog("open");
    });
}

As shown above "dialog-edit-user" ( along with "dialog-add-user" and "dialog-delete-user" ) are located inside of the "user-wrap" Div in the DOM.

Functionally everything works but when I open a dialog, cancel and then try opening dialogs for other users, until the page is refreshed the dialogs will always contain info from the initially displayed dialog. I figured its a caching issue but I ran out of ways to solve it.

I would like to stay away from $.ajax({ cache:false; }).html(content) if possible. It seems to me that it's a lot slower than .load().

InspiredBy
  • 4,271
  • 6
  • 40
  • 67
  • Check this post: http://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached – Chandu Jul 17 '12 at 18:01
  • Take a look at the Javascript function above. The suggested is already implemented or am I not implementing it correctly ? – InspiredBy Jul 17 '12 at 18:03

2 Answers2

6

Here is what I discovered.

Everytime JQuery dialog is initialized with .dialog() as shown above the div that becomes a pop up is being taken out of the DOM and moved the the bottom of the page. Dialog Div cannot be a child of another Div. In my example it was:

<div id="user-wrap">
  <div id="dialog-edit-user">  /// <--- Jquery dialog div

  </div>
</div>

Dialog cannot be wrapped in other divs.

After the first click, when the dialog is displayed JQuery simply starts accumulating duplicate Divs at the bottom of the page. $("#").dialog('open') opens the very top DIV of accumulated duplicated every time making the programmer/user think it's a caching issue.

So the solution is to either remove the div created by JQuery from the bottom of the page on .dialog({close: } event or to move it back up to the parent wrapper DIV with JQuery .append() / .appendTo() functions.

Hope this helps to a next programmer who runs into similar issue.

InspiredBy
  • 4,271
  • 6
  • 40
  • 67
0

Add some random hash to the URL to keep it unique:

...
var url = "/User/PartialViewResult/" + id + "?t=" + new Date().getTime();
...

This will always load new content.

Grzegorz Kaczan
  • 21,186
  • 3
  • 19
  • 17
  • Doesn't work unfortunately. I can see in Fiddler a new value is being added to the URL and the break point within the Partial View is being hit every time but when rendering page the same page is displayed over and over again until the page is refreshed. – InspiredBy Jul 17 '12 at 18:16
  • You are not changing $.dialog content anywhere. You need to fill $("#dialog-edit-user") with data that came from ajax and then create a dialog on it. Right now you are putting data into $('#user-wrap'), dialog does not change, thats why it doesnt work. – Grzegorz Kaczan Jul 17 '12 at 21:19