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

yngccc · Accepted Answer · 2012-09-06 13:56:12Z

2

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

answered Sep 6, 2012 at 13:56

yngccc

5,7042 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chad Over a year ago

+1 You are missing a brace but this is a good solution I think.

Lloyd Over a year ago

Rather that concat a string supply data as an object.

Community · Accepted Answer · 2017-05-23 12:04:47Z

1

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.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Sep 6, 2012 at 13:39

Lloyd

29.7k5 gold badges89 silver badges100 bronze badges

2 Comments

iambriansreed Over a year ago

+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.

Sideshow Over a year ago

it does not seem to work. Still not finding the initial variables.

Collectives™ on Stack Overflow

getting variables into ajax function JQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related