Using the return data outside its function

Question

Below is the code I am working with, my goal is whenever the user clicks the button with a class name '.view_all'. I want to use the data that is returned using ajax and put it inside this line $(this).parent('div').siblings('.body_wrap').html(data); I have tried the code below but it is not working.

$('.view_all').click(function (event) {
     $.ajax({
         type: 'POST',
         url: 'ajax/return_data.php'
     }).success(function (data) {
         $(this).parent('div').siblings('.body_wrap').html(data);
     });

 });

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Barmar, Oct 06 '13 at 01:55
Note that using `.success()` was deprecated in v1.8: using `.done()` is now the recommended method. — nnnnnn, Oct 06 '13 at 02:36

PSL · Answer 1 · 2013-10-06T02:05:21.000

this is your issue, this inside the ajax success callback is not the DOM element as you thought, it is jqXHR object instead. There are many ways to get around this, simplest way is to just cache $(this) externally and use it inside the callback. try:

$('.view_all').click(function (event) {
    var $this = $(this); //Cache it here
     $.ajax({
         type: 'POST',
         url: 'ajax/return_data.php'
     }).success(function (data) {
          $this.parent('div').siblings('.body_wrap').html(data); //use it
     });

 });

Another way is to set the context property of ajax settings.

$('.view_all').click(function (event) {
     $.ajax({
         context:this, //set up context
         type: 'POST',
         url: 'ajax/return_data.php'
     }).success(function (data) {
          $(this).parent('div').siblings('.body_wrap').html(data); //Now 
     });
 });

Using the return data outside its function

1 Answers1