rails 4 bootstrap 3 ajax modal

Question

I'm busy learning Rails 4 and I would like to display a bootstrap popup modal when a user clicks on a link, when the modal opens it needs to show the information relating to that particular record. Heres what I have done so far, which just doesn't show the actual modal popup BUT does pass the correct parameters.

index.html.erb page has:

<%= link_to "view", work_path(w), remote: true, :"data-toggle" => 'modal', :"data-target" => '#myModal' %>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

I also have a works/_modal.html.erb:

<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"></h4>
  </div>
  <div class="modal-body">
  <%= @work.name %>
  </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>

also a works controller:

    def show
    @work = Work.find(params[:id])
    if request.xhr?
    respond_to do |format|
        format.html {render :partial => 'modal'}
        format.json {head :ok}
    end
end
end

and finally a works/show.js.erb:

$("#myModal").html("<%= escape_javascript(render 'modal') %>");

I hope i'm missing something easy here. in the console I can see the following message so i know it is returning the correct information, but unfortunately it is not showing the modal.:

Started GET "/works/8" for 127.0.0.1 at 2014-03-03 09:31:12 +0000
Processing by WorksController#show as JS
Parameters: {"id"=>"8"}
Work Load (0.2ms)  SELECT  "works".* FROM "works"  WHERE "works"."id" = ? LIMIT 1  [["id", 8]]
Rendered works/_modal.html.erb (4.9ms)
Completed 200 OK in 8ms (Views: 6.3ms | ActiveRecord: 0.2ms)

Any help on this is greatly appreciated.

Have you added a div having id "myModal"?

Bachan Smruty
– Bachan Smruty

2014-03-03 10:26:14 +00:00
Commented Mar 3, 2014 at 10:26 — Bachan Smruty
– Bachan Smruty, Commented Mar 3, 2014 at 10:26
yes, in the index.html.erb there is a div with id="myModal"

drac
– drac

2014-03-03 10:27:44 +00:00
Commented Mar 3, 2014 at 10:27 — drac
– drac, Commented Mar 3, 2014 at 10:27

Bachan Smruty · Accepted Answer · 2014-03-03 10:43:04Z

17

Have a try with another way. In this way, we are going to show the modal popup using explicit javascript command.

In index.html.erb

<%= link_to "view", work_path(w), remote: true, class: 'static-popup-link'%>

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">Loading...</div>

In application.js

$(document).ready(function() {

  var clickOnPopupLink = function(){
    $('body').on('click', '.static-popup-link', function(){
      $('#myModal').modal('show');
    });
  }

  clickOnPopupLink();

});

In controller

def show
  @work = Work.find(params[:id])
end

In show.js.erb

$('#myModal').html("<%= j render("/works/modal")%>")

answered Mar 3, 2014 at 10:43

Bachan Smruty

5,7341 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

genkilabs Over a year ago

Along the same lines, I made a Gist to show how to do this with bootstrap3-dialog for all "confirm" links. gist.github.com/Genkilabs/bdcc5f62c5b46a8e0904

XML Slayer Over a year ago

Make sure you nest single quotes inside double quotes: $('#myModal').html("<%= j render('/works/modal')%>")

Craig McGuff Over a year ago

@bachan-smruty any idea why this would show the modal fade out but not the modal dialog? I can see from network/rails console that all assets are being rendered but I jjust get a fade out with no visible form?

Ishank Gupta · Accepted Answer · 2014-03-03 10:46:53Z

5

You also need to show the modal, add $('#myModal').modal('show') in show.js.erb

$("#myModal").html("<%= escape_javascript(render 'modal') %>");
$('#myModal').modal('show')

answered Mar 3, 2014 at 10:46

Ishank Gupta

1,5931 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

rails 4 bootstrap 3 ajax modal

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related