Form display while integrating acts-as-taggable-on gem with jquery tag-it plugin

Question

Well, I am able to successfully store the tags defined by users while registering their profile through acts_as_taggable gem. The issue is with displaying and updating them. For display purpose, I have used jquery tag-it plugin.

Now, the gem gives all tags as a single string with spaces between them to the form while the plugin requires them in ordered list so that all tags can be displayed separately.

My view code:

If I use <%= f.text_field :intersted_list, class: 'form-control', id: 'intersted' %>, all tags that are retrieved are shown as a single tag.

If I use :

<ul id="intersted"> <% resource.intersted_list.each do |tag| %> <li><%= tag %></li> <% end %> </ul>

all tags are displayed seperately. But, then I am not able to add or update them as they no longer remain part of the form.

Javascript code:

$("#intersted").tagit();

All pointers will be appreciated.. Thanks in advance..

Answer 1

I suspect that there's something else going on with your code, as I believe what you have should work.

Tag-it has a few different ways you can build the widget. You can see a bunch of these in the HTML source at https://aehlke.github.io/tag-it/examples.html. Note that the page unfortunately requires jQuery through a non-HTTPS link, so you may have to disable your browser's protection against including HTTP assets on an HTTPS page.

The quickest way with a single input is to have the value of the field be a comma-separated list, such as <input name="tags" id="singleFieldTags2" value="Apple, Orange"> and then just initiate the widget without any options: $('#singleFieldTags2').tagit(); This is the "Single Input Field (2)" option on the example page. If you aren't getting the tags to display properly with this option, it sounds like your ERB isn't generating the proper HTML (though it looks like it should). You may want to confirm that you can get Tag-it to work properly on your page with static HTML on the one hand, and that you can use Ruby/ERB to generate the proper text field with comma-separated keywords (without Tag-it) on the other.

Your second way should also work, though you have to make sure it's included inside a <form> element; Tag-it will generate the <input>s for you, but they need to be in a form in order to submit them.

Answer 2

Well, I was not able to find a systematic answer to the question. But with the help of @Max's answer, I just came around with a patch to the question.

I have just added the value attribute to the tag. i.e.

<%= f.text_field :intersted_list, class: 'form-control', id: 'intersted', value: resource.intersted_list.to_s.gsub!(' ',',') %>

even though it is redundant to pass the value tag, it solved my question..