Question

I am having variables that reference html ID’s like

<div data-role="footer" id="ftrPaxFlight">
    <h4>&#169; 2012, BT</h4>
</div>

and I am having a javascript embedded in html using jQuery which is like

<script>
  $(document).ready(function() {
            var ftrPaxFlight = $('#ftrPaxFlight');
    var butMainLogin = $('#butMainLogin');
    var butMainSetup = $('#butMainSetup'); 
       .....
      butMainLogin.bind("click", function() {
           getChangeFtr();
    });

Where getChangeFtr is a function located in an external .js file. I want to seperate the logic from UI. This file is also included under tags

function getChangeFtr(){
     alert("Ftr will be changed " + ftrPaxFlight);
 }

When the button is clicked .. the method getChangeFtr() is called, I am getting an error

TypeError – ftrPaxFlight is undefined.

Can someone guide me to the right way of passing variables to multiple javascript files using jQuery?

Answer 1

There are many ways of doing this, and there is no “right way”. You can use global variables, a global namespace/singleton or simply pass objects between functions using arguments. In your case I would use arguments:

function getChangeFtr( elem ){
    alert("Ftr will be changed " + elem);
}

And:

butMainLogin.bind("click",function() {
    getChangeFtr( ftrPaxFlight );
});