如何使用按钮动态更改表单？答案

【问题标题】：How can I use buttons to dynamically change a form?如何使用按钮动态更改表单？
【发布时间】：2013-05-11 17:37:45
【问题描述】：

我有一个显示所有用户教师模型的表格。我希望表格的最右边一列包含“编辑”按钮，这些按钮会导致bootstrap modal 与提交到该模型编辑路径的表单一起出现。

到目前为止，我有一个带有按钮的表格，其 id 对应于它们正在显示的模型的 id。单击按钮时，会出现模式，但表单始终提交到相同的 url。我无法找到一种方法来根据按下的按钮的 id 更改表单提交的 url。

按钮：

<a id="edit-#{teacher_id_here}" href="#myModal" role="button" class="btn" data-toggle="modal">
  Launch demo modal
</a>

模态：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    ... 
</div>

【问题讨论】：

模态框内的表单是什么样的？您是否尝试检查表单 action 属性以检查它是否发布到正确的 URL？
对我来说似乎不是 haml
@AndreaSingh：我什至没有尝试将表单发送到正确的 url。我不知道如何从锚标记中提取 id，然后将其用作 edit_user_teacher_path 的参数。
@user1737909：糟糕，我打算将其发布为 haml，但我改变了主意，忘记删除该标签。

标签： javascript ruby-on-rails web-applications twitter-bootstrap

【解决方案1】：

一种可能性是在您的锚标记中使用自定义data 属性（例如data-teacher_id），然后通过绑定到锚标记的点击事件的回调检索teacher_id。回调的功能是使用提取的teacher_id 更新模态中的表单（请参阅jQuery.data() 上的文档）

但是，在我自己的代码中，我使用了不同的方法。我会将锚标记转换为“ajaxified”链接，并使用 TeacherController 的编辑操作返回的表单部分填充#myModal。在这种情况下，您的 myModal 部门最初将为空。

链接设置为指向正确的 URL 并由 Ajax 处理：

= link_to "Launch modal", edit_teacher_path(@teacher), :class => "btn ajax-modal-trigger", 
  :data => {:remote => true, :type => 'html'}

由于链接的data-remote 属性设置为true，Rails 会自动通过ajax 将其提交到正确的URL（即edit_teacher_path(@teacher)）。现在只需要绑定 ajax 成功事件，就可以真正用表单填充模态并触发模态显示：

 $("body").on('ajax:success', "a.ajax-modal-trigger", function(evt, data, status, xhr){
   $("#myModal").html(data).modal('show');
 });

当然，在 TeachersController 的 edit 操作中，您需要确保处理 Ajax 请求并以正确的形式部分响应（请注意，格式是 html，即使它是 Ajax 请求。那是因为您想要渲染一个 html 部分）：

class TeachersContoller
  .....

  def edit
    @teacher = Teacher.find(parame[:id])
    respond_to do |format|
       format.html do
         render :partial => "form", :object => @teacher
       end 
     end
  end
end

当您想要渲染动态模态时，您可以将其用作通用方法。唯一需要改变的是锚标签指向的url。

【讨论】：