AJAX Request Show Only One, but Controller called twice

Asked by: Robby Christianto

i have problem with my Project. When i submit form, Ajax request only 1 in Developers Tool Mozilla but suddenly in Server As if the request called twice (i check with add log in the code). Sometimes this problem does not happen, but more happens. Is it possible to related with stability internet connection?

Here is my ajax.

$('#GIForm').submit(function(e) {
        e.preventDefault();
    }).validate({
        submitHandler:function(form){
            if(countSave == 0){
                $.ajax({
                    url:'/new',
                    method:'post',
                    async: false,
                    data: {
                        date : $('#GIDate').val(),
                        notes : $('#GINotes').val(),
                        mswarehouse_id : $('#GISourceWarehouse').val(),
                        mstransactiontype_id : $('#GIType').val(),
                        dest_msoutlet_id : $('#GIOutlet').val(),
                        msvendor_id : $('#GIVendor').val(),
                        detail : detail
                    },
                    success: function(response){
                        $('#pleaseWaitDialog').modal('hide');
                        if(response.status=='success'){
                            var message = 'Document ' + response.description.document + ' has been saved!';
                            showAlert('',message,'success',function(e){
                                window.location.replace(laroute.route('admin.goods_issue.index'));
                            });
                        }else{
                            showAlert('',response.description,'error');
                            $('#addGIbtn').prop('disabled',false);
                            countSave = 0;
                        }
                    }, error:function(xhr,text, status){
                        $('#pleaseWaitDialog').modal('hide');
                        $('#addGIbtn').prop('disabled',false);
                        countSave = 0;
                        if(xhr.status==422){
                            showAlert('',xhr.responseJSON.join('\n'),'error');
                        }
                    }
                });
                return false;
            }
        }
    });

Here is picture from Dev. Tools Mozilla. I blur the domain. I don't know why the color status response only gray, and the response already give back status success. This problem make insert my database twice. This is screenshot from my mozilla. Response from Network Dev Tools Mozilla

Please help, I have no idea anymore

Answers

Answered by: Zaheer Ul Hassan at 2017-07-11 04:06PM

There is a submitHandler built into the plugin that contains something like form.submit(). Since you're .submit() with form that is not needed.So remove $('#GIForm').submit(function(){}).

 $('#GIForm').validate({
        submitHandler:function(form){
            if(countSave == 0){
                $.ajax({
                    url:'/new',
                    method:'post',
                    async: false,
                    data: {
                        date : $('#GIDate').val(),
                        notes : $('#GINotes').val(),
                        mswarehouse_id : $('#GISourceWarehouse').val(),
                        mstransactiontype_id : $('#GIType').val(),
                        dest_msoutlet_id : $('#GIOutlet').val(),
                        msvendor_id : $('#GIVendor').val(),
                        detail : detail
                    },
                    success: function(response){
                        $('#pleaseWaitDialog').modal('hide');
                        if(response.status=='success'){
                            var message = 'Document ' + response.description.document + ' has been saved!';
                            showAlert('',message,'success',function(e){
                                window.location.replace(laroute.route('admin.goods_issue.index'));
                            });
                        }else{
                            showAlert('',response.description,'error');
                            $('#addGIbtn').prop('disabled',false);
                            countSave = 0;
                        }
                    }, error:function(xhr,text, status){
                        $('#pleaseWaitDialog').modal('hide');
                        $('#addGIbtn').prop('disabled',false);
                        countSave = 0;
                        if(xhr.status==422){
                            showAlert('',xhr.responseJSON.join('\n'),'error');
                        }
                    }
                });
                return false;
            }
        }
    });

Hope It Helps!

Source