adding a form to an html page through an ajax call makes the form not work (if added otherwise it works)

Question

I'm adding an ajax form through an ajax call from a similar form. The newly added form doesn't work. I'm using rails 3 and jquery. Here is my code:

update.js.erb: /* adds a form that can be used to create a new Xyz. Submitting the added form should use the create action which executes create.js.erb */

$("#mytable tr:last").after("<%= escape_javascript(render 'shared/xyz', :object => Xyz.new)%> ");

create.js.erb: /* adds a form that can be used to edit the created xyz. Submitting the added form should use the update action which execute update.js.erb */

$("#mytable tr:last").after("<%= escape_javascript(render 'shared/xyz', :object => @xyz)%> ");

and the form shared/_xyz looks like this:

<tr>
<%= form_for(object, :remote => true) do |f| %>
<td>
    <%= f.check_box :completed  %>
</td>
<td>
    <%= f.text_field :name %>
</td>
<% end %>
</tr>

If a page contains this form (either as an update or a create action). This form will work as expected. However, if this form is added to the table through the above mentioned ajax calls, the form doesn't work. The form will be added successfully and it will appear fine. The css looks fine. But, the form will not submit anything.

Am I missing something?

Thanks

Answer 1

look at the source HTML of the form, does it look as expected? Is the action and method correct?

Answer 2

It turns out the above code works with safari, displays but doesn't work with firefox 4 beta, and doesn't even display in firefox 3.6.

Firefox doesn't like a form element inside a nested table. And it doesn't like a table inside a form either (like the above code). Firefox compensates for this in an autocorrection routine and displays it correctly if the whole page is refreshed. However with ajax the form element is added with javascript bypassing that autocorrection and hence it doesn't display correctly.

I moved away from tables and now it works

Thanks