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

Question

Hello peoples,

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>

Answer 2

If you are going to use tables you will need to do as tom said and wrap the table element with the form element, or put it inside the td element(s).

Alternatively you could abandon tables for lining things up and use the label element instead:

<style type="text/css">
label{
    float: left;
    width: 120px;
    font-weight: bold;
}

input, textarea{
    width: 180px;
    margin-bottom: 5px;
}

textarea{
    width: 250px;
    height: 150px;
}

.boxes{
    width: 1em;
}

#submitbutton{
    margin-left: 120px;
    margin-top: 5px;
    width: 90px;
}

br{
    clear: left;
}
</style>
<form>
<label for="user">Name</label>
<input type="text" name="user" id="user" value="" /><br />
</form>

http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

Answer 3

It's likely that tr elements just don't expect form children and that the browser is getting muddled. That means that if you put the table tag within the form tag it should solve the problem. If you can't do that because there's other forms dotted around then try nesting it within the td elements instead.

In the last two examples the form and table are siblings, not parent/child, so any transition performed on one might not effect the other as you expect.

If it's still not working then it might be to do with how form elements are treated in the documents flow. Try wrapping the whole thing in a div and applying the transition to that.