Solution for JQuery dialogs being cached when loading partial views

Yesterday, I was working on Jquery dialog that provides an application form to edit user details.

The issue I was facing was, when I posted updated form and reopened it, it was still showing the previous details. When I checked database, the updated details were present!

This was happening with IE versions. Chrome and Firefox were able to show me updated data on form.

Below is the Jquery code that I was using to render a partial view in a dialog box.

var requestUrl = "/MyAction/PartialViewResult/";

$.get(requestUrl, function(){
$("#dialog-edit-profile").dialog({
        title: "Edit Profile",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });
        $('# dialog-edit-profile).dialog("open");
});

I looked at the code and was confused why IE is behaving strange when code is syntactically correct. 

I went for solution search on internet and found a fact that default behavior of IE is to cache the Jquery dialog content!

Considering this fact, I rewrite my code so that each request for dialog will be a new request. The solution was pretty simple, i.e. to make an ajax call with “cache: false” property.

var requestUrl = "/MyAction/PartialViewResult/";

$.ajax({
              url: requestUrl,
              cache: false,   
              success: function(result) {
                   $("#dialog-edit-profile").dialog({
                      title: "Edit Profile",
                      autoOpen: false,
                      height: 300,
                      width: 500,
                      modal: true
                  });

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

Post this fix, I tested it on IE  7,8,9 as well as Chrome and Firefox and all were rendering dialog correctly!