Plugging in a jQuery plugin

StackOverflow https://stackoverflow.com/questions/17606678

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

Était-ce utile?

La solution

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.

Autres conseils

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/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top