Twitter Bootstrap模式不弹出用户登录 [英] Twitter Bootstrap Modal not popping up for user login
问题描述
当用户登陆我们的主页时,我遇到麻烦,整合了一个twitter bootstrap pop-over模式和设计登录/注册。我花了一些时间来实现不同的方法,但仍然没有成功。截至目前,当我点击与模态相关联的登录按钮时,网站刷新,但没有模态。
apps / views / layout /_header.html.slim(我的application.erb文件调用其他部分)
li
= link_to登录,data-toggle=> modal,data-target=> #login_modal,:class => btn btn-small
li
= link_to免费注册,data-toggle=> modal,data-target=> #sign_up_modal,:class => btn btn-small
我有两个部分(sign_up_modal,login_modal)几乎相同.. 。
< div class =modal hide fade inid =sign_up>
< div class =modal-header>
< button class =closedata-dismiss =modal> x< / button>
< h2>注册< / h2>
< / div>
< div class =modal-body>
<%= form_for(resource,:as => resource_name,:url => registration_path(resource_name))do | f | %GT;
<%= devise_error_messages! %GT;
< div><%= f.label:email%>< br />
<%= f.email_field:email,:autofocus => true%>< / div>
< div>
<%= f.label:password%>< br />
<%= f.password_field:password%>
< / div>
< div>
<%= f.label:password_confirmation%>< br />
<%= f.password_field:password_confirmation%>
< / div>
< / div>
< div class =modal-footer>
< p>
< div>
<%= f.submit注册,:class => 'btn btn-small btn-success'%>
< / div>
< / p>
< p>
< a href =#class =btn btn-smalldata-dismiss =modal>关闭< / a>
< / p>
< / div>
<%end%>
< / div>
在我的application.coffee中,我确实要求twitter / bootstrap
#= require twitter / bootstrap
gemtwitter-bootstrap-rails
当我点击注册或登录页面只是刷新...我相信我'我添加了我的所有代码,对不起新的堆栈溢出!
apps / controllers / sessions_controller.rb
class SessionsController< ApplicationController
def new
end
def create
user = User.from_omniauth(env [omniauth.auth])
session [:user_id] = user.id
redirect_to root_path
end
def destroy
会话[:user_id] = nil
redirect_to root_path
end
end
在应该触发模态的按钮上执行此操作
<%= link_tologin,new_user_session_path, :remote => true,'data-toggle'=> 'modal','data-target'=> '#your_modal_id',:class => btn btn-primary,:method:'get'%>
为了这个工作,你将不得不覆盖设计会话#new
和注册#new
以响应ajax请求。您可以通过在这两个操作上引入一个respond_to块来实现此目的。
respond_to do | format |
format.js
end
然后在您的 app / views / devise / registrations
和 app / views / devise / sessions
创建 new.js.erb
文件。您可以从模态中删除登录和注册表单,并将javascript放在这些 new.js.erb
文件中的模态中。
您可以从模态中删除该表单,并在 modal-body
中放入加载gif。您可以将表单放在部分中,并将其放在 app / views / devise / sessions / _login_form.html.erb
中。然后在 app / views / devise / sessions / new.js.erb
中,做这样的事情。
$('#your_modal_id')。remove-data
$('.modal-header').html (<%= escape_javascript(render'/ path / to / partial / with / header / content')%>);
$('。modal-body')。html(<%= escape_javascript(render'/ path / to / partial'))%>);
$('。modal-footer')。html(<%= escape_javascript(render'/ path / to / partial'))%>);
I'm having trouble incorporating a twitter bootstrap pop-over modal with devise login/signup for when a user lands on our home page. I've spent some time implementing different methods but still no success. As of right now, when I click on the "login" button that is associated with the modal, the site refreshes but there is no modal.
apps/views/layout/_header.html.slim (my application.erb file calls in other partials)
li
= link_to "Login", "data-toggle" => "modal", "data-target" => "#login_modal", :class => "btn btn-small"
li
= link_to "Sign Up Free", "data-toggle" => "modal", "data-target" => "#sign_up_modal", :class => "btn btn-small"
I have two partials (sign_up_modal, login_modal) that are almost identical...
<div class="modal hide fade in" id="sign_up">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign Up</h2>
</div>
<div class="modal-body">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div>
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
<div>
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %>
</div>
</div>
<div class="modal-footer">
<p>
<div>
<%= f.submit "Sign up", :class => 'btn btn-small btn-success' %>
</div>
</p>
<p>
<a href="#" class="btn btn-small" data-dismiss="modal">Close</a>
</p>
</div>
<% end %>
</div>
In my application.coffee I've made sure to require twitter/bootstrap
#= require twitter/bootstrap
And I've made sure to add the gem to my gemfile
gem "twitter-bootstrap-rails"
When I click on either "sign up" or "login" the page just refreshes..I believe I've added all my code, sorry new to stack overflow!
apps/controllers/sessions_controller.rb
class SessionsController < ApplicationController
def new
end
def create
user = User.from_omniauth(env["omniauth.auth"])
session[:user_id] = user.id
redirect_to root_path
end
def destroy
session[:user_id] = nil
redirect_to root_path
end
end
Do this on the button that is supposed to trigger the modal
<%= link_to "login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#your_modal_id', :class => "btn btn-primary", :method: 'get' %>
For this to work you will have to overwrite devise sessions #new
and registrations #new
to respond to ajax requests. you can do this by introducing a respond_to block on both of these actions like this
respond_to do |format|
format.js
end
then in your app/views/devise/registrations
and app/views/devise/sessions
create new.js.erb
files. You can remove the login and sign-up forms from the modal and put the javascript to render the forms inside the modals in these new.js.erb
files.
You can remove the form from the modal and in modal-body
you put a loading gif. You can instead put the form in a partial and place it in app/views/devise/sessions/_login_form.html.erb
. Then in app/views/devise/sessions/new.js.erb
you do something like this.
$('#your_modal_id').remove-data
$('.modal-header').html ("<%= escape_javascript(render'/path/to/partial/with/header/content') %>");
$('.modal-body').html ("<%= escape_javascript(render '/path/to/partial')) %>");
$('.modal-footer').html ("<%= escape_javascript(render '/path/to/partial')) %>");
这篇关于Twitter Bootstrap模式不弹出用户登录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!