CODEWITHSUNDEEP
javascriptjqueryvariablesscope
Sideshow
Sideshow

Reputation: 1351

getting variables into ajax function JQuery

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

Upvotes: 0

Views: 213

Answers (2)

Lloyd
Lloyd

Reputation: 29668

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.

Upvotes: 1

yngccc
yngccc

Reputation: 5684

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

Upvotes: 2

Related Questions