我有一份功能齐全的登记表。样式化之后(例如下载模板的html/css/js并放入我的应用程序以使页面看起来更好看):
1)我的注册页面停止工作。如果我按submit键,什么都不会发生。
下面是我使用的模板所特有的css:
/*!
* Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
background: url('bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
font-size: 1.25em;
line-height: 1.6;
color: #000;
}
hr {
max-width: 400px;
border-color: #999999;
}
.brand,
.address-bar {
display: none;
}
.navbar-brand {
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
}
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.img-full {
min-width: 100%;
}
.brand-before,
.brand-name {
text-transform: capitalize;
}
.brand-before {
margin: 15px 0;
}
.brand-name {
margin: 0;
font-size: 4em;
}
.tagline-divider {
margin: 15px auto 3px;
max-width: 250px;
border-color: #999999;
}
.box {
margin-bottom: 20px;
padding: 30px 15px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.intro-text {
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 1px;
}
.img-border {
float: none;
margin: 0 auto 0;
border: #999999 solid 1px;
}
.img-left {
float: none;
margin: 0 auto 0;
}
footer {
background: #fff;
background: rgba(255,255,255,0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
@media screen and (min-width:768px) {
.brand {
display: inherit;
margin: 0;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #fff;
}
.top-divider {
margin-top: 0;
}
.img-left {
float: left;
margin-right: 25px;
}
.address-bar {
display: inherit;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #fff;
}
.navbar {
border-radius: 0;
}
.navbar-header {
display: none;
}
.navbar {
min-height: 0;
}
.navbar-default {
border: none;
background: #fff;
background: rgba(255,255,255,0.9);
}
.nav>li>a {
padding: 35px;
}
.navbar-nav>li>a {
line-height: normal;
}
.navbar-nav {
display: table;
float: none;
margin: 0 auto;
table-layout: fixed;
font-size: 1.25em;
}
}
@media screen and (min-width:1200px) {
.box:after {
content: '';
display: table;
clear: both;
}
}在我的路线档案里,我确实有
devise_for :users 这是我的用户注册页面new.html.erb
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Sign up form</h2>
<hr>
<div class="row">
<div class="form-group col-lg-3">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, class: "form-control", required: true %>
</div>
<div class="form-group col-lg-3">
<%= f.label :phone_number %> (In the form: 123456789)
<%= f.text_field :phone_number, autofocus: true, class: "form-control", required: true %>
</div>
<div class="form-group col-lg-3">
<%= f.label :password %>
<%= f.password_field :password, class: "form-control", required: true %>
</div>
<!-- <div class="clearfix"></div> -->
<div class="form-group col-lg-3">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: "form-control", required: true %>
</div>
<div class="form-group col-lg-12">
<%= f.submit "Sign up", class: "btn btn-default" %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %> 这个页面显示的很好,但是当我按下提交按钮时什么都不会发生。
这是我的application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require rails.validations
//= require_tree .还有我的application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "business-casual";
@import "bootstrap-theme";
#logo {
font-size: 26px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -1px;
padding: 15px 0;
a {
color: #2F363E;
}
}有什么想法吗?
编辑包含基于注释的信息:通过rails s启动本地服务器。Javascript控制台抛出一个错误:
[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (bootstrap-theme.css.map, line 0)编辑2:我从应用程序目录中删除了所有引导文件,只导入了gems-现在控制台中根本没有错误。只是一些关于意想不到的CSS标记的警告(这只是一个浏览器可兼容性的东西: https://www.quora.com/Why-does-Safari-display-three-warnings-in-Bootstrap),但是“注册”按钮仍然没有做任何事情。
发布于 2016-07-27 17:20:10
Nevermind-- JS缓存从来都不是问题。在我的application.html.erb中,我没有正确地产生--我在我的应用程序布局中输入的注释继续到了我的form元素中。当我检查页面源代码并看到html标记被注释掉时,我注意到了这一点。谢谢大家的帮助!
https://stackoverflow.com/questions/38596037
复制相似问题