exact steps to display bootstrap modal in rails application

Question

I can't seem to find any answers to why my modal does not display, so I figure should check the fundamentals. I have implemented the following structure but a modal does not popup. Please Help

1) index page has a link with a call to controller's edit action

<%= link_to 'Edit business', edit_user_business_path(@u, b), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true, :class => "btn btn-primary ", :id => 'edit_biz'} %>

2) Controller's edit action does this (shortened):

respond_to do |format|
    format.html  {render :edit}
    format.json { head :ok}
  end

3) Edit.html.erb looks like this:

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h6>Loading...</h6>
  </div>

  <div class="modal-body center">

    <h2>Edit business </h2>
    <%= render 'editbusiness' %>
  </div>

  <div class="modal-footer">&nbsp;
  </div>
</div>

4) _editbusiness.html.erb has the following

<fieldset>
<br/>
<br/>
<%= form_for @businesses_to_edit, :url => { :action => "edit"}, :class => "form-horizontal" do |biz| %>
    <p>
        <%=  biz.label :name, :class => "span3"%>
        <%=  biz.text_field(:name, :placeholder => biz.object.name, :class => "span3")%>
    </p>

    <p>
        <%=  biz.label :description, :class => "span3" %>
        <%=  biz.text_field(:description, :placeholder => biz.object.description, :class => "span3")%>
    </p>

    <br/>
    <br/>
    <br/>
    <div class="form-inline pull-right">
        &nbsp;&nbsp;<%=  biz.submit "Save", :class => "btn btn-inverse span1", :id => 'edit_biz' %>
        &nbsp;&nbsp;<%=  biz.button "Close", :class => "span1", :id => 'close' %>
    </div>

    <% end %>


    </fieldset>

5) And finally, application.js has this:

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap


$(document).ready(function() {

$('#modal-window').modal('show')   ;
$('.modal-body').html('<%= escape_javascript(render :partial => "editbusiness", :object => @businesses_to_edit) %>');

});

Answer 1

Maybe you need to include into your application.js this string:

//= require bootstrap-modal