jsLint shows "somefunction() was used before it was defined" error - javascript

I am new to jQuery and I am using jsLint on jsFiddle to test if I have errors on my code snippets. Below is the structure of the code I am using but jsLint shows that my function expandToggle() was used before it was defined:
$(document).ready(function() {
expandToggle();
});
function expandToggle() {
//dosomething
}
Can someone help me what this error means?

It means what it says. To make jsLint calm down switch your code around.
function expandToggle() {
//dosomething
}
$(document).ready(function() {
expandToggle();
});

as the error states , define the function first
function expandToggle() {
//dosomething
}
then use it
$(document).ready(function() {
expandToggle();
});

It means this:
$(document).ready(function() {
expandToggle(); });
Was before this:
function expandToggle() {
//dosomething }
To fix just rearrange them:
function expandToggle() {
//dosomething }
$(document).ready(function() {
expandToggle(); });

Related

(document).ready is a global scope?

Guys i have this function inside my script.js:
$(document).ready(function() {
function alert() {
alert('AAAAAAAA');
}
});
And i am trying to call here in my index.html:
$('.something').on('click', function() {
e.preventDefault();
alert();
});
But is showing my this error - alert is not defined.
But when i take off the document ready in the external script, the click handler will work. Why is that?
The document ready is creating a separate scope?
Using $(document).ready() creates a new function scope (note the function() after the .ready), so when you call
$(document).ready(function() {
function alert() {
alert('AAAAAAAA');
}
});
alert is only defined within the document.ready block. There are two ways to solve this issue:
Define the function outside of the document.ready block:
function customAlert() {
alert('AAAAAAAA');
}
Attach the function to the window object:
$(document).ready(function() {
window.customAlert = function() {
alert('AAAAAAAA');
};
});
Include the click event into the document.ready
Check it here http://jsfiddle.net/fbrcm45q/1/
$(document).ready(function() {
function showAlert() {
alert('AAAAAAAA');
}
$('.something').on('click', function(e) {
e.preventDefault();
showAlert();
});
});
First of all e.preventDefault is a function so you have to add braces at the end:
e.preventDefault()
Second alert is a function in javascrpt, so you need to rename your function to something else, for example:
$(document).ready(function() {
function special_alert() {
alert('AAAAAAAA');
}
});
and:
$('.something').on('click', function() {
e.preventDefault();
special_alert();
});

Why when I use $(this) in a separate function and I call it inside a .each() it doesn't work?

I was trying to make a clean jQuery code and I put all my things inside a function that I call in a "each". The problem is that nothing happens and in console doesn't appear any error.
That's an example code:
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
myFunction();
} else {
myFunction('.myOtherElement');
}
});
});
function myFunction(selector) {
if(!selector) {
$(this).html('Finish');
} else {
$(this).find(selector).html('Finish');
}
}
If I put my function content in .each it works, but in a separated function not, and I think that it should work. Why this snippet of code doesn't work?
The execution context(this) is different in this case, you can use .call() to apply it
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
myFunction.call(this);
} else {
myFunction.call(this, '.myOtherElement');
}
});
});
The problem is the this in your case is not your object inside .each, but is the window object. To bind the this as a jquery object without having to apply the context everytime you want it using call . You could define it as a jquery plugin function
(function($){
$.fn.myFunction = function (selector) {
if(!selector) {
this.html('Finish'); //notice this here refer to jquery object instead of $(this)
} else {
this.find(selector).html('Finish');
}
}
})(jQuery);
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
$(this).myFunction();
} else {
$(this).myFunction('.myOtherElement');
}
});
});

Very simple jquery custom function throws error

I have the following code:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$.addRemoveButton();
});
And I get the following error message from firebug:
TypeError: $.addRemoveButton is not a function
$.addRemoveButton();
Why and how can I fix this?
You need to define a selector, try this:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$(document).addRemoveButton();
});
Here is working jsFiddle.
You need to apply that to any DOM.
Example
jQuery Code
$(function()
{
$.fn.addRemoveButton = function() {
alert(1);
};
$('#letit').addRemoveButton();
});
HTML Code
<div id="letit"></div>
or, you can create it as a jQuery global function:
$(document).ready(function() {
$.addRemoveButton = function() { // removed the .fn
alert(1);
};
$.addRemoveButton();
});
This binds the function to the jQuery object, where you can then use it like in your original example.
See this post for the difference between jQuery.fn.method and jQuery.method

Call A Function On ScrollExtend - jQuery

How to call a function on scrollExtend. I need the code like below but its not working fine. How to make it work?
$(document).ready(
function() {
$('#scrollBox').scrollExtend(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
But the actual code of scrollExtend is like below in which i dont know how to call a function on it,
jQuery('.scroll_container').scrollExtend({
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
});
I would use the built in function onScrollBeyond in JQuery.
Else there is a setting in scrollExtend that is called beforestart and onSuccess which both are callback variables which means you could put functions there like
$('#scrollBox').scrollExtend({
'target': 'div#scroll_items',
'beforeStart': myFunction,
'onSuccess': mySecondFunction
});
Regards
As BeadFist said, you can simply use onScrollBeyond:
$('.scroll_container').onScrollBeyond(functionCall);//if the function exists already, just pass a reference too it
$('.scroll_container').onScrollBeyond(function()
{
//your function
});
Mind you, for both scrollExtend and onScrollBeyond, you need the plugin, of course.
Try using onScrollBeyond:
$(document).ready(
function() {
$('#scrollBox').onScrollBeyond(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
Try:
$('#scrollBox').scroll(function() {
if($('#scrollBox').scrollTop() + $('#scrollBox').height() == $(parentElm).height()) {
alert("bottom!");
}
});

Simple Javascript not Working - Jquery

I have the following in my page.
$(document).ready(function() {
function setTheTimeout(){
var t=setTimeout("alertMsg()",3000);
}
function alertMsg(){
alert("Hello");
}
setTheTimeout();
});
I am getting an error in Firebug alertMsg() is not defined?
Change
var t=setTimeout("alertMsg()",3000);
To
var t=setTimeout(alertMsg,3000);
See the setTimeout documentation from Mozilla Developer Network. Using a string is the same as using eval, and eval is bad!
That function only exists in the scope of the document.ready callback. Try this:
$(document).ready(function() {
function setTheTimeout(){
var t=setTimeout("alertMsg()",3000);
}
setTheTimeout();
});
function alertMsg(){
alert("Hello");
}
Take the quotes and parenthesis off the call to alertMsg (jsFiddle).
function setTheTimeout(){
var t=setTimeout(alertMsg,3000);
}
function alertMsg(){
alert("Hello");
}
setTheTimeout();
Working example: http://jsbin.com/imovuk/edit#javascript,html
Use the following approach.
$(document).ready(function() {
function setTheTimeout(){
var t=setTimeout(function () {alertMsg();},3000);
}
function alertMsg(){
alert("Hello");
}
setTheTimeout();
});
Eval is evil
It's defined a little differently than you'd expect... try this, and call back:
$(document).ready(function() {
function setTheTimeout(){
var t=setTimeout(alertMsg,3000);
}
function alertMsg(){
alert("Hello");
}
setTheTimeout();
});

Categories