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