rails 3将表单助手与HTML/javascript表单逻辑相结合

我需要一些建议，说明我是否正在为我的Web表单转换正确的方法。rails 3将表单助手与HTML/javascript表单逻辑相结合

我有这个简单的模型，基本上由2个字段组成。这里的迁移是：

class CreateAssetAllocations < ActiveRecord::Migration 
     def self.up 
     create_table :asset_allocations do |t| 
      t.string :asset_allocation 
      t.date :effective_date 
      t.timestamps 
     end 
     end 
    end

与此模型中的唯一转折是，asset_allocation不只是一个简单的字符串。相反，它是一个逗号分隔值（CSV）的列表。

但是，我不想将CSV格式公开到用于创建模型的新实例的Web窗体。所以我的“新”的视图模板具有以下一般形式：

它采用date_select轨帮手进入effective_date场
它有输入的数组进入asset_allocation CSV的各个组成部分的对象。对于这些，我使用原生HTML <input>标签，标注jQuery验证逻辑以确保各个元素彼此一致。
我有本机HTML <button>元素，我已经创建提交表单。它绑定到一些jQuery逻辑，它通过<input>字段循环并在将它发送到服务器之前将它们全部打包成一个CSV字符串。一旦CSV字符串准备就绪，它将使用CSV数据调用jQuery.post()。

这里是提交表单我按钮逻辑：

<script> 
    function okGo() { 
    var result="" 
    $('.classentry option:selected').each(function() { 
     var tag = $(this).val(); 
     var value = $(this).parent().next().val(); 
     result += tag + ":" + value + ","; 
    }); 
    alert(result); 
    $.post("<%=security_assets_path(@security)%>", { foo: result, asset_allocation: asset_allocation }); 
    } 
</script> 
<button onClick="return okGo();">Go</button>

这里是调用date_select（见下文）。你可以看到我正在将对象分配给asset_allocation变量。如果你看看上面的电话$.post()，你会发现我试图在发布的数据中包含asset_allocation对象，但它不起作用。 foo数据正常，但不是asset_allocation。

Enter Effective Date:<br /> 
<%= date_select("asset_allocation", "effective_date")%>

上述解决方案对于将CSV数据发送到服务器工作正常。但是，我不知道如何访问date_select辅助数据以包含在$.post()的调用中。

我应该采取不同的方法来应对这种情况吗？

谢谢

来源

2012-03-11 Denis

我没有得到任何回应这个问题，但我确实弄清楚了我自己。

对于初学者，我错误地使用$.post()。该功能用于与AJAX异步发布数据。相反，我在表单外创建了一个按钮，并将其设置为使用onClick事件处理程序调用$('form').submit()。

然后我写了一个自定义的submit事件处理程序，其中我循环选择框和文本字段的数组以创建CSV格式的字符串。

最后，在同一submit事件处理程序，我打包了CSV字符串转换到具有相同属性的名称提交表单的隐藏文本字段作为模型被用来使控制器可以轻松地设置新对象。

下面是一些代码，谁在将来可能会遇到这样的人：提交资产配置CSV和EFFECTIVE_DATE

这里是小型化。注意表单本身没有提交按钮。另请注意，声明了hidden_field元素 - 这将从submit()处理程序中填充。

<%= form_for @asset_allocation, :url => security_assets_path(@security) do |f| %> 
    <%= f.hidden_field :asset_allocation %> 
    Enter Effective Date:<br /> 
    <%= f.date_select :effective_date %> 
<% end %>

这是在表单外声明的按钮，用于捕获提交事件并执行我自己的处理。它只是在窗体元素上调用submit()。

<button onClick="return $('#new_asset_allocation').submit();">Submit</button>

这里是我加载DOM时绑定我自己的事件处理程序的地方submit()。只要用户按下“提交”按钮，它就会调用okGo()。

$(document).ready(function() { 
    $('form').submit(function() { 
     okGo(); 
     return true; 
    }); 
    });

然后终于，这里是我的自定义submit()处理循环通过其他投入要素，并收集了为CSV的信息，然后把该CSV导致到这是在形式宣布hidden_field。然后发送到服务器供控制器处理。

function okGo() { 
    var result="" 
    $('.classentry option:selected').each(function() { 
     var tag = $(this).val(); 
     var value = $(this).parent().next().val(); 
     result += tag + ":" + value + ","; 
    }); 
    $('#asset_allocation_asset_allocation').val(result); 
    }

就是这样，就是这样。它像一个魅力。希望这个例子能派上用场。

来源

2012-03-13 03:11:06 Denis

rails 3将表单助手与HTML/javascript表单逻辑相结合

回答

相关问题