Question

我有一个表格，显示所有用户的教师模型。我希望表格中最右边的列包含“编辑”按钮，这些按钮会导致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>

Answer 1

一种可能性是在您的锚标记中使用自定义data属性（例如data-teacher_id），然后通过绑定到锚标记的click事件的回调来检索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。

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

1 个答案: