Ruby on Rails, Low Pro and JQuery (via JRails)
I'm using JRails with Ruby on Rails so I can just use jQuery as I'm more familiar with it. I am also trying to use Low Pro to submit some of my forms remotely.
I am currently facing an interesting problem that annoys me. I added the following to my file application.js
and I know they are working correctly because I see the response I received (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 part dataType: "script"
ensures that it will return the text eval()
in the returned response body so that it can refresh the page correctly.
So, I have a simple link that creates a new submission. 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 it as you expected. If my file is _test.html.erb
pretty simple, it works as well. The problem is what I am trying to add <form>
to my partial. Various problems arise depending on the placement of the tags <form>
. For example this
<tr>
<form>
<td>Some Text</td>
</form>
</tr>
and this one
<form>
<tr>
<td>Some Text</td>
</tr>
</form>
absolutely nothing appears. it
<form></form>
<tr>
<td>Some Text</td>
</tr>
will appear Some Text
, but it will lose all my formatting. And this
<tr>
<td>Some Text</td>
</tr>
<form></form>
works exactly as I need (visually). However, the obvious drawback is that I cannot insert my inputs into the columns of the table, which basically makes the whole process useless. Perhaps I can work around this by simply putting them on the same line inside <div>
or something like that, but I would rather have everything aligned.
Any ideas on how to solve this puzzle would be greatly appreciated :-)
source to share
If you are going to use tables, you will need to do what tom said and wrap the table element with a form element, or put it inside a td element.
Alternatively, you can ditch tables to align things and use a 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/
source to share
It is likely that the tr elements are simply not expecting form children and that the browser is getting confused. This means that if you put the table tag in the form tag , it should solve the problem. If you cannot do this because other forms will remain there, try inserting them into td elements .
In the last two examples, the form and table are siblings, not parent / child, so any transition you make may not affect the other as you expect.
If it still doesn't work, it might have something to do with how form elements are handled in the document flow. Try to wrap the whole thing in a div and apply a transition to it.
source to share