jQuery modal does not update in IE

Question

Hi,

I cannot get the following code to work in IE8, it works fine in Firefox.

A user clicks a link to add a property to their favourites list. When clicked I use jQuery to load the page into a modal. If they click the same link again the code needs to rerun so it will display "already added". In IE it just displays the original modal window and does not update.

This is very frustrating... can anyone help me solve it?

$(document).ready(function() {
  var $loading = $('loading image goes here');

    $('.add_fav_property').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).bind('click', function() {

            $dialog
                .load($link.attr('href') )
                .dialog({
                    title: $link.attr('title'),
                    width: 400,
                    height: 150
                });

            $link.click(function() {
                $dialog.dialog('open');
                return false;   
            });             
            return false;
        });
    });
});

jQuery code from http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/

Thanks, Chris.

Answer 1

I ran into a similar issue with IE and ajax loading. Basically it came down to IE8 loves to cache stuff and refused to show updated data. Change your .load function to .ajax and specify "cache: false".

http://api.jquery.com/jQuery.ajax/

Answer 2

You have a few options, this is all about IE caching the result here. You can use $.ajaxSetup() to not cache any jquery AJAX requests, like this:

$.ajaxSetup({ cache: false });

Or switch to a full $.ajax() version of .load(), like this:

$.ajax({
  cache: false,
  url: $link.attr('href'),
  dataType: 'html',
  success: function(data) {
    $dialog.html(data);
  }
});

Either of these add to your querystring _=XXXXX where The XXXXX portion is Date().getTime();. This prevents the browser from using the cached result, since it thinks you're asking for a new page.

The third option is to do that yourself, though it seems like a duplication or work, like this:

var href = $link.attr('href');
$dialog
  .load(href + (/\?/.test(href) ? "&" : "?") + "_=" + (new Date()).getTime())
  .dialog({
    title: $link.attr('title'),
    width: 400,
    height: 150
  });