CODEWITHSUNDEEP
jqueryasp.net-mvc-3razorjquery-ui-dialog
John Livermore
John Livermore

Reputation: 31313

jquery ui dialog caching on form load

With ASP.NET MVC3 (Razor) I have a simple page that loads a jQuery UI dialog.

@{
    ViewBag.Title = "Home Page";
}
<h2>yo</h2>
<div id="fileUpload">
</div>
<button id="button2">
    Upload file
</button>
<script type="text/javascript">
    $(document).ready(function () {
        $('#button2').click(function () {
            $fileUpload = $('#fileUpload');
            $fileUpload.dialog({
                minWidth: 500,
                minHeight: 100,
                title: 'Upload File(s)',
                autoOpen: true,
                buttons: {
                    'Upload': function () {
                        $('form').submit();
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                },
                open: function (event, ui) {
                    $(this).load('@Url.Action(MVC.FileUpload.FileUpload())');
                },
                close: function (event, ui) {
                    $(this).dialog('destroy');
                    //$(this).remove();
                },
                dialogClass: 'no-close',
                closeText: '',
                modal: true
            });
        });
    });
</script>

Notice on open() the form makes a call to a controller method. It returns a PartialView and looks like this...

public virtual ActionResult FileUpload() { return new PartialViewResult(); }

The problem I am having is IE is caching the call to the partial view. If I update the partial view then it does not load until I clear the browser cache.

I have tried the 'destroy' method on close() as well as .remove(). Neither have an effect. I have also confirmed open() is called each time #button2 is clicked.

Any ideas on how to keep the dialog contents from getting cached?

Upvotes: 1

Views: 5623

Answers (4)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

You could replace:

 $(this).load('@Url.Action(MVC.FileUpload.FileUpload())');

with:

$.ajax({
    url: '@Url.Action(MVC.FileUpload.FileUpload())',
    cache: false,
    context: this,
    success: function(result) {
        $(this).html(result);
    }
});

Upvotes: 2

Jake Feasel
Jake Feasel

Reputation: 16955

You can add this to your global js code to prevent IE from ever caching ajax request:

$.ajaxSetup({ cache: false });

Upvotes: 5

mithun_daa
mithun_daa

Reputation: 4384

Add the attribute [NoCache] To your controller action to fix this issue. This happens only in IE

Upvotes: 1

Joshua
Joshua

Reputation: 3603

Append a random parameter, or timestamp, to the URL to load. For example:

var timestamp = new Date().getTime();
$(this).load('@Url.Action(MVC.FileUpload.FileUpload())'+'&t='+timestamp);

Upvotes: 0

Related Questions