Django + tagging with jquery

Question

I want to use jQuery and create a tag interface for users. Similar to how users in StackOverflow can add tags for the type of question they ask. I get it to work using jQuery and tagit:

http://jquery.webspirited.com/2011/02/jquery-tagit-a-jquery-tagging-plugin/

New location for the library:

https://github.com/hailwood/jQuery-Tagit

The problem is that the user has an error in another part of the form and clicks the submit button, the form reloads with an error message, and all the tags disappear. Is there an easy way to get tagging in Django?

[EDIT]

Trying to do this based on Hailwood's answer below ...

<ul name="event_tag" class="tags"> <li class="tagit-choice" tagvalue="3"> Dog <a class="tagit-close">x</a> </li> </ul> 

However, when I load the page load, does this particular tag not load? It seems that the ul tag is cleared and then other information is loaded into it. I do not see it when I load the page.

I also tried as described below:

 <ul name="event_tag" class="tags"> <li data-value="3">Dog</li> </ul> 

When I try to do this, it appears for a second and then disappears ...

[EDIT 2]

Found a solution to my problem. As Halewood suggested, programmatically we can create li , as shown below:

 <ul name="event_tag" class="tags"> <li data-value="3">Dog</li> </ul> 

The reason it didn't work for me was because I had initial values:

 $.getJSON("ajaxrequest.json", function(data) { $(".tags").tagit("fill", data); }); 

The problem for me was that it was loading, and it all disappeared. The reason for this is due to fill . When we replace fill with add as follows: $(".tags").tagit("add", data); then it works.

Answer 1

As the creator of the tagit plugin you mentioned, I assume I can help you.

From what I see, it looks like you are using it as part of the form, and when you click the Submit button, you check the form on the server side, if an error occurs, do you reload the page using the values ​​of the form in tow?

What I suggest you do is enable the hidden selection option ( select: true ).

When the form is submitted, you will receive a list of selected tags.

Then, if you reload the page, just load the tags back into the list as <li> s.

(Note that I do not know Python, so the following pseudo-code)

 if(form_values.tags) for(tag in form_values.tags) print '<li data-value=" '+tag.value+' "> '+tag.label+' </li>'; endfor; endif; 

* You can also pass tags to the initialTags parameter, but for this you need to output javascript, which imo will be less accurate than the above method :)

Answer 2

You should check jQuery Select2 support for tags.

http://ivaynberg.github.com/select2/#tags