使用Ruby on Rails表单提交按钮的Bootstrap不起作用

时间:2018-06-21 08:09:38

标签: html ruby-on-rails twitter-bootstrap

每种形式都可以独立工作。但是,当我将它们添加在一起时, 第一 表单的提交按钮不起作用。它只是完全静态的。当我单击它时,没有任何反应/激活。为什么会这样呢?我在这里想念什么?

我试图寻找缺少的结束标签,但是当我涉及Bootstrap时,我是一个业余爱好者。可能是我的布局使它失败了?

<%= form_for [:backend, :cms, @landing_page], html: { multipart: true } do |f| %>

    <%= render 'backend/shared/form_errors', model: @landing_page %>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Create a landing page</h3>
        </div>
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#headers" data-toggle="tab">Headers/Titles</a></li>
                <li><a href="#ebook" data-toggle="tab">Theme Ebook</a</li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="headers">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 10px;">
                            <div class="form-group">
                                <%= f.label :internal_name %>
                                <%= f.text_field :internal_name, required: true, class: "form-control"%>
                            </div>
                            <div class="form-group">
                                <%= f.label :h1 %>
                                <%= f.text_field :header, required: true, class: "form-control" %>
                            </div>
                            <div class="form-group">
                                <%= f.label :sub_header %>
                                <%= f.text_field :sub_header, required: true, class: "form-control"%>
                            </div>
                            <div class="form-group">
                                <%= f.label :meta_title %>
                                <%= f.text_area :meta_title, required: true, class: "form-control js-counter", data: { target: '.js-counter-target1'}, maxlength: 160 %>
                                <small><span class="js-counter-target1"></span> / 160 Characters</small>
                            </div>
                            <div class="form-group">
                                <%= f.label :meta_description %>
                                <%= f.text_area :meta_description, required: true, class: "form-control js-counter", data: { target: '.js-counter-target2'}, maxlength: 200 %>
                                <small><span class="js-counter-target2"></span> / 160 Characters</small>
                            </div>
                            <div class="actions">
                                <%= f.submit "Save", class: "btn btn-primary", data: { disable_with: 'Please Wait…' } %>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="ebook">
                    <div class="row">
                        <div class="col-md-6">
                             <div class="form-group" style="margin-top: 20px; margin-right: 20px;">
                                 <div class="switch" data-display="input_status">
                                     <%= f.label :show_image %>
                                     <%= f.check_box :show_image, class: "bootstrap-switch" %>
                                     <i class="fas fa-circle-notch fa-spin"></i>
                                 </div>
                             </div>
                            <div class="form-group">
                                <%= f.label :ebook_header %>
                                <%= f.text_field :theme_header, required: true, class: "form-control" %>
                            </div>
                            <div class="form_group">
                                <%= f.label :ebook_image %>
                                <%= f.select :theme_image, options_for_select([['Theme1', 1], ['Theme2', 2]], selected: @landing_page.theme_image), {}, required: true, class: "form-control" %>
                            </div>
                            <div class="form-group" style="margin-top: 10px;">
                                <%= f.label :ebook_checklist %>
                                <%= f.text_area :theme_checklist, required: true, class: "form-control", rows: 5 %>
                                <small>As this will be a checklist, write each statement on a new line.</small>
                            </div>
                            <div class="actions">
                                <%= f.submit "Save", class: "btn btn-primary", data: { disable_with: 'Please Wait…' } %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<% end %>

2 个答案:

答案 0 :(得分:0)

如果您想为同一表格使用不同的动作处理程序,则不应使用package lostmusicadmin; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; public class Jobs { private String dbHost = "localhost"; private String dbName = "ajax"; private String dbUser = "root"; private String dbUserPW = ""; private String DB_URL = "jdbc:mysql://" + dbHost + "/" + dbName; public String getDBTime() { Connection conn = null; PreparedStatement ps = null; try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager.getConnection(DB_URL, dbUser, dbUserPW); ps = conn.prepareStatement("select now() as time from dual"); ResultSet rs = ps.executeQuery(); String time = null; while (rs.next()) { time = rs.getString("time"); } return time; } catch (SQLException se) { se.printStackTrace(); return "reject1"; } catch (Exception e) { e.printStackTrace(); return "reject2"; } finally { try { if (ps != null) ps.close(); } catch (SQLException se2) { return "reject3"; } try { if (conn != null) conn.close(); } catch (SQLException se) { se.printStackTrace(); return "reject4"; } } } } 标签。

您应该使用submit标记代替submit

例如:

button

= button_to( "First Action", action: "first_action", controller: "your_controller")

在控制器上:

= button_to( "Second Action", action: "second_action", controller: "your_controller")

答案 1 :(得分:0)

由于安装了bootstrap,因此您的提交可以与bootstrap类完美配合。确保您已将引导程序添加到您的Gemfile中:

gem'bootstrap','〜> 4.1.1'

运行捆绑包安装

确保链轮轨道至少为v2.3.2。

在app / assets / stylesheets / application.scss中导入Bootstrap样式:

@import“ bootstrap”;

重新启动服务器,看看它是否可以工作。