Ruby on Rails, Low Pro, and JQuery (through JRails)

Question

I am using JRails with Ruby on Rails so that I can simply use jQuery since I am more familiar with it. I am also attempting to use Low Pro to submit some of my forms remotely.

I am currently running into an interesting problem that has me stumped. I have added the following to my application.js file and I know that these are working correctly because I am seeing the response returned (using Firebug in Firefox):

$.ajaxSetup({
  dataType: "script"
});

$(function() {
  $('a.remote').attach(Remote.Link);
  $('form.remote').attach(Remote.Form);
});

All I have to do is add class="remote" to my links and my forms and everything works great. The dataType: "script" part makes sure that it does an eval() on the returned response text so that it can update the page correctly.

So, I have a simple link that creates a new shipment. In my new.js.rjs file I have the following:

page.insert_html :bottom, '#shipments_table',
    :partial => 'test', :locals => { :shipment => @shipment }

If I replace this with page.visual_effect :fade, '#shipments_table' it does that as you would expect. If my _test.html.erb file is fairly simple, it also works. The problem is when I attempt to add a <form> to my partial. Different problems arise depending upon the placement of the <form> tags. For example, this

<tr>
  <form>
    <td>Some Text</td> 
  </form>
</tr>

and this

<form>
  <tr> 
    <td>Some Text</td> 
  </tr>
</form>

make absolutely nothing appear. This

<form></form>
<tr> 
  <td>Some Text</td> 
</tr>

will make Some Text appear, but it loses all of my formatting. And this

<tr> 
  <td>Some Text</td> 
</tr>
<form></form>

works exactly how I need (visually speaking). However, the obvious downside to this is that I can't put my form inputs into the table columns, which basically makes the whole process useless. I can probably work around this by simply putting them all on one line inside of a <div> or something similar, but I would prefer that everything be aligned.

Any ideas as to how to solve this conundrum would be greatly appreciated :-)

Answer 1

<form> should only be placed inside the <td> or wrap the <table>:

<form><table/></form>