What should I do to accomplish this feature?

So I have a form that is for adding topics (tags) to videos:

<%= form_for @video, :url => {:action => "update"}, :remote => true do |f| %>
  <div class="field">
  <%= f.text_field :topic_names, :class => "topic_field" %>
  </div>
  <%= f.submit "Add Topic" %>
<% end %>

However, I want the form to initially not be there and appear only after a user clicks a link. Initially I wanted to load in the form from a different file with jQuery with this code:

$("#edit_topics_link").click(f开发者_高级运维unction(e){
        e.preventDefault();
        $(".topic_form").load("topic_form.html.erb");
        $("#edit_topics_link").hide();
    });

The problem with this is that the second I remove the form from its original view, I get this JS error: Uncaught TypeError: Cannot set property '_renderItem' of undefined

I think this might have something to do with the fact that the form is handled with an AJAX request since I pass the :remote => true option to it.

Anyway, because of this error, I'm thinking of just keeping the form in the view and hiding it, and then showing it when the user clicks the link. Is this a bad idea? If I should be loading in the form, how can I prevent that JS error?

I would go with loading it and keeping it hidden when the page loads and then show it when they click. The form will show faster than doing another request to the server, and what does it really cost you by adding it to pages where a user may not show it? probably a millisecond worth of view load and a millisecond of http data transfer?

Although I think this is a better approach its worth noting that your error is probably resulting form this:

$(".topic_form").load("topic_form.html.erb");

You should be calling a controller/action inside the load. Jquery load makes a request to the server, and it will be calling this URL: http://yoursite.com/topic_form.html.erb. I am assuming that routes does not exist. You need to render this form from your controller action.