What's wrong with my Jquery not recognizing variable value

Question

So I am using the load function to pass data to another file called compare_proc.php.. I created variable that stores the data to be passed , which are numbers.. when I alert those variables , the data is there, However, when I pass the data via the load function, the content of the variables get lost.. Below is the relevant code

<script type="text/javascript">

        jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel();
          $("a.inline").colorbox({iframe:true, width:"80%", height:"80%"});
              $("#opposition a").click(function(e) {
              var first_id  = $(this).attr('id'); // value of first_id is 10 
              var second_id = $("h1").attr('id'); // value of second_id is 20
              $("div#test").load('compare_proc.php','id=first_id&id2= second_id');
              e.preventDefault();
                });
    });

However, load function passes first_id instead of 10 to id and second_id instead of 20 to id2.. where I am going wrong?

Answer 1

You need to do string concatenation, since first_id and second_id are variables you need to create a concatenated string like 'id=' + first_id + '&id2=' + second_id as the parameter

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    $("a.inline").colorbox({iframe:true, width:"80%", height:"80%"});

    $("#opposition a").click(function(e) {
        var first_id  = $(this).attr('id'); // value of first_id is 10 
        var second_id = $("h1").attr('id'); // value of second_id is 20
        $("div#test").load('compare_proc.php','id=' + first_id + '&id2=' + second_id);
        e.preventDefault();
    });
});

Another option is to pass the data as an object instead of string as given below, I prefer this method

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    $("a.inline").colorbox({iframe:true, width:"80%", height:"80%"});

    $("#opposition a").click(function(e) {
        var first_id  = $(this).attr('id'); // value of first_id is 10 
        var second_id = $("h1").attr('id'); // value of second_id is 20
        $("div#test").load('compare_proc.php',{
            id:first_id, 
            id2:second_id
        });
        e.preventDefault();
    });
});