jquery appendTo function not working inside ajax success function

Question

I'm trying to fetch some data using jQuery ajax method. here is my code:

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
//alert(screen_Id);

$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   

      result = $.parseJSON(result);
      //$('.screenList1,.screenList12').empty();   
      $.each(result, function( key, element )
      {

                    $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($(this).closest('table'));
        });

      }
   });
});

Data successfully getting from DB. and jquery 'each' function working well. but 'appendTo' function not working. Tried in many browser. But same problem in all. please help. Thank you.

When you refer to 'this' inside the .each function it reference the current item in the array you are looping through. — Sean Wessell
– Sean Wessell, Commented Aug 1, 2016 at 13:11
Hi @Sean Wessell That was issue!!. Problem is now fixed, Thank you very much Sean Wessell.. — user3706231
– user3706231, Commented Aug 1, 2016 at 13:19

Steve · Accepted Answer · 2016-08-01 13:19:03Z

2

this does not refer to what you think it does.

You should find the table element outside the ajax call, and save to a variable:

$('body').on('click','.showSlots', function() {

    var screen_Id = $(this).attr('id');
    var table = $(this).closest('table');

    $.ajax({
        url:base_url+'admin/movies/getScreenSlots',
        type:'post',
        data: {screen_Id:screen_Id},
        success: function(result){   

          result = $.parseJSON(result); 
          $.each(result, function( key, element ){
              $('...your html...').appendTo(table);
           });

        }
    });

});

answered Aug 1, 2016 at 13:19

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Pandeyz · Accepted Answer · 2016-08-01 13:12:01Z

2

Change this line:

appendTo($(this).closest('table'));

to 

appendTo($('.showSlots').closest('table'));

because $(this) do not refers to '.showSlots' as you are in another function of ajax call.

answered Aug 1, 2016 at 13:12

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

Satpal · Accepted Answer · 2016-08-01 13:16:40Z

2

The problem with your implementation is current element context this does't refer to clicked showSlots in the success handler.

Store the reference of the table in a variable and use it while appending html.

$('body').on('click', '.showSlots', function() {
    var table= $(this).closest('table'); //Store the reference
    $.ajax({
        success: function(result) {                
            $.each(result, function(key, element) { 
                $('<tr ></tr>').appendTo(table); //Use it
            });
        }
    });
});

edited Aug 1, 2016 at 13:16

answered Aug 1, 2016 at 13:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Harsh Sanghani · Accepted Answer · 2016-08-01 13:24:07Z

1

You have to take reference of object in some variable and then use it in the each loop. You can do it like folloing :-

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
$this = $(this);
//alert(screen_Id);

$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   

      result = $.parseJSON(result);
      //$('.screenList1,.screenList12').empty();   
      $.each(result, function( key, element )
      {

                    $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($this.closest('table'));
        });
      }
   });
});

It may helpful.

answered Aug 1, 2016 at 13:24

Harsh Sanghani

1,7421 gold badge15 silver badges32 bronze badges

3 Comments

Harsh Sanghani Over a year ago

I have store the reference of $(this) in variable and then use that in the success part of the AJAX within the each loop.

Harsh Sanghani Over a year ago

Can you please try this?

Harsh Sanghani Over a year ago

@user3706231 I think you just forgot about that small mistake.

RAUSHAN KUMAR · Accepted Answer · 2016-08-01 13:41:33Z

1

you should write your code like this, save the current element in a varable called "obj", then add the new created row using that variable

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
var obj=$(this);
$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   
         result = $.parseJSON(result); 
         $.each(result, function( key, element )
         {
              $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($(obj).closest('table'));
    });

  }

}); });

edited Aug 1, 2016 at 13:41

answered Aug 1, 2016 at 13:14

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

1 Comment

fdomn-m Over a year ago

Please remember to add a commentary regarding what you have changed / what should be changed.

Collectives™ on Stack Overflow

jquery appendTo function not working inside ajax success function

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related