CODEWITHSUNDEEP
ruby-on-rails
Rene Chan
Rene Chan

Reputation: 985

Failing to display modal content in rails

I have the following file 

_result.html.erb
_show.html.erb
_show.js.erb

I put a button in _result partial that should open the _show partial in a modal. but when the user click on the link, it only shows a bar, not containt. Am i missing part of the procedure please? it seems fairly easy in the tutorials that I found. My code is as follows:

_show.html.erb

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
  <h3 class="section_title">
Hello this is the Show modal
  </h3>
    </div>
  </div>
</div>

_result.html.erb (which is located in Welcome.html.erb)

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

show.js.erb

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

All I get for now is a line:

filed rendering of modal

does anybody know why the contain is not showing, although I literally used the same tagging and id label Kolosek - Creating modal in rails The controller:

  def show
    @invitation = Invitation.find(params[:id])

    respond_to do |format|
      format.html
      format.js {render :layout => false}
    end
  end

Upvotes: 0

Views: 235

Answers (1)

Pavan
Pavan

Reputation: 33542

I see that you are following this tutorial to create a modal, but your code isn't correct! You are trying to display a modal inside another modal instead you should display its contents inside the modal. Modify your _show.html.erb to below

#_show.html.erb
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">x</button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
  *Modal content comes here*
</div>
<div class="modal-footer">
  <button class="btn btn-primary">Save</button>
</div>

Upvotes: 2

Related Questions