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

score 2 · Accepted Answer · answered Sep 06 '12 at 13:56

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

+1 You are missing a brace but this is a good solution I think. — Chad, Sep 06 '12 at 14:18

score 1 · Answer 2 · edited May 23 '17 at 12:04

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.

+1 If you don't need access to the variables anywhere else then a closure is the best way. JavaScript closures are quite powerful and are definitely worth researching regardless. — iambriansreed, Sep 06 '12 at 13:55
it does not seem to work. Still not finding the initial variables. — Sideshow, Sep 06 '12 at 14:10

getting variables into ajax function JQuery

2 Answers2