Currently, I am integrating jquery into the devise views of a sample rails application. My intention is to test it on a sample app before implementing it in a production code.
The controller and view for welcome are already set up.
The routes.rb file looks like this:
get 'welcome/index'
devise_for :users
root 'welcome#index'
The partial templates for both the register and login features are located in these files:
app/views/welcome/_login_modal.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<%= f.submit "Sign in", :class => 'btn btn-small btn-success' %>
<% end %>
</div>
<div class="modal-footer">
<%= render "devise/shared/links" %>
</div>
</div>
I have included my javascript code directly in the application.html.erb file itself.
<!DOCTYPE html>
<html>
<head>
<title>PopupDevise</title>
<%= link_to "Login", "#login", "data-toggle" => "modal", :class => 'btn btn-small' %>
<%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small btn-success' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
</head>
<body>
<%= render "welcome/login_modal" %>
<%= render "welcome/sign_up_modal" %>
<%= yield %>
</body>
</html>
However, after initiating rails s, everything appears visible but upon clicking either the Login or Sign Up buttons, the screen just turns transparent grey without showing any pop-up modals. Since I am still learning about js and jquery, I am seeking guidance on how to resolve this issue. Any suggestions would be greatly appreciated.