accessing variable outside of $(document).ready() & jquery

Question

so I have a .js file that is included into my html

If I put this inside my .js file,

$(document).ready(function(){    
      var siteRoot = $('.site-root').val();
      alert(siteRoot);
});

the code would alert the value properly, but if I do this:

var siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(siteRoot);
});

it would alert undefined instead

is there a way to have something that's in $(document).ready() access variables outside it since if I put the variable inside $(document).ready() it wouldn't be accessible from other js files

Pablo Fernandez · Accepted Answer · 2011-08-13 03:00:54Z

23

You can either make it a global:

// this is the same as your example, 
// just wanted to stress that it's a part of the window (global) object
window.siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(window.siteRoot);
});

Or even better, use some kind of namespace, like this:

var MyData = {};
MyData.siteRoot = $('.site-root').val();

$(document).ready(function(){
  alert(MyData.siteRoot);
});

answered Aug 13, 2011 at 3:00

Pablo Fernandez

106k59 gold badges196 silver badges234 bronze badges

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

3 Comments

kamikaze_pilot Over a year ago

can you give me example of the namespace approach

Pablo Fernandez Over a year ago

There you go, it's just a way of putting stuff into an object really

eggmatters Over a year ago

Facepalm. Yes, this is a very elegant way to persist objects without having a long list of global declarations. Helpe much.

Dave Long · Accepted Answer · 2011-08-13 03:05:54Z

2

The best way to do this is to basically create an empty global variable or create a namespace to store the variables. Then in the document.ready just add your $('.site-root').val() to that variable.

var siteRoot = '';

$(document).ready(function(){    
      siteRoot = $('.site-root').val();
      alert(siteRoot);
});

That way you set the siteRoot variable after you know .site-root exists and it is available globally throughout the application.

answered Aug 13, 2011 at 3:05

Dave Long

9,80914 gold badges64 silver badges89 bronze badges

Comments

karim79 · Accepted Answer · 2011-08-13 03:10:54Z

2

The variable is available from within $(document).ready( since it is a global, but you are probably getting undefined because no value is available for .siteRoot before the document is ready. Just try this:

var siteRoot = "blahblah";
$(document).ready(function(){
      alert(siteRoot);
});

Now, if you expect a value to be available for that variable globally and for immediate use in other parts of your application, you will have to re-work your solution such that other parts of your application also make use of it only when the DOM is ready.

edited Aug 13, 2011 at 3:10

answered Aug 13, 2011 at 3:01

karim79

343k67 gold badges420 silver badges409 bronze badges

Comments

Brian Mains · Accepted Answer · 2011-08-13 03:05:09Z

0

Yet you can share by doing something like this:

$(document).ready(function(){
    window.siteroot = $('.site-root').val();
});

And throughout your app you could reference it via:

if (typeof(window.siteroot) !== "undefined") {
  //do this
}

You could also lazy load it:

window.get_siteRoot = function() {
   if (typeof(window.siteroot) !== "undefined")
      return window.siteroot;

   var val = $('.site-root').val();
   window.siteroot = val;
   return window.siteroot;
}

HTH.

answered Aug 13, 2011 at 3:05

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

1 Comment

Pablo Fernandez Over a year ago

the last 3 lines can be return window.siteroot = $('.site-root').val()

Collectives™ on Stack Overflow

accessing variable outside of $(document).ready() & jquery

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related