除非重新加载页面,Rails 4和Bootstrap

时间:2016-09-29 13:10:38

标签: javascript jquery ruby-on-rails ajax twitter-bootstrap

我的应用程序包含索引显示页面。非常简单的代码等 使用Devise gem处理的简单注册。

在索引页面中,我有 Bootstrap模式进行注册:

     <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog log-modal">
                            <div class="modal-content">

                        <div class="user-registration-content">

                            <div class="modal-header clearfix">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title pull-left"><%= t('user_creation') %> <!--Lietotāja izveide --></h4>

                                <%= link_to '#',:class=>"pull-right",:id=>"login-path-link" do %>

                                               <span><%= t('already_registered') %> <!--Jau esi reģistrēts --></span>
                                    <%end%>
                            </div>

                            <div class="modal-body">
                                <span><%= t('please_fill_form') %></span>

                                <%= form_for(@user, :html => {:id=>"sign_up_user" ,:class=>"registration-form-modalc","data-parsley-validate" => true},remote: true, format: :json,as: @user, url: registration_path(@user)) do |f| %>

                                    <div class="form-group">                                    
                                         <%= f.text_field :name,:class=> "user-input form-control", :id=>"user-name",autofocus: true ,:placeholder=> t('username_2'),:required => true,:'data-parsley-minlength'=>"3"%>                                    
                                    </div>

                                    <div class="form-group">                         
                                         <%= f.password_field :password,:id=>"passwordis",:class=> "user-input form-control", autocomplete: "off" ,:placeholder=> t('new_password'),:required => true,:'data-parsley-minlength'=>"8" %>                                     
                                    </div>

                                    <div class="form-group">
                                        <%= f.password_field :password_confirmation, :id=>"password-again",:class=> "user-input form-control", autocomplete: "off" ,:'data-parsley-equalto'=>"input#passwordis",:placeholder=> t('new_password_2'),:required => true,:'data-parsley-minlength'=>"8"%>
                                        <%= f.hidden_field :role, :value => "user"%>
                                        <%= f.hidden_field :country_id, :value => @location.id%>                                                        
                                    </div>

                                    <div class="form-group">
                                       <%= f.email_field :email ,:class=>"user-input form-control" ,:'data-validatess' => '/blocked/checkemail',:id=>"emailito",:placeholder=> t('email'),:required => true%> 
                                         <h3 id="email-taken-message" style="display:none;margin-left:140px;color:red;padding-top:7px;"> <%= t('email_not_available') %> </h3>                                                                                                                
                                    </div>

                                    <%= f.hidden_field :humanizer_question_id %> 



                      <div class="question-content" style="position:relative;top:1px;">

                              <span class="question"><%= t('question') %>:</span>

                              <span class="answer"  >
                                 <%= f.label :humanizer_answer, @user.humanizer_question %>  
                              </span>

                              <div class="form-group" style="margin-bottom:21px;">
                               <span class="question" style="margin-top:8px;"><%= t('answer') %>: *</span>                              
                                   <%= f.text_field :humanizer_answer ,:class=> "form-control",:required => true, :id=>"answer"%>
                              </div>                                            
                       </div>

                        <%= f.submit t('confirm'),:class=> "blue-button btn btn-default"%>

                                <div class="squared">

                                    <%= f.check_box :terms_of_service,:id=>"accept",:required => true,:type=> "input"%>
                                    <!--<input type="checkbox" value="" id="accept" name="check" /> -->
                                    <label style="left: 0px;"for="accept"><span><%= t('read_and_agree') %> <!--Izlasīju un piekrītu  -->


                                    <%= link_to t('rules_2'),help_path, :target=>'_blank' %>
                                    </span>

                                    </label>


                                </div>

                                <div class="squared">

                                    <%= f.check_box :not_a_robot,:id=>"user-status",:required => true, :type=> "input"%>
                                    <label style="left: 0px;"for="user-status"><span><%= t('not_robot_confirm') %></span></label>

                                </div>


                                <div class="squared">
                                 <%= f.check_box :im_old,:id=>"user-age",:required => true, :type=> "input"%>

                                    <label style="left: 0px;"for="user-age"><span><%= t('already_adult') %></span>

                                    </label> 
                                </div>

                            </div>

<%end%>

</div>

               </div>
          </div>
    </div>

Application_layout 文件的末尾:

 <%= javascript_include_tag "application" %>  

    <script src="/assets/lightbox.js"></script>
    <script src="/assets/bootstrap.min.js"></script>
    <%= javascript_include_tag "co.js" %>

    <script src="/assets/scripts.js"></script>  

注册过程由 remote =&gt;处理是的。

的script.js:

$(document).ready(function() {
  return $("form#sign_up_user").on("ajax:success", function(e, data, status, xhr) {


             $(".user-registration-content").hide();
             $(".registration-sent").show();


  }).on("ajax:error", function(e, xhr, status, error) {


    alert("Error user registration");

  });
});

Application.js文件:

//= require jquery
//= require jquery_ujs
//= require jquery.remotipart
//= require turbolinks
//= require parsley
//= require_tree.

问题:除非在触发模式和填写表单之前刷新页面,否则提交表单会触发2个相同的请求。如果我访问show page然后返回索引页面来注册表单提交触发4个相同的请求。

基本上,每次用户访问时,显示页面请求数增加2.最后,请求最多可达10个。重新加载页面后,一切都恢复正常。

当我点击发送到root_path的页面徽标基本上是相同的索引页面时,会出现同样的问题。循环继续。

我尝试了什么:

1)从scripts.js文件中删除了除脚本以处理注册过程的所有其他脚本(参见上面的脚本)

2)将所有点击元素更改为.one('click', function(

3)从我的页面中删除了所有其他Bootstrap模式,以便可以排除冲突的可能性。

4)对索引显示页面进行双重检查页面来源,以检查是否只调用了一次script.js文件。

5)我已经清除了tmp / assets文件夹。

6)所有浏览器都会出现问题。

注意:每个ajax请求都会出现此问题。在我的应用程序中,我有很多带有ajax提交的模态,除非我每次都重新加载页面,否则它们每个都有相同的问题。

我已经没有选择尝试了。

提前感谢您的帮助。

0 个答案:

没有答案