I am using rail4 and ‘bootstrap-sass’:’3.3.6′.
I have followed steps in https://coderwall.com/p/ej0mhg/open-a-rails-form-with-twitter-bootstrap-modals and rewrited partials according to Bootstrap modal in ruby on rails not working.
Partials:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
No errors in rails console.
And Responses from chrome inspect seems to be fine.
Response:
$("#myModal").find(".modal-content").html("<div aria-hidden='true' aria-labelledby='myModalLabel' class='modal fade' id='myModal' role='dialog' tabindex='-1'>n<div class='modal-dialog' role='document'>n<div class='modal-content'>n<div class='modal-header'>n<h3 id='myModalLabel'>Modal header</h3>n</div>n<div class='modal-body'>n<p>One fine body…</p>n</div>n<div class='modal-footer'>n<button aria-hidden='true' class='btn' data-dismiss='modal'>Close</button>n<button class='btn btn-primary'>Save changes</button>n</div>n</div>n</div>n</div>n");
$("#myModal").modal('show');
But the modal doesn’t show up.
Other related code:
views that call the action:
%li= link_to 'Add release', new_release_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#myModal'}
new_release.js.erb
$("#myModal").find(".modal-content").html("<%= j (render 'new_release') %>");
$("#myModal").modal('show');
routes:
get "new_release" => 'project#new_release', :as => :new_release
3
Answers
You should use
$("#myModal").modal('show');
to open up the modal.Look at the following code
It means you try to nest a block starting with a
#myModal
element within another#myModal
element. So the result HTML would include 2 elements with the same ID. Try to fix that first.I guess when you try to render that modal via javascript inside new_release.js.erb with
actually it’s not loaded in DOM as the partial is not loaded
So instead of adding whole modal inside you partial keep model div tag inside the template file where you actually calling like lets say your main template is
inside js.erb
Hope This works, Thanks