django + tagging with jquery

Question

I want to use jQuery and create a tagging interface for users. Similar to how users in StackOverflow can add tags for the type of question they are asking. I'm getting 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 say the user has an error in another part of the form and clicks submit, the form reloads with the error message and all the tags are gone. Is there a simplar way to get tagging in Django?

[EDIT]

Trying this based on Hailwood's response 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 loads, that particular tag is not loaded? It seems like the ul tag is cleared and then there is other information loaded in it. I do not see it when I load the page.

I also tried as per below:

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

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

[EDIT 2]

Found the solution to my problem. As Hailwood suggested, programmatically we can create the li's as per below:

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

Reason it wasn't working for me was because I had for initial values:

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

Problem for me was that onload, it was all disappearing. Reason for this is because of fill. When we replace fill with add as per: $(".tags").tagit("add", data);, then it works.

Answer 1

Being the creator the tagit plugin you mentioned I guess I could help you out.

From what I can see it looks like you are using it as part of a form, and when you click submit you validate the form on the server side, if an error occurs you reload the page with the form values in tow?

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

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

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

(Please note I do not know Python, so the following is pseudo code)

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

*You could also pass the tags to the initialTags option, but that would require outputting javascript, which imo is less tidy than the above method :)

Answer 2

You should checkout jQuery Select2's support for tagging.

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