2

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
makeapp
  • 181
  • 3
  • 11

3 Answers3

4

I guess when you try to render that modal via javascript inside new_release.js.erb with

$("#myModal").find(".modal-content")

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

index.html.erb

<%= link_to 'Add release', new_release_path, :remote => true %>

<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>
  </div>
</div>

inside js.erb

new_release.js.erb

$("#myModal").find(".modal-content").html("<%= j (render 'new_release') %>");
$("#myModal").modal('show');

_new_release.html.erb

<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>

Hope This works, Thanks

Vishal Taj PM
  • 1,339
  • 11
  • 23
  • Yes. This works. It is almost the same as my solution. Btw, Adding class="modal-dialog" to _new_release.html.erb will help with the styling. – makeapp Nov 26 '17 at 06:28
2

Look at the following code

$("#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');

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.

Hoa
  • 3,179
  • 1
  • 25
  • 33
1

You should use $("#myModal").modal('show'); to open up the modal.

dferenc
  • 7,918
  • 12
  • 41
  • 49