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().

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().

• javascript
• jquery
• asp-mvc
• jquery-ui
• dialog

Share Improve this question Follow asked Jul 17, 2012 at 17:59 InspiredByInspiredBy 4,32066 gold badges4444 silver badges6767 bronze badges 2

• Check this post: stackoverflow./questions/168963/… – Chandu Commented Jul 17, 2012 at 18:01
• Take a look at the Javascript function above. The suggested is already implemented or am I not implementing it correctly ? – InspiredBy Commented Jul 17, 2012 at 18:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Here is what I discovered.

Everytime JQuery dialog is initialized with .dialog() as shown above the div that bees 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.

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.