CODEWITHSUNDEEP
jqueryajax
NaN
NaN

Reputation: 1306

AJAX appears to be caching my results

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,
  });
}

Upvotes: 0

Views: 66

Answers (3)

Eddie
Eddie

Reputation: 26844

$.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');      
    }

Upvotes: 0

MAZux
MAZux

Reputation: 961

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);
}

Upvotes: 0

Roamer-1888
Roamer-1888

Reputation: 19296

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

Upvotes: 1

Related Questions