row.child() load from ajax

polariman

Having trouble finding an example of loading a child row via ajax.

function callAfunction(id){
$.ajax ({
      type: "POST",
      url: "ajax/path.php",
      data: {id:id},
      cache: false,
      success: function(data){
         return data;
      }
   });
}

$("#table tbody").on('click','td',function(){
    var cell_clicked = $(this).index();
    var row_clicked = $(this).closest('tr');
    var id = table.row(row_clicked).data()[10];
    if(cell_clicked===0){
        var row = table.row(row_clicked);
        if(row.child.isShown()){
            row.child.hide();
            row_clicked.find('.plusminus').removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
        }else{
            row.child(callAfunction(id)).show();
            row_clicked.find('.plusminus').removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
        }
    }
    return false;
});

Getting an undefined error.

Does a div need to be created first? Like row.child(div here).show(). If so, what is the best what to load the data from the ajax call into the row.child() div?

allan

You are returning data from the success function - not from the callAfunction function (which is currently returning undefined).

Save data into a variable and return that variable from the callAfunction function.

Allan