Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery - scope inside $(document).ready()?

Tags:

jquery

scope

So to stay organized, I have several javascript files, even though they all (in the end) are minified together to form one final javascript file.

Each file's contents are wrapped in:

$(document).ready(function(){
    //some javascript here
});

It seems like if I have things in separate files (in between that code) they don't have access to each other. Is this a scope issue? What can I do?

For example, in one file I had a bunch of code to create tables from data received through ajax. However, half of the file was just templates for how to display the data depending on it's types and such. I would like to have the templates in their own file.

I understand this is just a 'preference' issue and that I could just have it all in one file.

But I'm hoping to learn from this and perhaps even be able to have it 'my' way.

like image 791
Matthew Avatar asked Dec 06 '10 04:12

Matthew


People also ask

Can you put a function inside document ready?

Yes, you can do that, it's just a matter of scope. If you only need to access callMe() from within $(document). ready(function() { }) , then it's fine to put the function there, and offers some architecture benefits because you can't access the function outside of that context.

What is the purpose of $( document ready ()?

$( document ).ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Why are jQuery methods written inside a document ready event?

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.

What is difference between $( document .ready function () vs $( function ()?

The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.


2 Answers

Javascript uses functional scopes, so local variables inside a function are not visible to the outside. This is why your code can't access code from other scopes.

The ideal solution to this is create a Namespace.

var NS = {};

(function(){
  function privateFunction() { ... }
  NS.publicFunction = function(){ ... }
})();

$(document).ready(function(){
  NS.publicFunction();
});

This is also a useful pattern because it allows you to make a distinction between private & public elements.

like image 69
Adam Lassek Avatar answered Sep 24 '22 03:09

Adam Lassek


It is a scope issue. For example:

function a() {
   var myHiddenStr = 'abc';
}
alert(typeof(myHiddenStr));

You cannot access myHiddenStr outside of function a. In similar fashion, the anonymous function you use for document ready hides everything within it.

Having a global scope where you put things from different js files is not a good idea. It's probably better to have one document.ready handler and call respective functions from within it. You can then get the results out of the functions and pass them to other functions that need to use these.

like image 29
icyrock.com Avatar answered Sep 25 '22 03:09

icyrock.com