Question 17028 in Laravel Question posted in
The official Laravel Documentation can be found here.

How do I stop duplicate content from appearing in my view when using laravel and ajax?

Here is my view(Ajax)

                $('#basicInfoForm').submit(function(e){
                        e.preventDefault();
                        let formData = new FormData(this);
                        $.ajax({
                            type: "POST",
                            url: "{{route('profile.basic_info')}}",
                            dataType: 'json',
                            data: formData,
                            contentType: false,
                            processData: false,
                            beforeSend:function(){
                                $("#fountainG").fadeIn(1000);
                            },
                            success: function(response){
                               $.each(response.errors, function (key, value) { 
                                 $("#fountainG").fadeOut(1000);
                                 $('.alert-danger').fadeIn(2000);
                                 $('.alert-danger').append('<span>'+value+'</span>'+'<br>');
                                 setTimeout(function() {
                                    $('.alert-danger').fadeOut(4000, 'swing');
                                }, 3000);
                                 
                               });
                            },
                            error: function(data){
                                iziToast.error({
                                title: 'Upload Error',
                                message: data.avatar,
                                position: 'topRight'
                            });
                            }
                        });
                    });

And, here is my controller

    public function updateBasicInformation(Request $request)
    {
        $basic_info = Validator::make($request->all(), [
            'fullname' => 'required|min:2|max:255',
            'phone_number' => 'required|numeric|min:10',
            'email' => 'required|unique:users',
            'country' => 'required',
            'address' => 'required',
        ], [
            'phone_number.min' => "The phone number must be at least 10 digits",
        ]);

        if($basic_info->fails())
        {
            return response()->json([
                'errors'=> $basic_info->errors()->all()
            ]);
        }
    }

So, basically, there is form with the ID:

basicInfoForm

and the div with the class -alert-danger displays the error. But when I submit the form more than once, it keeps on duplicating the errors even the ones that have been properly validated.

The error

How do I get around this, please?

I tried changing the dataType to json but it didn’t make any difference.

I am new to Ajax and Laravel

Tags:

2

Answers


  1. 0

    On each submit clear all the errors from UI:

    $('#basicInfoForm').submit(function(e){

e.preventDefault();

$('.alert-danger').remove();

// ...

});
    Login or Signup to reply.
  2. 0

    on every submit call you are appending errors and not clearing previous error.
    you can do this to fix this.

    remove previous error div from DOM and append new error div on AJAX success.

    success: function(response){

        $('.alert-danger').remove();

        $.each(response.errors, function (key, value) { 
        //

    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search