Ruby on Rails、Low Pro 和 JQuery（通过 JRails）

Question

我将JRails 与Ruby on Rails 一起使用，这样我就可以简单地使用jQuery，因为我更熟悉它。我也在尝试使用Low Pro 远程提交我的一些表单。

我目前遇到了一个让我难过的有趣问题。我已将以下内容添加到我的 application.js 文件中，并且我知道这些都可以正常工作，因为我看到了返回的响应（在 Firefox 中使用 Firebug）：

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

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

我所要做的就是将class="remote" 添加到我的链接和表单中，一切都很好。 dataType: "script" 部分确保它对返回的响应文本执行eval()，以便它可以正确更新页面。

所以，我有一个创建新货件的简单链接。在我的new.js.rjs 文件中，我有以下内容：

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

如果我用page.visual_effect :fade, '#shipments_table' 替换它，它会按照您的预期进行。如果我的_test.html.erb 文件相当简单，它也可以工作。问题是当我尝试将<form> 添加到我的部分时。根据<form> 标签的位置，会出现不同的问题。比如这个

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

还有这个

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

绝对没有任何东西出现。这个

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

将使Some Text 出现，但它会丢失我的所有格式。还有这个

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

完全按照我的需要工作（从视觉上讲）。但是，这样做的明显缺点是我无法将表单输入放入表格列中，这基本上使整个过程无用。我可能可以通过简单地将它们全部放在 <div> 或类似内容中的一行来解决这个问题，但我希望所有内容都对齐。

任何关于如何解决这个难题的想法将不胜感激:-)

Answer 1

如果你要使用表格，你需要按照 tom 所说的做，用表格元素包裹表格元素，或者把它放在 td 元素中。

或者，您可以放弃表格以进行排列，而是使用标签元素：

<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 2

<form> 只能放在<td> 内或包裹<table>：

<form><table/></form>

Answer 3

很可能 tr 元素不期望 form 子元素，并且浏览器变得混乱。这意味着如果你把 table 标签 within form 标签它应该可以解决问题。如果因为周围散布着其他形式而无法做到这一点，请尝试将其嵌套在 td 元素中。

在最后两个示例中，表单和表格是同级的，而不是父/子，因此对其中一个执行的任何转换都可能不会像您预期的那样影响另一个。

如果仍然无法正常工作，则可能与文档流中处理 form 元素的方式有关。尝试将整个内容包装在 div 中，然后对其应用过渡。