What's wrong with my Jquery not recognizing variable value [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

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

Answer 2

Just replace this line:

$("div#test").load('compare_proc.php','id=first_id&id2= second_id');

With this:

$("div#test").load('compare_proc.php','id=' + first_id + '&id2=' + second_id);