How to open a bootstrap modal from link_to content?

Question

I'm creating a reddit clone, and clicking the login or signup text on the header opens a modal for the user to enter their credentials.

I created a modal partial here:

<div class="modal fade" id="popUpWindow">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="col-md-6">
                <!-- header -->
                <div class="modal-header">
                    <button type ="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">CREATE A NEW ACCOUNT</h3>
                </div>
                <!-- body (form) -->
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <input type ="username" class="form-control" placeholder="choose a username">
                        </div>
                        <div class="form-group">
                            <input type ="password" class="form-control" placeholder="password">
                        </div>
                        <div class="form-group">
                            <input type ="password_confirmation" class="form-control" placeholder="verify password">
                        </div>
                        <div class="form-group">
                            <input type ="email" class="form-control" placeholder="email">
                        </div>
                    </form>
                </div>
                <!-- button -->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-block">SIGN UP</button>
                </div>
            </div>

            <div class="col-md-6">
                <!-- header -->
                <div class="modal-header">
                    <button type ="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">LOG IN</h3>
                </div>
                <!-- body (form) -->
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <input type ="username" class="form-control" placeholder="username">
                        </div>
                        <div class="form-group">
                            <input type ="password" class="form-control" placeholder="password">
                        </div>
                    </form>
                </div>
                <!-- button -->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-block">LOG IN</button>
                </div>
            </div>

        </div>
    </div>
</div>

Now I'm trying to access this modal code from the header partial here:

<header class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
    <%= link_to "reddit", root_path , :id => 'logo' %>
        <nav>
            <ul class="nav navbar-nav navbar-right">
                <li>
                <%= link_to 'Sign up or log in', "#", data: {toggle: "popUp", target: "#popUpWindow"} %>
                </li>
            </ul>s
        </nav>
    </div>
</header>

I thought this line would successfully open the modal by its id popUpWindow: <%= link_to 'Sign up or log in', "#", data: {toggle: "popUp", target: "#popUpWindow"} %>

There are no errors appearing, but clicking the link_to content does not trigger anything to open.

In application.js I have:

//= require jquery

//= require bootstrap

What html5 code did you get for your link at the actual generated webpage? — Chris Chen, Jul 31 '17 at 00:22
toggle: "modal" should make it work then https://www.w3schools.com/bootstrap/bootstrap_modal.asp — Chris Chen, Jul 31 '17 at 00:29

Chris Chen · Answer 1 · 2017-07-31T00:42:49.267

0

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html

Should it be <%= link_to 'Sign up or log in', "#", :data => {:toggle => "modal", :target => "#popUpWindow"} %> instead?

Also answered before at Rails - link_to helper with data-* attribute

edited Jul 31 '17 at 00:42

answered Jul 31 '17 at 00:27

Chris Chen

1,228
9
14

1

`:data { ... }` won't work, `:data => { ... }` or `data: { ... }` – Sebastián Palma Jul 31 '17 at 00:33
Thx, made change of my answer. – Chris Chen Jul 31 '17 at 00:34
unexpected tSTRING_BEG and unexpected '}', expecting ')' odal", :target "#popUpWindow"} ) – user9503053 Jul 31 '17 at 00:41
ah, sry, modified it again. Have to stick with the scheme all the time : ) – Chris Chen Jul 31 '17 at 00:43

How to open a bootstrap modal from link_to content?

1 Answers1