新手问题表单提交 Submit 按钮没反应，直到刷新

lebao · 2015年11月04日 · 最后由 youjiuzidangge 回复于 2018年03月23日 · 8050 次阅读

点击 submit ,没反应，然后我刷新下，再填写，然后提交，就可以了.. 而且这种情况只会出现在第一次，

代码如下 ,有了解的大神能帮忙看下么？??万分感谢

<%= form_for @message,url: {action: "create"}, :html => {:class => "form-horizontal parent"} do |f| %>
  <%= f.text_field :business_id,:value=>@business.id, :type=> 'hidden',:class => 'form-control' %>

  <div class="control-group">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">模板内容</span>
      <%= f.text_field :content, :class => 'form-control',:required => true %>
    </div>
  </div>
  <div class="control-group">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">描述</span>
      <%= f.text_field :description, :class => 'form-control',:required => true %>
    </div>
  </div>

  </div>
  <div class="modal-footer">
    <span class="tips"><%= alert %></span>

    <%= f.submit 'Submit', :class => 'btn btn-default' %>
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </div>
<% end %>

lebao #1 2015年11月04日

@huacnlee 请帮忙审查下

huacnlee #2 2015年11月04日

看不出问题

浏览器 -> 开发者工具打开，看看是否有 JS 错误之类的

lebao #3 2015年11月04日

#2 楼 @huacnlee 这个肯定是看过的，, 没有发出请求，..没有 js 错误，

huacnlee #4 2015年11月04日

查看 HTML 代码，贴出来看看
查看 Submit 按钮是不是 type="submit"
查看点击 Submit 以后，浏览器网络请求那一栏是否有请求发出，查看 Rails 控制台日志，是否收到提交的请求

raecoo #5 2015年11月04日

turbolinks?

dandananddada #6 2015年11月05日

你这是个模态框吧，把整个模态框代码都贴出来看看

lebao #7 2015年11月05日

#4 楼 @huacnlee 嗯嗯..确实是先按照这个解决思路查了，也让前端同学帮忙看了下..依然没发现具体原因..本人小白..刚接触 rails. 非常感谢..

lebao #8 2015年11月05日

#6 楼 @dandananddada 以下是生成的代码


<!DOCTYPE html>
<html>
<head>
  <title>Sms</title>
  <link rel="stylesheet" media="all" href="/assets/app.self-14d936d24a52cb16056f49bdc8a9290de21e53a5bb6e808879d08c2a4e439e68.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/bootstrap3.self-2be307b58e3191c875e96e4d9416ada5ea66b3271b60a50f012957326293628c.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/business.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/message.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/style.self-16f970d7a4a97f9351fb14b570243a74731e9e3d3760504655dd44255288702f.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d456baa54c1fa6be2ec3711f0a72ddf7a5b2f34a6b4f515f33767d6207b7d4b3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/business.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/message.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="3fOv1dTdlBEgoTmvV7D++9x7OCbdtypPgyjp3Z0sRcc1kXh3YdfcXQnRReooYNgpDezi8dn/uQqOlJLnicwJxA==" />

</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">后台管理系统</a>
    </div>
    <div class="navbar-collapse collapse pull-right">
      <ul class="nav navbar-nav">

            <li class='active'>
              <a href="#">[email protected]</a>
            </li>
            <li class='active'>
              <a rel="nofollow" data-method="delete" href="/users/sign_out">退出</a>
            </li>
            <li class='active'>
              <a href="/users/edit">编辑注册信息</a>
            </li>

      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row" >

        <div class="col-sm-3 col-md-2 sidebar" style="margin-top: 30px">
  <ul class="nav nav-sidebar" style="text-align: center">

    <li class='active'><a href="/business/new">所有业务</a></li>
        <li><a href="/business/15/message">业务一</a></li>
        <li><a href="/business/16/message">业务二</a></li>
        <li><a href="/business/17/message">业务三</a></li>

  </ul>
</div>
    <div class="col-xs-12 col-sm-9 col-md-10">
      <h3 class="page-header">业务二</h3>


<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" style="float: right">
  New
</button>



<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">添加短信模板</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal parent" id="new_message" action="/business/16/message" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="B4IIt9j+oMXlEAmGEQP/4t8S2r0L+ko0l91kV94IZeLv4N8VbfToicxgdcNu09kwDoUAag+y2XGaYR9tyugp4Q==" />

            <input value="16" type="hidden" class="form-control" name="message[business_id]" id="message_business_id" />

            <div class="control-group">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">模板内容</span>
                <input class="form-control" required="required" type="text" name="message[content]" id="message_content" />
              </div>
            </div>
            <br>
            <div class="control-group">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">短信描述</span>
                <input class="form-control" required="required" type="text" name="message[description]" id="message_description" />
              </div>
            </div>

            </div>
            <div class="modal-footer">
              <span class="tips"></span>

              <input type="submit" name="commit" value="Submit" class="btn btn-default" />
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
</form>        </div>
  </div>
</div>



<div class="table-responsive" >

  <table class="table" contenteditable="false">
    <thead>
    <tr>
      <th>id</th>
      <th>短信内容</th>
      <th>描述</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>



    </tbody>
  </table>


</div>
    </div>

  </div>
  <script src="//cdnjs.bootcss.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</div>
</body>
</html>

lebao #9 2015年11月05日

#5 楼 @raecoo turbolinks 以前没听说过... 尴尬..... 赶紧百度了下先..多谢多谢

billy #10 2015年11月05日

首先你得把 markup 写对，不然问题一个接一个。按 Bootstrap 定义 modal-body 是不包裹 modal-footer 的，你这里包裹了，还把 form 混在一起。

写个干净的 html, 把 form 放到 modal-body 里面，可以不要 button。然后监听 modal primary button 的点击事件，安排 form submit 就可以了。

huacnlee #11 2015年11月05日

application.js.coffee 里面去掉 require turbolinks 先

用排查的方式把，HTML 看起来没什么问题

lebao #12 2015年11月05日

#11 楼 @huacnlee 嗯嗯是的。已经 OK 了 #5 楼 @raecoo 多谢多谢

lebao #13 2015年11月05日

#10 楼 @billy 非常感谢关注和建议 .. 这个问题已经解决了

youjiuzidangge #14 2018年03月23日

可以问一下怎么解决的吗？

需要登录后方可回复, 如果你还没有账号请注册新账号

新手问题 表单提交 Submit 按钮没反应，直到刷新

新手问题 表单提交 Submit 按钮没反应，直到刷新

新手问题表单提交 Submit 按钮没反应，直到刷新

新手问题表单提交 Submit 按钮没反应，直到刷新