Jquery plugin $.fn.myplugin not working

Question

I might be making a very simple mistake but am having some serious trouble tring to figure out why it's not working.

Here's the code: http://jsfiddle.net/HthCa/

UPDATE: this is my actual code..

<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
    $(function() {
        $('#test').customTabs();
    })
</script>

scripts.js

$.fn.customTabs = function() {
    alert($(this).html());
}

for simple jQuery plugin structure, this might help: http://stackoverflow.com/questions/11338967/issue-on-extending-functionality-on-a-simple-jquery-plugin/11339046#11339046 — Barlas Apaydin, Aug 29 '12 at 18:14

score 5 · Accepted Answer · answered Aug 29 '12 at 18:08

5

In your code:

$('#test').customTabs();

$.fn.customTabs = function() {
    alert($(this).html());
};

You're calling $.fn.customTabs() before defining it. Try instead:

$.fn.customTabs = function() {
    alert(this.html());
};

$('#test').customTabs();

Note that you do not need to apply $ to this in a plugin method, as this is already a jQuery object (the one on which the method was called).

answered Aug 29 '12 at 18:08

Frédéric Hamidi

258,201
41
486
479

Thanks! Take a look at my update of my actual code on my site. They are in the correct order.. – Noah Passalacqua Aug 29 '12 at 18:31
@Noah, I suppose you're including jQuery before `scripts.js`? Can you post the exact error message you receive? – Frédéric Hamidi Aug 29 '12 at 18:34
Yes there is a call to jquery before I call scrips.js. I'm on my iPad using the Koder app to do this and I'm not getting any errors. I set up alerts before and after to check where the error is happening and it is happening at the call to the plugin. – Noah Passalacqua Aug 29 '12 at 18:37
@Noah, sorry, I'm confused: are you `not getting any errors` or are you getting one `at the call to the plugin`? – Frédéric Hamidi Aug 29 '12 at 18:39
And these are all in the head of the HTML page – Noah Passalacqua Aug 29 '12 at 18:41
I'm not able to see if I'm getting any errors cause the app doesn't have a function that shows if there are any. But i know that there is one cause all the JavaScript works up to the point of the plugin call – Noah Passalacqua Aug 29 '12 at 18:42
Then can you put an `alert($.fn.customTabs);` in the global scope at the end of `scripts.js` and check if it runs and what it prints? – Frédéric Hamidi Aug 29 '12 at 18:46
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15983/discussion-between-noah-passalacqua-and-frederic-hamidi) – Noah Passalacqua Aug 29 '12 at 18:48

score 1 · Answer 2 · answered Aug 29 '12 at 18:07

1

Put the new function definition above where you call it.

$.fn.customTabs = function() {
    alert($(this).html());
};
$('#test').customTabs();

answered Aug 29 '12 at 18:07

John Koerner

37,428
8
84
134

score 1 · Answer 3 · answered Aug 29 '12 at 18:07

put your code like this

$.fn.customTabs = function() {
    alert($(this).html());
};
$('#test').customTabs();

or

$.fn.customTabs = function() {
    alert($(this).html());
};
$(function() { // <-- inside a dom ready
    $('#test').customTabs();
});

The cause was you tried to use a function that wasn't defined yet as stated in the console Uncaught TypeError: Object [object Object] has no method 'customTabs'

score 0 · Answer 4 · answered May 18 '20 at 12:26

0

are you sure you accessing it from jquery selector object like this

$("some selectors").myPlugin()

if you tried this

$.myPlugin() // it won't work

it won't work

answered May 18 '20 at 12:26

Basheer AL-MOMANI

14,473
9
96
92

Jquery plugin $.fn.myplugin not working

4 Answers4