Twitter Bootstrap Question posted in

Bootstrap modal in ruby on rails not working(not show up)-Twitter bootstrap

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

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search