Plugging in a jQuery plugin

Question

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:

Uncaught TypeError: Object [object Object] has no method 'tokenInput'

Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>

And showing that tokeninput has loaded:

Chrome dev tools, showing jquery.tokeninput has indeed loaded

I don't really see what's wrong. Perhaps try to set up a very simple page that does nothing but implement jQuery and the plugin? Might help in identifying the issue. — Ariane, Jul 12 '13 at 02:42
check the network tab to see whether the `jquery.tokeninput.js` file is downloaded — Arun P Johny, Jul 12 '13 at 03:59

score 0 · Accepted Answer · answered Jul 12 '13 at 02:53

0

Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:

<script src="http://code.jquery.com/jquery.js"></script>

It seems having multiple versions of jQuery loaded is not a good thing to do.

answered Jul 12 '13 at 02:53

wjdp

1,468
19
36

score 0 · Answer 2 · answered Jul 12 '13 at 17:45

I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.

Then try this

<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();

j(document).ready(function () {
    j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>

Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

Plugging in a jQuery plugin

2 Answers2