Using jQuery inside ejs template

Question

So I'm building an express app on Parse BaaS and want to show a Bootstrap modal depending on if an error message is passed into a view. I'm trying to do this using the simple .modal("show") code from bootstrap. I have a _header partial on this template that includes a link to jQuery and bootstrap's js. However, this template breaks saying $ is undefined when it runs. Here's the embedded js.

<div class="modal-body">
                  <% if(registerError) { %>
                    <div class="error"><%= registerError %></div>
                      <% $('#registerModal').modal('show') %>   
                  <% } %>
                <form class="form-inline login-form" method='post' action='/signup'>
                  <div class="error bg-danger" style="display:none"></div>
                  <input type="email" id="register-username" name="registerEmail" class="form-control" placeholder="Email" />
                  <button type="submit" id="login" class="btn btn-primary">Next</button>
                </form>

              </div>

When I take out the modal call, the template correctly shows the error but that requires me to navigate to the modal manually. I want this modal to render when the template loads if there is an error. I'm pretty new to ejs and express in generally so I'm not sure where the jquery call should live.

Answer 1

The reason this code doesn't work is because you are attempting to run client side JS on the server side (i.e. within <% %>). It should work if you put the $ expression within a script tag.

<% if(registerError) { %>
    <div class="error"><%= registerError %></div>
    <script type='text/javascript'>$('#registerModal').modal('show');</script>   
<% } %>