user3706231 user3706231 - 4 months ago 48
JSON Question

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.

Answer

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

        }
    });

});
Comments