ReferenceError: Can't find variable error - javascript

I have this code:
$(document).ready(function(){
var callPage = function(){
$.post('/pageToCall.php');
};
setInterval('callPage()', 60000);
});
and it gives me the error ReferenceError: Can't find variable: callPage. Why?

Try setInterval(callPage, 60000);.
If you pass a string to setInterval, then this string is evaluated in global scope. The problem is that callPage is local to the ready callback, it is not global.
There is hardly ever a reason to pass a string to setInterval (setTimeout). Always pass a function (to avoid exactly this kind of errors).

I suspect it's because callPage is a variable scoped to the anonymous function you're creating in the document.ready event. If you move the callPage definition outside that, does it work?

function callPage()
{
$.post('/pageToCall.php');
};
$(document).ready(function()
{
setInterval('callPage()', 60000);
});
It happens because callPage's scope is the anonymous function

Related

Single function not defined in external JavaScript file [duplicate]

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.
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.
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.
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:
http://getfirebug.com/javascript
http://www.jonathanboutelle.com/how-to-debug-javascript-in-internet-explorer
How do you launch the JavaScript debugger in Google Chrome?
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.
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.
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.
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

Not able to define function

I am writing something like
(function($){
function showAlert(){
alert('test');
}
})(jQuery);
and when I tried to run showAlert(), it's saying showAlert() is not defined.
Can anyone suggest why ?
The scope of a variable in javascript is either
the global scope
the function in which it is defined
showAlert is a variable. It's only available in the scope of the external function you wrote.
If you want to define a function for the external scope, define it in the external scope.
I suppose you're calling that function outside IEFE function.
Calling it outside won't work as it is not in global scope. The IEFE is creating a closure of which , showAlert becomes a part and not of global scope which is window
Do this:
(function($){
window.showAlert = function(){
alert('test');
}
})(jQuery);
It doesn't make sense to put a function declaration inside IEFE unless otherwise it is a jquery plugin. So, just remove it:
function showAlert(){
alert('test');
}
You're Creating A function inside a self executing anonymus function ie. $(document).ready() or $(function()....
So your function is in local scope of that function. Simply Means You cant access that in outside of that function.
So to make it accessible just make it global.
In JavaScript window is global object. So to make your function global, use that object as follows:
$(document).ready(function() {
function showAlert()() {
alert('test');
}
window.showAlert=showAlert(); //NOTE THIS, IT IS IMPORTANT.
});
Now you can access it elsewhere in your JS.
Here is working Fiddle
Hope it'll help you! cheers :)..
If you want to extend jQuery with your function just add function to jQuery object.
Like this:
(function ($) {
$.extend({
showAlert: function () {
alert('test');
}
});
}(jQuery));
Separate this code into file with name jquery.showAlert.js, include it after jquery library
and after this you can use function in this way:
$.showAlert()
Best regards.
This should work!
function showAlert(x) {
alert(x);
}
showAlert($('#anyElementId').val());
Assign the variable X for function and your alert. Then pass your element val into your function call.
Demo: http://jsfiddle.net/94ZtT/

trouble with setTimeout in javascript

$(document).ready(function () {
function EndSession() {
window.close();
};
setTimeout("EndSession()", 10000);
});
Shown above is the code in a child page opened using window.open().
The problem is after ten seconds when it tries to call EndSession, it throws an error
"Microsoft JScript runtime error: 'EndSession' is undefined"
What is going on here?
Maybe the problem of the old way "string" is that it was looking for the method in the global scope, while the method was defined inside the function used for jQuery ready.
We can explicitly pass the function we really want to, if we have a proper reference to it.
Let's try:
$(document).ready(function () {
var endSession = function() {
window.close();
};
setTimeout(endSession, 10000);
});
Although I haven't tried it, maybe even this will work:
$(document).ready(function () {
setTimeout(window.close, 10000);
});
I'm not sure if you need the jQuery ready at all too, unless you intentionally want to start counting time after the document is fully loaded (which I'd expect to be very quick for a pop-up that closes soon).
When the timeout event triggers, the code you specified is run in the global namespace.
Your code is "EndSession()", so the browser tries to find a global function with the name EndSession. There is no such function, because you defined EndSession() inside an anonymous function that you passed to $(document).ready().
So, defining EndSession as global will suffice.
function EndSession() {
window.close();
};
$(document).ready(function () {
setTimeout("EndSession()", 10000);
});
Also, functions that are not constructors should, by convention, start with lowercase letter ;)
that should be like this,
setTimeout(EndSession, 10000);
DEMO

jQuery setInterval() undefined function error

Hi I am relatively new to javascript and jQuery and while trying to create a function the runs in intervals of 100 milliseconds I encountered a problem.I seem to get in the console of firebug and error witch says that clasing() is not defined.This is my code:
$(document).ready(function() {
var prev = $("img.selected").prev();
var curent = $("img.selected");
var next = $("img.selected").next().length ? $("img.selected").next() : $("img:first");
$("img").not(":first").css("display","none");
function clasing() {
curent.removeClass("selected");
next.addClass("selected");
}
setInterval("clasing()",100);
});
What am I doing wrong here?Thank you
You have a scope problem. Your variables (prev, curent and next) are accessible inside .ready scope, such as your function clasing. But when you add this function to be called in a interval, using setInterval, this function should be in a Global scope (inside window object). Then, you should declare this function like window.clasing = function(){ ... }, but, doing this, the variables declared in .ready() scope will not be accessible running the function outside this scope, so all your variables must be in a global scope too. This should solve your problem.
However, this isn't a good programming practice, you should declare your variables inside clasing function, then they will be accessible only in function scope; And your function must be delcared outside .ready() function, and then you declare the interval inside .ready() function.
So, your code should be liek this:
function clasing(){
var prev = $("img.selected").prev();
var curent = $("img.selected");
var next = $("img.selected").next().length ? $("img.selected").next() : $("img:first");
curent.removeClass("selected");
next.addClass("selected");
}
$(document).ready(function() {
$("img").not(":first").css("display","none");
setInterval("clasing()",100); //or just setInterval(clasing,100);
});
Change setInterval("clasing()",100); to setInterval(clasing,100);
Change
setInterval("clasing()",100);
To
setInterval(function() {
clasing();
}, 100);
Right now your call to setInterval is running in global scope, but your function is defined inside your jquery function. Creating a closure will give you access to the jquery functions members.

"function is not defined" when using setTimeout?

For whatever reason, I can't get this function repeat. Once it gets the setTimeout, it spits out the "uncaught referenceerror: getnumbers is not defined (where getnumbers is just the name of the variable.
$(document).ready(function(){
var getnumbers = {
countDigit: function(){
if (sessionStorage.counter=="NaN"){
sessionStorage.counter="0";
}
else {
sessionStorage.counter=Number(sessionStorage.counter)+1;
}
$("#result").text("counter: " +sessionStorage.counter);
setTimeout("getnumbers.countDigit()",3000);
},
_init: function(){
getnumbers.countDigit();
}
};
getnumbers._init();
})
Ironically, if I refresh the page the counter works, so I know it's just getting stuck on that one line. What could I be missing?
Thanks!
setTimeout with a string argument is just a global eval. When it tries to evaluate getnumbers.countDigit(), it is evaluated in the global scope, and no longer has access to getnumbers.
Solution: Don't pass in a string. Instead, try this:
setTimeout(getnumbers.countDigit, 3000);

Categories

Resources