Bootstrap Modal + Remote Content + Rails way

First create a button or link that triggers the Bootstrap Modal. And In that link the "data-target " should point to Bootstrap Modal and you also need to provide an href attribute that  should point to a controller#action using routes.
<!-- Button trigger modal -->
<a href = "/page_to_fetch_remote_content/" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
  Launch demo modal
</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


And in controller#action
def new
  respond_to do |format|
    format.js { render :partial => "form" }
  end
end
And using this the form partial will be loaded inside the modal-body.

Comments

  1. hey tried to apply this but the partial doesn't get rendered in the modal body

    ReplyDelete
    Replies
    1. Did you check the browser javascript console for any error, that may avoid the modal to open? if your modal is working fine, can you check if partial ( Rails terminal and the response inside the browsers network tab. ) doesn't have any error?

      Delete
  2. What shoul I put inside the controller to close the modal after the submit?

    ReplyDelete
    Replies
    1. You can use JS to manually close the modal inside your response js erb file $('#myModal').modal('hide'), I am assuming you have a remote form inside modal

      Delete

Post a Comment

Popular posts from this blog

Interview Question on Ruby on Rails

Inserting and Moving elements inside Ruby Array