CODEWITHSUNDEEP
phpjqueryjsonajaxappend
user3706231
user3706231

Reputation: 15

jquery appendTo function not working inside ajax success function

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.

Upvotes: 1

Views: 978

Answers (5)

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

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

  }

}); });

Upvotes: 1

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

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.

Upvotes: 1

Steve
Steve

Reputation: 20469

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

        }
    });

});

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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

Upvotes: 2

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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.

Upvotes: 2

Related Questions