AJAX似乎正在缓存我的结果

Question

This is a stub from another post located here: Dynamically added content no longer opens accordion

The issue I am having is that my database result set appears to be cached in JQuery. I have added cache:false to the AJAX call but the results appear the same for any element I click on which is not correct. Every element has it's own ID and will return a different result set. I'm not sure why this is happening, but is there something that I am missing, or something else that I can check?

This is the AJAX call so far:

  ...
  success : function(data)
  {
    $('<div/>', {
      id:'modal'
    }).html(data).appendTo('body');

    $('#modal').popup({
      autoopen  : true,
    });

    $('.accordion').accordion({
        collapsible: true,
    });
  },

Basically, data carries the results being returned from my database. I have checked the results in Firebug and can see each element has the right data, but it's not rendering that way.

EDIT:

$.ajax({
url  : "modal.asp",
type : "POST",
cache: false,
data : $(this).data('cid'),
success : function(data)
{
  $('<div/>', {
    id:'modal'
  }).html(data).appendTo('body');

  $('#modal').popup({
    autoopen  : true,
  });

  $('.accordion').accordion({
    collapsible: true,
  });
}

Answer 1

The problem is that you are not removing your old #modal div(s), therefore they accumulate.

Multiple DOM elements with same id are invalid HTML and the effect of selecting $('#modal) is indeterminate. It's probably selecting the first one ... repeatedly

Answer 2

This code:

$('<div/>', {
    id:'modal'
    }).html(data).appendTo('body');

Will create a new div element with an id of modal .

$('div#modal').html(data).appendTo('body');

This would modify your modal content.

If your element doesn't exist at first call, just do this:

if($('div#modal').length > 0){
    $('div#modal').html(data).appendTo('body');
} else {
    $('<div/>', {
        id:'modal'
       }).html(data);
}

Answer 3

$.ajax({
        url  : "modal.asp",
        type : "POST",
        cache: false,
        data : $(this).data('cid'),
    success : function(data)
    {
        var newData = "<div>" + data + "</div>";
        $('.accordion').html(newData)
        $('.accordion').accordion("refresh");    

        $('#modal').modal('show');      
    }