Adding data to database using ajax jquery in laravel

Question

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Category;

class categorycontroller extends Controller
{
    public function display()
    {
   		 $cat=Category::all();
        return view ('category',['cat'=>$cat]);

    }
    public function add(Request $request)
    {
    	Category::create([
    		'Name' =>$request->name
    	]);
    	return response()->json(['success'=>'Data is successfully added']);
    }
}

Route::get('/category','categorycontroller@display');
Route::get('/category/add','categorycontroller@add');

@extends('layout1')

@section('content')
<form id="myform">
    <div class="form-group">
    	<!--<label for="name">Name :</label>-->
    	<table class="table table-bordered">
            <thead><tr><th>Category</th><th colspan="2" align="center">Action</th></tr></thead>
    		<tbody>
            </div>
                @foreach($cat as $c)
    			<tr id='cat_{{$c->id}}'>
    			<td><input type="text" class="form-control" id="name_{{$c->id}}" value="{{$c->Name}}"></td>
    			<td><button class="btn btn-primary" id="btnupdate_{{$c->id}}" onclick="updatecat({{$c->id}})">Update</button></td>
    			<td><button class="btn btn-primary" id="btndelete_{{$c->id}}" onclick="deletecat({{$c->id}})">Delete</button></td>	
    			</tr>
                @endforeach
    		</tbody>
            <tr><th colspan="2">New Category</th></tr>
            <tr><td>
               <div class="form-group">
                <input type="text" class="form-control" id="name_0" value="">
            </div>
        </td>
        <td>
        <button class="btn btn-primary" id="btnadd">Add</button>
    </td>
</tr>
</table>
</form>
<script type="text/javascript" src="{{asset('js/jquery.js')}}"></script>
  <script>
     $(document).ready(function(){
          $("#btnadd").on('click',function(e){
            
            e.preventDefault();
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN':$('meta[name="_token"]').attr('content');
                }
            });
               $.ajax({
               url:"{{url('category/add')}}",
                method:'get',
                data:{
                    name:$('#name_0').val()
                },
                success:function(result)
                {
                    $('.alert').show();
                    $('.alert').html(result.success);
                    //$('#tbcat').append(result.row);
                }
            });
        });
      });
</script>

@endsection

I write this code to display categories in the table from the database, it worked successfully. then I added ajax jquery code to add category to the database and display it after added to the table in the form. I wrote my codes in a blade.php and in the route and I used class category and category controller but when I click add button it's doesn't work successfully. Please can anyone help me to correct the error h

Uncaught SyntaxError: Unexpected token ; in this line 'X-CSRF-TOKEN':$('meta[name="_token"]').attr('content'); — Wassim BouZeid
– Wassim BouZeid, Commented Nov 29, 2018 at 17:16
also $.ajaxSetup part should be included in your layout file, not inside onclick event handler. and do you have <meta name="csrf-token" content="{{ csrf_token() }}"/> in your layout's file head section? — Sachem
– Sachem, Commented Nov 29, 2018 at 17:17
one more comment from me is that whenever you are modifying the database it should be a POST, not GET request, though it's not what;s causing your error, just a rule to remember and follow ;) — Sachem
– Sachem, Commented Nov 29, 2018 at 17:18
can you please tell me what to edit in my code clearly and thank you for your time — Wassim BouZeid
– Wassim BouZeid, Commented Nov 29, 2018 at 17:21

Sachem · Accepted Answer · 2018-11-29 17:37:57Z

1

In your resources/views/layouts folder, the main layout file should have those two elements to prevent CSRF attacks.

<!DOCTYPE html>

...

  <meta name="csrf-token" content="{{ csrf_token() }}"/> 

...

</head>
<body>

    ...

    <script type="text/javascript">
      $.ajaxSetup({
         headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
      });
    </script>

...

</body>

Also you need to remove this second part ($.ajaxSetup) from your onclick event handler. so it looks like this:

<script>
 $(document).ready(function(){
      $("#btnadd").on('click',function(e){

        e.preventDefault();

           $.ajax({
           url:"{{url('category/add')}}",
            method:'get',
            data:{
                name:$('#name_0').val()
            },
            success:function(result)
            {
                $('.alert').show();
                $('.alert').html(result.success);
                //$('#tbcat').append(result.row);
            }
        });
    });
  });

edited Nov 29, 2018 at 17:37

answered Nov 29, 2018 at 17:23

Sachem

4911 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wassim BouZeid Over a year ago

You are kinggg maan

Sachem Over a year ago

happy to help :)

Collectives™ on Stack Overflow

Adding data to database using ajax jquery in laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related