Very simple jquery custom function throws error - javascript

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

Related

Adding jQuery code to wordpress

I am trying to add the following code to Wordpress but it doesn't seem to work. The same code in a fiddle works.
Please help.
$(".box").hover(
function (e) {
$('.box').not(this).addClass('grey')
}, // over
function (e) {
$('.box').removeClass('grey')
} // out
);
You have to wrap it in the noConflict mode. Like:
jQuery(function($){
// Your jQuery code here, using the $
});
See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
So, that would boil down to
jQuery(function($){
$(".box").hover( function (e) {
$('.box').not(this).addClass('grey');
}, // over
function (e) {
$('.box').removeClass('grey');
} // out
);
});

jQuery : Object has no method for $.fn

i have this function in my js file
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
and when i call the following
jQuery(function() {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js");
jQuery('object').foobar();
});
it gives me the following
Uncaught TypeError: Object [object Object] has no method 'foobar'
i'm trying this on Rails file (*.js.erb)
I guess you are overwriting your jQuery array with that second one, try doing this:
(function($) {
$.fn.foobar = function() {
console.log(true);
};
})(jQuery);
(function($) {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", function() {
$('body').foobar();
});
})(jQuery);
working fiddle
Only run these codes in the fiddle, it runs fine. So, i guess that your code may be have some error at other place.I suggest you show more code for the question.
try something like this
<script src="jquery.js">
<script>
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
$(function(){
jQuery('object').foobar();
})
</script>

JavaScript call function not working - simple example

I am trying to call a JavaScript function (plain old JS.. not jQuery or any other library) but i am having some issues. Seems simple but maybe i am doing something silly. I have a HTML element with an ID of testbutton. Here is my JavaScript..
document.getElementById("testbutton").onClick = function() { makeRequest('test.html'); };
function makeRequest(url) {
alert('clicked');
}
It's onclick, not onClick
document.getElementById("testbutton").onclick = function() { makeRequest('test.html'); };
function makeRequest(url) {
alert('clicked');
}

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();
});

How do i create a method/function in Jquery

How do i create a method in Jquery
For example
function dosomething()
{
// do something
}
dosomething();// i can call the function this way
How can i define function like dosomething() and call them in jquery?
Thanks
In exactly the same way. jQuery is JavaScript.
function doSomething() {
// do something
}
$(function () {
doSomething(); // call doSomething on document ready.
});
You can create a basic jQuery function:
(function($)
{
$.fn.myFunc = function()
{
return this.each(function()
{
alert("do something for each element return by JQuery object");
});
};
})(jQuery);
Doing the above allows me to $("#myElement").myFunc();
Don't forget that jQuery is javascript. Javascript is not jQuery.
You can read up on jQuery plugin authoring here

Categories