getting variables into ajax function JQuery

Question

I have an AJAX function triggerd by a click which basically copies one table row into another table.

The problem I am having is that I get the required variables from the original table row before the AJAX request however these variables don't seem to be passed to the success function and they come out as undefined .

Is there anyway to pass the variables to the function ?

$('.addfile_popup').on('click', '.add2_fl', function(){
    var file_id1=$(this).data('file');
    var id=$('.useri').val();
    var file_name1=$(this).closest('tr').children('td:first').text();
    var upload_date1=$(this).closest('tr').children('td').eq(1).text();
    var upload_desc=$(this).closest('tr').children('td').eq(2).text();
    var job_idx=$(this).data('jid');
    //write to appointment database
    var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;
    $.ajax({
        type:"POST",
        url:"admin_includes/prepend_files.php",
        data:data,
        success:function(html){
            var ups='';
            ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';
            $(ups).prependTo('.app_table');
        }
    });
});

Answer 1

$('.addfile_popup').on('click', '.add2_fl', function(){
    var file_id1=$(this).data('file');
    var id=$('.useri').val();
    var file_name1=$(this).closest('tr').children('td:first').text();
    var upload_date1=$(this).closest('tr').children('td').eq(1).text();
    var upload_desc=$(this).closest('tr').children('td').eq(2).text();
    var job_idx=$(this).data('jid');
    //write to appointment database
    var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;

    // closure function that wrap your variables
    function success(file_id1, file_name1, upload_date1 ... ) {
         return function(html) {  
            var ups='';
            ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';
            $(ups).prependTo('.app_table');
    }

    $.ajax({
        type:"POST",
        url:"admin_includes/prepend_files.php",
        data:data,
        success: success(file_id1, file_name1, upload_date1 ...)
    });
});

Answer 2

You need to use a closure. You can read about them here: How do JavaScript closures work?

This should work:

$('.addfile_popup').on('click', '.add2_fl', function(){
  var me = this;

  (function() {
    var file_id1=$(me).data('file');
    var id=$('.useri').val();
    var file_name1=$(me).closest('tr').children('td:first').text();
    var upload_date1=$(me).closest('tr').children('td').eq(1).text();
    var upload_desc=$(me).closest('tr').children('td').eq(2).text();
    var job_idx=$(me).data('jid');

    //write to appointment database
    var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;

$.ajax({
    type:"POST",
    url:"admin_includes/prepend_files.php",
    data: {
      job_id: job_idx,
      file_id: file_id1,
      user_id: id
    },  
    success:function(html){
        var ups='';
        ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';

    $(ups).prependTo('.app_table');
    }
    });//end ajax

    })();

});

Note also I've changed how you pass data to the AJAX call.