Question

I have made a Web page using jquery and php where all files are used in a modular style. Now I have two JavaScript files which must communicate with each other. One Script generates a variable (id_menu_bar) which contains a number. I want that this variable gets transported to the second JavaScript and is used there.

How do I make that?

Here the Script

menu_bar.js

$(document).ready(function() {

function wrapper_action(id_menu_bar) {
  $(".wrapper").animate({height: "0px"});
  $("#changer p").click(function() {
    $(".wrapper").animate({height: "300px"});
  });
}

  $("#select_place li").live("click", function() {
  var wrapper_id = $(".wrapper").attr("id");
  var id_place = this.id;

  if (wrapper_id != "place")
    {
    $("#select_level li").remove();
      $("#select_building").load("menu_bar/menu_bar_building.php?placeitem="+id_place, function() {
        $("#select_building li").click(function() {
        var id_building = this.id;

          if (wrapper_id != "building")
            {
            $("#select_level").load("menu_bar/menu_bar_level.php?buildingitem="+id_building, function() {
              $("#select_level li").click(function() {
                var id_level = this.id;
                wrapper_action(id_level);
              });
            });

            }
          else if (wrapper_id == "building")
            {wrapper_action(id_building);}
        });
      });

      }
   else if (wrapper_id == "place")
    {wrapper_action(id_place);}
   });

}); 

Answer 1

if the variable id_menu_bar is in global scope then it can be used by another script on the page.

jQuery’s $.data() is also good for storing data against elements and means that you do not need to use a global variable and pollute the global namespace.

EDIT:

In response to your comment, there is a difference in how you declare variables that determines how they are scoped in JavaScript.

Global Variables

Outside of a function declaring a variable like

var myVariable;

or

myVariable;

will make no difference – both variables will have global scope. In fact, the second approach will give a variable global scope, even inside of a function. For example

function firstFunction() {
    // Local scope i.e. scoped to firstFunction
    var localVariable; 

    // Global scope i.e. available to all other JavaScript code running
    // in the page
    globalVariable = "I'm not really hiding";
}

function secondFunction() {
    // I can access globalVariable here but only after
    // firstFunction has been executed
    alert(globalVariable); // alerts I'm not really hiding
}

The difference in this scenario is that the alert will fail and not show the value for globalVariable upon execution of secondFunction() until firstFunction() has been executed, since this is where the variable is declared. Had the variable been declared outside of any function, the alert would have succeeded and shown the value of globalVariable

Using jQuery.data()

Using this command, you can store data in a cache object for an element. I would recommend looking at the source to see how this achieved, but it is pretty neat. Consider

  function firstFunction() {
      $.data(document,"myVariable","I'm not really hiding"); 
      globalVariable = "I'm not hiding";
  }

  function secondFunction() {
      // alerts "I'm not really hiding" but only if firstFunction is executed before
      // secondFunction
      alert($.data(document, "myVariable"));

      // alerts "I'm not hiding" but only if firstFunction is executed before
      // secondFunction
      alert(globalVariable);
  }

in this scenario, a string value "I'm not really hiding" is stored against the document object using the key string myVariable in firstFunction. This value can then be retrieved from the cache object anywhere else in the script. Attempting to read a value from the cache object without having first set it will yield undefined.

Take a look at this Working Demo for more details.

For reasons not to use Global Variables, check out this article.