jQuery : Object has no method for $.fn - javascript

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>

Related

Obout.Interface.OboutTextBox' is null or not an object error

When I use my below JS FIDDLE, I get error as
Obout.Interface.OboutTextBox' is null or not an object in IE.
I don't know what is the issue here
I get error at line no 308 which is
Obout.Interface.OboutTextBox.prototype.applyCrossBrowserFixes = function (){}
Here is my Fiddle
Please suggest what is wrong
Ensure those function is not wrapped around by document ready. Place it only inside <script></script> :
Not like this :
<script>
// or $(document).ready(function(){
$(function(){
function navigateThroughCells(sender, key, forced) { .... }
});
</script>
But like this :
<script>
function navigateThroughCells(sender, key, forced) { .... }
</script>

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

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

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

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

I am getting an : Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function error in Chrome with my script.
<script type="text/javascript">
function showSlidingDiv() {
$("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
$("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
$("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
Does anyone know what could be wrong here?
Chrome does load other libraries that make the use of $ symbol on other purposes,
so you have to use jquery no conflict. on of the way is to change the $ symbol with jQuery
$(function(){...});
change to
jQuery(function(){...});
My guess is that jquery was not loaded before run of one of these methods, so or it's not included before run of these methods, or there's some error causing it to not load properly.
Normally this should "just work" (at least not throw that kind of error message)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function showSlidingDiv() {
$("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
$("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
$("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
No mather the time.. I found a solution that worked for me.
Instead of
$("#slidingDiv")
try
jQuery("#slidingDiv")
the other options weren´t usefull for me.
<script type="text/javascript">
var j = jQuery;
function showSlidingDiv() {
j("#slidingDiv").fadeToggle("slow", "linear");
}
function showSlidingDiv2() {
j("#slidingDiv2").fadeToggle("slow", "linear");
}
function showSlidingDiv3() {
j("#slidingDiv3").fadeToggle("slow", "linear");
}
</script>
make sure jQuery.noConflict() isn't being called. Calling it won't allow the use of the $ shorthand notation.

Categories