JQuery and Variables in Multiple JS files

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?

David Hellsing · Accepted Answer · 2012-08-16 15:36:05Z

2

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

answered Aug 16, 2012 at 15:36

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

benya Over a year ago

Hi David, I tried this method. I am getting "Object" instead of the value in ftrPaxFlight. if I use ftrPaxFlight.val() I get a very strange block of code dumpted in my alert box. any way to get the contents of the ftrpaxFlight ?

benya Over a year ago

I tried using ftrPaxFlight.innerHtml. It gives me it is undefined !

benya Over a year ago

Thank you a lot for the tip. I am just learning JQuerry and JS. I got this working by using ftrPaxFlight.val(). Cheers

awbergs · Accepted Answer · 2012-08-16 15:37:24Z

1

Your ftrPaxFlight variable is declared inside of the scope of the document ready function. You would need to declare it in the global scope in order for your global methods to access the variable.

var ftrPaxFlight;
$(document).ready(function(){
    ftrPaxFlight = $('#ftrPaxFlight');
    //....etc
}

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

answered Aug 16, 2012 at 15:37

awbergs

9524 silver badges15 bronze badges

1 Comment

benya Over a year ago

Hi Bergs, Thanks for your answer. I tried this too. It give me.. Ftr will be changed [object Object]. Any idea what must I do to get the value of ftr ? thanks

Jignesh · Accepted Answer · 2012-08-16 15:35:01Z

0

use

var ftrPaxFlight = $('#ftrPaxFlight').val()

and declare

<script>
var ftrPaxFlight;
$(document).ready(function() { .......

as global before ready function.

answered Aug 16, 2012 at 15:35

Jignesh

4716 silver badges17 bronze badges

Collectives™ on Stack Overflow

JQuery and Variables in Multiple JS files

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related