Calling function inside jQuery document ready

Question

While debugging, I always use Firebug and try to call functions and show variables. However I can't when the function or variable is defined within $(document).ready.

How can I access these variables? Can I type something like a namespace, like document.ready.variableName or how can I see this?

Thank you in advance.

score 19 · Accepted Answer · answered Nov 15 '11 at 19:48

19

Global variables and functions can be created by assigning them as a property of window:

$(function(){
    window.foo = function foo() {
        // …
    }
});

foo() should be accessible anywhere after that handler is executed.

answered Nov 15 '11 at 19:48

millimoose

39,073
9
82
134

score 2 · Answer 2 · answered Nov 15 '11 at 19:43

2

How can I access these variables?

Well, you can't. Everything that you define inside an anonymous function such as what you are using in the $(document).ready is scoped to this anonymous function. It's private and not accessible to the outside.

So you could put your console.log inside the $(document).ready if you needed to inspect some private variable that is defined in its scope.

answered Nov 15 '11 at 19:43

Darin Dimitrov

1,023,142
271
3,287
2,928

Can I then, like with variables, define window functions like "window.variableName = string"? – curly_brackets Nov 15 '11 at 19:44
@KennethB, sure, it's up to you to decide the scoping of your variables. You could always write `window.foo = ...` and then inspect `window.foo` as the `window` object is public and represents the global scope. – Darin Dimitrov Nov 15 '11 at 19:45
Yeah, i know. But could I do it like wise with functions? – curly_brackets Nov 15 '11 at 19:46
@KennethB, sure, `window.foo = function() { alert('bar'); };`. And then `window.foo();`. – Darin Dimitrov Nov 15 '11 at 19:55

score 2 · Answer 3 · edited May 23 '17 at 11:54

2

That's what debugging is for. In all major browsers (including IE), you can set breakpoints in the javascript code. When this is done the script halts and you can inspect your variables.

Here some links:

edited May 23 '17 at 11:54

Community

1
1

answered Nov 15 '11 at 19:47

topek

18,609
3
35
43

To the one, who downvoted me. Please leave a comment with a reason. – topek Nov 15 '11 at 19:55
This didn't answer the question at least not directly. He wanted to know 1 - How to access variables that are declared inside the .ready() function and 2 - If not, how can he write his JavaScript so he can. These are links talking about debugging. Based on his question, he clearly knows the basics of JavaScript debugging. – arb Nov 15 '11 at 20:02
1

Correct me but I had the impression that @Kenneth B did not know how to debug with breakpoints. And sometimes it's better to offer an alternative to what the author is asking. I for my case do seldom set global variables to debug my javascript, but use extensively the debugger. This is in my opinion a far superior approach, because you can jump around in the call stack, and see, what the state in each stack is. – topek Nov 15 '11 at 20:12
@Zero21xxx: "Knows how to use Firebug as a DOM inspector / REPL" does not imply "knows about JS breakpoints". If in fact the OP does want to know how to inspect random local variables in his ready handler (which I'd argue is not a wrong way of interpreting the question), this answer suggests an entirely valid and useful approach. – millimoose Nov 15 '11 at 20:15

score 1 · Answer 4 · answered Nov 15 '11 at 19:44

It depends on how you declare the variables inside the .ready() function. If you do var x = "test", then no, they are only accessible inside the scope of the ready function. If you do something like x="test", then that is available in the global scope and you can just access it like alert(x); or alert(window.x);

You probably don't want to define variables inside the ready function though if you are trying to use them outside the ready function.

score 1 · Answer 5 · answered Nov 15 '11 at 19:49

Declare the variable in global scope:

E.g.

<script type="text/javascript">
var globalVar = null;
$(document).ready(
function() {
     globalVar = "This is the value";
}
);

function TestFunc() {
    alert(globalVar);
}
</script>

Here, if you call the TestFunc() anytime after the page load, you will see the value assigned in the ready() function.

score 0 · Answer 6 · answered Nov 15 '11 at 19:46

Not sure I fully understand the issue, but couldn't you just declare the variables outside of document ready?

var a = "bar";

$(document).ready(function(){
    a = "foo";
});

If you're using firebug, you should be able to call console.log within document ready, which might give you what you're looking for.

score 0 · Answer 7 · answered Nov 15 '11 at 19:48

If you have

var x = "foo"
$(document).ready(function(){
  alert(x); // foo
});

You can see the x variable anywhere, but if you you declare a variable y into the document ready It'll be only accessible within the document ready:

var x = "foo"
$(document).ready(function(){
  alert(x); // foo
  var y = "bar"
  alert(y); // bar
});
alert(y); // undefined

Calling function inside jQuery document ready

7 Answers7

Linked

Related