Does anyone know why jquery dialog is showing stale content on ajax update ?

Question

I have a series of links and when i click on a link i want to show a dialog with detail information. This detail is returned from an jquery ajax request.

I am using the following code below to show a partial result through ajax onto a jquery dialog.

Here is the jquery code:

$(document).ready(function() {

 $('a.click').live('click', function() {

    var url = '/Tracker/Info?id=' + $(this).attr("id");

    var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 600,
        width: 450,
        overlay: {
            opacity: 0.7,
            background: "black"
        },
        draggable: true,
        resizeable: true,
        open: function() {
            //display correct dialog content
            $("#dialogDiv").load(url);
        }
    };

    $("#dialogDiv").dialog(dialogOpts); //end dialog
    $("#dialogDiv").dialog("open");

});

});

Here is my controller action code:

    public ActionResult Info(int id)
    {
        return PartialView("LabelPartialView", _Repository.GetItem(id));            
    }

Here is the issue:

When i click this the first time (lets say i send id = 1234) it works fine.
When i click on another item (lets say i send id = 4567) it shows the content from 1234 still.
Which i click this second item again (again its 4567), then it will show the content from 4567.

Does anyone know why it might not be refreshed the first time? Is this a timing issue?

Answer 1

You need to make sure that you are fully destroying your #dialogDiv after you show each modal.

I've ran into the same issue when reusing the same div for each dialog you want to show.

I forget off the top of my head, but when defining your dialogOpts add something like this:

close: function() { $("#dialogDiv").dialog("destroy"); },

Here is the jQuery API reference: http://docs.jquery.com/UI/Dialog

Hope this provides some insight!

• Jesse

Answer 2

I imagine it has to do with how you are creating the dialog multiple times. You might want to try creating the dialog outside of the live. Then just change the dialog content as needed and reopen the dialog. What I normally do in this situation is put a loading message, open the dialog and then start the ajax call to replace the contents. Something like this.

$(function () {

  $("#dialogDiv").dialog({
      modal: true,      
      bgiframe: true,      
      autoOpen: false,      
      height: 600,      
      width: 450,      
      overlay: {      
        opacity: 0.7,      
        background: "black"      
      },      
      draggable: true,      
      resizeable: true
  });

  $('a.click').live('click', function() {      
    var url = '/Tracker/Info?id=' + $(this).attr("id");      
    $("#dialogDiv")
      .html('Loading')
      .dialog("open")
      .load(url);      
  });

});

Answer 3

i found the solution here using the .one() method