twitter bootstrap's typeahead and multiple text fields

Question

My app deals with Tags and Films entities: Many-to-Many relation. Joining entity is named as "tagazation". I want user to be able to add tags to each film in modal window. So I render hidden modal window to page for each film in the index action. The problem is in tag_id field: I have twitter bootstrap's typeaheaded textfield in each forms. All these fields share common class "tags-input". On select event in textfield fires the set_id function:

$(document).ready(function() {
function set_id(item, val, text){
    $(this).parent().children("#tagazation_tag_id").val(val);
}
$(".tags-input").typeahead({
    source: [],
    itemSelected: set_id
});
});

set_id function is supposed to change PARTICULAR hidden field in the same form as a textfield that fired that callback, but there are multiple hidden fields for tag id. That of course wouldn't be a big problem if we knew for what film exactly that set_id function is fired up.

I believe, that there is should be a "standart" way to cope with this propblem instead of my still-not-working browsing thru the DOM tree search.

Answer 1

If I understand what you're trying to do, I think the easiest solution would be to render only one hidden modal dialog to html instead of one modal dialog for every movie. Right before you open the modal, you can use javascript to set whatever text is needed to make the modal refer to the movie that was clicked.

If you only have one modal dialog, you can just refer to the hidden tag id field as $('#tagazation_tag_id') , with no confusion as to which input it refers to.