在模式ajax中显示错误

Question

I'm new to ajax and I want to display the errors in my modal. i'm using laravel

This is my blade

> add-store.blade.php

<div class="pull-right">
    <button class="btn btn-success btn-outline" data-toggle="modal" data-target="#addBtn">+Add a new Store</button>
    <div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 class="modal-title" id="myModalLabel">Add A New Store</h5>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="control-label mb-10">Full Name</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="John Doe">
                        </div>

                        <div class="form-group">
                            <label class="control-label mb-10">Email</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="">
                            <p class="error text-center alert alert-danger hidden">
                        </div>

                        <div class="form-group">
                            <label class="control-label mb-10">Password</label>
                            <input type="password" class="form-control" name="password" id="password" placeholder="">
                        </div>

                        <div class="form-group">
                            <label class="control-label mb-10">Designate Store</label>
                            <select class="form-control" name="store_id" id="store_id">
                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save">Save</button>
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
    </div>
</div>

my script at the end of page

<script>
    var urlAdd = '{{ route('addSocialWorker') }}';
    var token = '{{ Session::token() }}';

    $("#save").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: urlAdd,
            data: {
                'name': $('#name').val(),
                'email': $('#email').val(),
                'password': $('#password').val(),
                'store_id': $("#store_id").val(),
                '_token': token
            },
            success: function (data) {
                if ((data.errors)) {
                    console.log(data);
                } else {
                    $('#usersTable').append(data);
                }
            },
        });
    });
</script>

AdminController.php

public function addSocialWorker(Request $request)
{
    $rules = [
        'name'     => 'required|max:255',
        'email'    => 'required|email|unique:users',
        'password' => 'required|min:4',
        'store_id' => 'required|numeric',
    ];

    $validator = Validator::make(Input::all(), $rules);

    if ($validator->fails()) {
        return Response::json([
            'errors' => $validator->getMessageBag()->toArray(),
        ]);
    } else {
        $data = new User();
        $data->name = $request->name;
        $data->email = $request->email;
        $data->password = $request->password;
        $data->status = 1;
        $data->role_id = 2;
        $data->store_id = $request->store_id;
        $data->save();

        return response()->json($data);
    }
}

with the validation above. I'm really new to ajax and jquery. Do you have ideas how to display the errors in the modal?

Answer 1

First you need to create class in your modal-body - let's call it errors, and place it on the very bottom in modal-body. This is where your errors will apear.

<div class="errors"></div>

If the data is sent correctly from your controller, then you need to loop in each error (in your success function). (alert alert-danger classes are bootstrap classes, you can remove it)

for (var i in data) {

  $('errors').append('<div class="alert alert-danger">'+data[i].error_text+'</div>');

}

The error_text can be versatile, it depends what's returned in your data response. You can check it out by using console.log(data).