CODEWITHSUNDEEP
javascriptjqueryjquery-uitag-it
Ty Bailey
Ty Bailey

Reputation: 2432

jQuery Tagit! Not working

I am using the jQuery tagit! library to create a user "Skills" input form. I figured this would be an extremely quick and simple setup like most jQuery libraries, however I am having a tremendous amount of trouble with this one. I tried following the source code on the example below, but I cannot get it to work even with the direct source code.

I am using the script found here: https://github.com/aehlke/tag-it/blob/master/README.markdown

Here is the javascript that is initializing the tag-it library in the header:

$(function() {
    $('#skills').tagit({     
        singleField: true,
    });
});

And here is the <ul> element that is supposed to turn into an input field when the tag-it.js library is called:

<ul id="skills"></ul>

I am including all these files to get this to work: 

<link rel="stylesheet" href="styles/tag-it.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/tag-it.js"></script>

All the files are being called correctly and I am not receiving any errors. There is NO input form where the <ul> tags are unless I create one manually

Does anyone have a clue as to why this isn't working? Do I need to manually add an input field and assign a specific ID or class to it?

EDIT: This has been solved. The code posted is all 100% correct, I had an error in the jquery selector before tag-it initialization.

Upvotes: 2

Views: 3155

Answers (2)

Spa Vasupol Chatmethakul
Spa Vasupol Chatmethakul

Reputation: 31

This was a problem for me, my template had a script linking to a local jquery. So when i copy the jqueryui and jquery link from tagit, it overlaps. Geting rid of the local jquery did it for me.

Upvotes: 1

Javier Brooklyn
Javier Brooklyn

Reputation: 634

I guess the problem is with that comma

you have put

singleField: true,

but it has to be

singleField: true

If you have two options like

tagSource: availableTags,
singleField: true

then only the first option will have the comma the second or the last option (in case there are more than 2 options) will not have a comma

Upvotes: 0

Related Questions