Sending a global variable-Collection of common programming errors

I have a piece of Javascript that forwards a users’ selected information to an external PHP file, and returns information. In the code below, you can see it sends {‘report’ : report} via POST to that file. That works fine.

Essentially I need to add another variable to be sent. It’s called ‘id’, but it’s in another function. Is there a way to make that variable global and then incorporate it so it’s sent in my code snippet? (and when will the global variable be cleared?)I can also send it via the ‘url’ attribute, and use GET in my PHP…just not sure how to implement.

$('#adminSelectReport a').live("click", function () {
    //Get id from clicked link:
    var report = $(this).attr('id');

    $.ajax({
        type: 'POST',
        url: 'getReportInfo.php',
        data: {
            'report': report
        },
        success: function (msg) {
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#adminReportInfo').html(msg);
            $('#adminReportInfo').fadeIn(400);
        }
    });
});

UPDATE: Here is the other snippet that sends ‘id’ to another page, getting information. I need to retain this ID, however, and use it on my original code.

$('#adminSelectCompany a').click(function() {
    //Get id from clicked link:
    var id = $(this).attr('id');

    $.ajax({
        type: 'POST',
        url: 'getReports.php',
        data: {'id': id},
        success: function(msg){
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#adminSelectReport').html(msg);
            $('#adminSelectReport').fadeIn(400);
           $('#adminReportInfo').fadeOut(300);

        }
});
    });

1. So it sounds like they select a Company via a link, then they select a Report via another link, and you need to remember which Company was selected.

   In order to avoid global variables, I’d probably just add a class to the selected Company link, and then fetch that element by the selected class, and grab its ID. You could use the class for styling as well if that’s needed.

   var companies = $('#adminSelectCompany a');
   
   companies.click(function () {
   
         // remove class from previously selected, and add to new one
       companies.filter('.selected').removeClass('selected');
       $(this).addClass('selected');
   
       $.ajax({
           type: 'POST',
           url: 'getReports.php',
           data: {
               'id': this.id
           },
           success: function (msg) {
               //everything echoed in your PHP-File will be in the 'msg' variable:
               $('#adminSelectReport').html(msg)
                                      .fadeIn(400);
               $('#adminReportInfo').fadeOut(300);
   
           }
       });
   });
   

   $('#adminSelectReport a').live("click", function () {
   
       $.ajax({
           type: 'POST',
           url: 'getReportInfo.php',
           data: {
               'report': this.id,
               'company': $('.selected')[0].id
           },
           success: function (msg) {
               //everything echoed in your PHP-File will be in the 'msg' variable:
               $('#adminReportInfo').html(msg);
               $('#adminReportInfo').fadeIn(400);
           }
       });
   });
   

2. You can achieve this by assigning the value as a property of JavaScripts “global” namespace called window. Simply assign the id you want to make global to window.my_id, then refer to it in the click callback.

   Note: If you’re setting the global variable in another function, remember to check for its existance in the function that will use the variable, ie: var my_id = null; if (window.my_id != undefined) { my_id = window.my_id; }

   Here’s an implementation:

   $('#adminSelectReport a').live("click", function () {
       //Get id from clicked link:
       var report = $(this).attr('id');
       var company = window.report_company_id != undefined ? window.report_company_id : null;
   
       $.ajax({
           type: 'POST',
           url: 'getReportInfo.php',
           data: {
               'report': report,
               'company': company
           },
           success: function (msg) {
               //everything echoed in your PHP-File will be in the 'msg' variable:
               $('#adminReportInfo').html(msg);
               $('#adminReportInfo').fadeIn(400);
           }
       });
   });
   

   .

   $('#adminSelectCompany a').click(function() {
       //Get id from clicked link:
       var id = $(this).attr('id');
   
       window.report_company_id = id;
   
       $.ajax({
           type: 'POST',
           url: 'getReports.php',
           data: {'id': id},
           success: function(msg){
               //everything echoed in your PHP-File will be in the 'msg' variable:
               $('#adminSelectReport').html(msg);
               $('#adminSelectReport').fadeIn(400);
              $('#adminReportInfo').fadeOut(300);
   
           }
   });
       });
   

   Lastly I would advise against global variables if possible, or at least minimize the usage by wrapping common function/purposes in objects and prefixing the names with the project name or something.

3. Change

   data: { 'report': report },
   

   To

   data{ 'report': report, 'id': YOUR ID },
   

4. Why don’t you send the second variable like that:

    data: {'report': report, 'id': your_id },
   

   edit: arf too slow!

Originally posted 2013-11-10 00:09:54.