Bootstrap Modal Ajax表格多次提交

Question

我使用AJAX以模态调用表单，并使用模态按钮.save-modal使用AJAX提交表单。该表格有很多意见，我不知道为什么？

模式下请求的页面中的以下代码：

````

@section('content')
<h1>kk</h1>
<div id="modal">
    {!! Form::model('AppSolution',['url' => $actionPath, 'id' => 'sForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
    {!! Form::label('title', __('Title')) !!}
    {!! Form::text('title',$solution->title,['class' =>'form-control']) !!}
    @php ($eleE =  $errors->first('title'))
     {{-- @include('layouts.form-ele-error') --}}
    </div>
    <div class="form-group">
    {!! Form::label('description', __('Description')) !!}
    {!! Form::textarea('description',$solution->description,['class' =>'form-control']) !!}
    @php ($eleE =  $errors->first('description'))
     {{-- @include('layouts.form-ele-error') --}}
    </div>
    {!! Form::close() !!}

<script>
    $(document).ready(function(){
        $(".save-modal").click(function(e){
            alert('many time alert') //
       e.preventDefault();
       $.ajax({
           url: '{{$actionPath}}'+'/?'+Math.random(),  
           type: "POST",
           data: $("#sForm").serialize(),
           success: function(data){
               $("#modal-body").html($(data).find('#flash-msg'))
               $("#actions-modal").modal('hide')
               //return true;
           },
           error: function(xhr, status, response){
               if ( status == "error" ) {
                    var msg = "Sorry but there was an error: ";
                    // $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText );
                    errors = xhr.responseJSON
                    console.log(errors)
                    $("#errors").html('');
                    $.each(errors,function(key, val){
                        console.log(key)
                        $("#errors").append('<span class="has-error help-block">'+val+'</sapn>')
                         //return false;
                    })
                    xhr.responseJSON = null;
                    }
                    return false;
           }
       })
       return false;
      })
      });
      </script>
   </div>
@endsection

$(".save-modal").click(function(e){...之后的警报已被警报多次，特别是在关闭模态并重复尝试保存无效条目时再次打开它时，警报中的增加没有修复，即它是无效的数据提交的总和。模态。

以下是基本页面上的模态代码：

$(".action-create").click(function(e){
    e.preventDefault();
    alert($(this).attr('href'))

    mhd = $(this).attr('title');//$(this).text()+' {{__("for Cavity")}}'+' '+$(this).attr('title');
    href = $(this).attr('href')

    //console.log(href)
    $("#actions-modal").on('show.bs.modal', function(){
            $("#modal-hd").html('<h4 style="display: inline">'+mhd+'</h4>');  
            $("#modal-body").html('<h4>{{__('Loading')}}<img src="/imgs/loading.gif" /></h4>')     
            gg(href)
            })
    $("#actions-modal").modal({
        backdrop: 'static',
        keyboard: false        
        });
    });
    $("#actions-modal").on('hidden.bs.modal', function(){
        $("#modal-body").html('');
        $(this).data('bs.modal', null);
        //$(this).children('#errors').html('');
        $("#errors").html('');
        return false;
    });
    gg = function gg(){
        $.ajax({
                type: "GET",
                url: href,
                dataType: 'html',
                success: function(data){
                    //console.log(data)
                    required = $(data).find("#modal");
                    $("#modal-body").html(required);
                },
                error: function(xhr, status, response ){
                    if ( status == "error" ) {
                    var msg = "Sorry but there was an error: ";
                     $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText+ " With custom message:<br> "+ xhr.responseText );
                     //console.log(xhr)
                    }
                }
        });
        return false;
    }

我尝试在代码的许多部分中添加return false来削减任何额外的评估，我还尝试将随机数添加到Ajax URL Math.random()，但似乎已执行了很多次。

使用模态在同一页面上还有另一个表格调用，有时除了称为式！

Answer 1

使用ajax调用表单时，您应该记住，每次收到响应时，都会执行javascript/jquery文档代码。

所以，当您首次打开模型时"。save-modal"点击事件就会进行。关闭并重新打开模型时。再次请求转到加载在浏览器窗口中的服务器AJAX内容，并再次键入点击事件。这样，您最终会伴随多个匿名函数到单个事件。所有人都将在同一事件上执行。

解决方案1(推荐(：在主页(而不是AJAX(中包含的saperate js文件或内联声明功能。然后，使用jQuery而不是绑定点击事件。从您的" .save-modal"按钮的OnClick属性中调用功能。

解决方案2：声明一个全局变量" isajaxexecuting"。测试此变量是否为trui，然后从您保存函数中返回(这将停止执行(。如果不是真的，那就做到。执行您的ajax函数。收到响应后，然后再次将其变为错误。例如

var IsAjaxExecuting= false; // new code
$(document).ready(function() {
    $(".save-modal").click(function(e) {
        if(IsAjaxExecuting) return; // new code
        IsAjaxExecuting = true; // new code
        alert('many time alert');
        e.preventDefault();
        $.ajax({
            url: '{{$actionPath}}' + '/?' + Math.random(),
            type: "POST",
            data: $("#sForm").serialize(),
            success: function(data) {
                IsAjaxExecuting = false; // new code
                $("#modal-body").html($(data).find('#flash-msg'))
                $("#actions-modal").modal('hide')
                //return true;
            },
            error: function(xhr, status, response) {
                IsAjaxExecuting = false; // new code
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    // $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText );
                    errors = xhr.responseJSON
                    console.log(errors)
                    $("#errors").html('');
                    $.each(errors, function(key, val) {
                        console.log(key)
                        $("#errors").append('<span class="has-error help-block">' + val + '</sapn>')
                        //return false;
                    })
                    xhr.responseJSON = null;
                }
                return false;
            }
        })
        return false;
    })
});