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

Question

I have a table that displays all of a users Teacher models. I want the rightmost column of the table to contain 'edit' buttons that cause a bootstrap modal to appear with a form that submits to that models edit path.

So far I have a table with buttons whose id's correspond to the id's of the model they are displaying. When the buttons are clicked, the modal appears, but the form always submits to the same url. I'm having trouble finding a way to change the url that the form submits to based on the id of the button that was pressed.

Button:

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

Modal:

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

Answer 1

One possibility is to use a custom data attribute (eg data-teacher_id ) in your anchor tag and then retrieve the teacher_id via a callback bound to the click event of the anchor tag. The function of the callback would be to update the form in the modal with the extracted teacher_id (see the documentation on jQuery.data() )

However, in my own code I use a different approach. I would convert to anchor tag to an "ajaxified" link and fill the #myModal with the form partial returned by the edit action of the TeacherController. In that case your myModal division would initially be empty.

The link is set up to point to the right URL and to be handled by Ajax:

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

Since the link has the data-remote attribute set to true, Rails will automatically submit it via ajax to the right URL (namely, the edit_teacher_path(@teacher) ). Now you only need to bind the ajax success event to actually fill the modal with the form and to trigger the modal show:

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

Of course, in the TeachersController's edit action you need to make sure you handle Ajax requests and respond with the correct form partial (Note that the format is html even though it's an Ajax request. That's because you want to render an html partial):

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

You could use this as a general-purpose approach whenever you want to render dynamic modals. The only thing that needs to change is the url that the anchor tag points to.