CODEWITHSUNDEEP
ruby-on-railsmodal-dialog
Dinu
Dinu

Reputation: 169

Open a modal in rails

I am very new for rails and I try to open an modal in my app. Here is my show.html.erb

app > views> event > show.html.erb

<div>
  <button class="btn btn-info slide-down-right-drawer-btn" data-slide-block-id="#discussion-drawer">
    <i class='ion ion-chatbubbles icon mr-5'></i>Discuss
  </button>
</div>

This is my app > views > event > _discussion_drawer.html.erb

<div id="discussion-drawer">
<div class="col-md-12 col-sm-12 col-xs-12" style="line-height: 50px;">
    <ol class="breadcrumb">
        <li>Discussions</li>
        <li class="active"><%= @co["name"] %></li>
    </ol>
    <button type="button" data-toggle="modal" data-target="#discussionFormModal" data-entity-id="<%= @co["id"] %>" class="btn btn-conf add-note-btn btn-info mb-20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <b>Start new discussion...</b>
    </button>
</div>
</div>

But this is not work. Am I doing right? Can any one help me for this?

Upvotes: 0

Views: 2393

Answers (2)

Sandesh Bodake
Sandesh Bodake

Reputation: 17

I think your HTML code is correct but bootstrap js is not loaded properly. you can simply check using browser inspect.

Make sure that your bootstrap.min.js loaded properly in rails app. you can also use CDN https://getbootstrap.com/docs/4.5/getting-started/download/

or

If you are using bootstrap gem follow https://robrace.dev/integrating-bootstrap-4-in-rails-6/ this article

Upvotes: 0

Vandita
Vandita

Reputation: 21

It's not super clear which is the modal you're trying to open and where is the button to toggle it, but it took me a few tries to get comfortable with this too.

  • Make sure the ID on your modal matches the ID on the button
# this is on your button
data-toggle="modal" data-target="#discussionFormModal"

# this is on the modal
id="discussionFormModal"
  • Check that you've rendered the partial (_whatever_the_name_is.html.erb) properly in the same page that the button to open the modal is
<%= render partial: "<path to your partial>", locals: {<any variables that you need to pass to the modal>} %>

#example
<%= render partial: "shared/discussion_form", locals: {discussion: @discussion} %>

Upvotes: 2

Related Questions