Laravel 5.6 Ajax Jquery Modal insertion to Database not working

I'm new to Laravel 5.6 and using Ajax for CRUD into Database, when i try inserting data from my modal it doesn't work. In the migration file, I've changed default "id" to "asset_category_id" and protected it in the Model Class so in my my database the columns are asset_category_id, category, created_at and updated_at.

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Asset_category;
use Illuminate\Support\Facades\Response;
use Illuminate\Validation\Validator;
use Illuminate\Support\Facades\Input;
use App\Http\Requests;

class Asset_categoriesController extends Controller
{

    public function index(){
        $asset_categories = Asset_category::all();
        return view('/asset_category/index', compact('asset_categories'));
    }

    public function addCategory(Request $request){
        $rules = array(
            'category' => 'required'
        );
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
            return response::json(array('errors'=> $validator->getMessageBag()->toarray()));

        else{
            $asset_categories = new Asset_category;
            $asset_categories->category = $request->category;
            $asset_categories->save();
            return response()->json($asset_categories);
        }
    }
}

Bootstrap Modal for Insertion

<!-- /.modal to create a new Asset Category -->

        <div id="create" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Add Asset Category</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">

                            <div class="form-group row add">
                                <label class="control-label col-sm-2" for="category">Category :</label>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="category" class="form-control" id="category" placeholder="Asset Category Here" required>
                                        <p class="error text-center alert alert-danger hidden"></p>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning" type="submit" id="add">
                            <span class="glyphicon glyphicon-plus"></span>Save Post
                        </button>
                        <button class="btn btn-warning" type="button" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>Close
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
<!-- /.modal -->

JavaScript Code (In the Js code the $("add").click(function()) is underlined saying invalid number of arguments)

       <script type="text/javascript">
            $(document).on('click','.create-modal', function() {
                $('#create').modal('show');
                $('.form-horizontal').show();
                $('.modal-title').text('Add Asset Category')
            });

            $("#add").click(function(){
              $.ajax({
                  type : 'POST',
                  url : 'addCategory',
                  data : {
                      '_token': $('input[name=_token]').val(),
                      'category': $('input[name=category]').val(),
                  },
                  success: function(data) {
                      if((data.errors)){
                          $('.error').removeClass('hidden');
                          $('.error').text(data.errors.category);
                      }else{
                          $('.error').remove();
             $('#table').append("<tr class='asset_category" + data.asset_category_id + "'>"+
            "<td>" + data.asset_category_id + "</td>"+
            "<td>" + data.category + "</td>"+
            "<td><a class='show-modal btn btn-info btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='fa fa-eye'></i></a>"+
            "<a class='edit-modal btn btn-warning btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='glyphicon glyphicon-pencil'></i></a>"+
            "<a class='delete-modal btn btn-danger btn-sm' data-id='" + data.asset_category_id + "' data-category'" + data.category + "'>"+
            "<i class='glyphicon glyphicon-trash'></i></a>"+
            "</td>"+
            "</tr>");
            }
        },
      });
      $('#category').val('');
    });
        </script>

The blade.php

<table class="table m-0" id="table">

                                                <tr>
                                                    <th>ID</th>
                                                    <th>Category</th>
                                                    <th>Action</th>
                                                    <th class="text-center" width="150px">
                                                        <a href="#" class="create-modal btn btn-success btn-sm">
                                                            <i class="glyphicon glyphicon-plus"></i>
                                                        </a>
                                                    </th>
                                                </tr>
                                                
                                                @foreach($asset_categories as $asset_category)

                                                    <tr class="asset_category">
                                                        <td></td>
                                                        <td></td>
                                                        <td>
                                                            <a href="#" class="show-modal btn btn-info btn-sm" data-id=""
                                                               data-category="">
                                                                <i class="fa fa-eye"></i>
                                                            </a>

                                                            <a href="#" class="edit-modal btn btn-warning btn-sm" data-id=""
                                                               data-category="">
                                                                <i class="glyphicon glyphicon-pencil"></i>
                                                            </a>
                                                            <a href="#" class="delete-modal btn btn-danger btn-sm" data-id=""
                                                               data-category="">
                                                                <i class="glyphicon glyphicon-trash"></i>
                                                            </a>
                                                        </td>

                                                    </tr>
                                                    @endforeach

                                            </table>

Thank you in advance for any suggestions.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2JXzxCa
via IFTTT