Bootstrap Modal + Remote Content + Rails way

By -
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. UnknownNovember 15, 2014 at 4:40 PM
    hey tried to apply this but the partial doesn't get rendered in the modal body
    ReplyDelete
    Replies
    1. Nishant Nigam November 17, 2014 at 12:03 AM
      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. darkApril 15, 2015 at 1:51 PM
    What shoul I put inside the controller to close the modal after the submit?
    ReplyDelete
    Replies
    1. Nishant Nigam April 15, 2015 at 11:34 PM
      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









Inserting and Moving elements inside Ruby Array







By







-















Here's is an array with 5 elements  2.1.2 :001 > arr = ["a", "b", "c", "d", "e"]  => ["a", "b", "c", "d", "e"]  Lets look at few different cases  Insert a new element at starting position  Using unshift 2.1.2 :002 > arr.unshift("f")  => ["f", "a", "b", "c", "d", "e"]  Using insert 2.1.2 :005 > arr.insert(0, "f")  => ["f", "a", "b", "c", "d", "e"] In the above example 0 is the position(index)  Move existing element from one position to another   The element in this case is "e"  Using uniq to show only unique elements  2.1.2 :009 > arr.insert(0, "e").uniq  => ["e", "a", "b", "c", "d"]  With uniq we are only showing unique records but the element is listed 








Read more










Difference between Validations, Callbacks and Observers







By







-















 Validations allow you to ensure that only valid data is stored in your  database.   Example:    validates_presence_of :user_name, :password   validates_numericality_of :value   We can write custom validation also as   def validate    errors.add(:price, “should be a positive value”) if price.nil?|| price < 0.01  end    Callbacks and observers allow you to trigger logic before or  after an alteration of an object’s state.   Callbacks  are methods that get called at certain moments of an  object’s  life cycle. With callbacks it’s possible to write code that  will run  whenever an Active Record object is created, saved, updated,  deleted,  validated, or loaded from the database.   Callbacks are hooks into the life cycle of an Active Record object that  allow you to trigger logic before or after an alteration of the object  state. This can be used to make sure that associated and dependent  objects are deleted when destroy is called (by overwriting  before_destroy) or to massage attribu








Read more