Question

I am trying to replace some main images with images from a gallery. Everything is working other than the replacement html img does not seem to be loading. For some reason the data is not loading. Any ideas? Here is what I have so far:

$(function() {
 $(".thumbs li a").each(function() {
 var $thumb = $(this);
 $thumb.click(function(event) {
  event.preventDefault();

  var image_container = $thumb.parent().parent().parent().find('.image');
  var loading = $thumb.parent().parent().parent().find('.loading');

  $.ajax({
    beforeSend: function() {
      image_container.css('display', 'none');
      loading.css('display', 'inline-block');
    },
    url: 'image.php',
    data: ({src : $(this).attr('href')}),
    dataType: 'html',
    complete: function(data) {
      loading.css('display', 'none');
      image_container.css('display', 'inline-block');
      image_container.html(data);
      $thumb.parent().siblings().removeClass('active');
      $thumb.parent().addClass('active');
    }
   });
  });
 });
});

Answer 1

Use success event instead of complete. Because first parameter of complete() is jqXHR object, not the response.