This view has a link which calls a javascript function
@extends('layouts.main')
@section('content')
<table class="table">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Opción</th>
</tr>
@foreach ($tasks as $task)
<tr>
<td>{{$task->id}}</td>
<td>{{$task->name}}</td>
<td><a href="javascript:void(0)" onclick="eliminar({{$task->id}})" class="btn btn-danger">Eliminar</a></td>
</tr>
@endforeach
</table>
@stop
and here is the javascript code
function eliminar(id){
$.ajax({
type: "DELETE",
url: "task/"+id,
success: function (data) {
console.log(data);
},
error: function (data) {
alert('Error:', data);
}
});
}
and with the ajax call i want to call the destroy method of my controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Task;
class TaskController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$tasks = Task::all();
return view('mainview',['tasks' => $tasks]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
return "destroy";
}
}
But when I click the links I get this error :
TokenMismatchException in VerifyCsrfToken.php line 67
I'm new on Laravel but I thought that csrf was for forms.
This view has a link which calls a javascript function
@extends('layouts.main')
@section('content')
<table class="table">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Opción</th>
</tr>
@foreach ($tasks as $task)
<tr>
<td>{{$task->id}}</td>
<td>{{$task->name}}</td>
<td><a href="javascript:void(0)" onclick="eliminar({{$task->id}})" class="btn btn-danger">Eliminar</a></td>
</tr>
@endforeach
</table>
@stop
and here is the javascript code
function eliminar(id){
$.ajax({
type: "DELETE",
url: "task/"+id,
success: function (data) {
console.log(data);
},
error: function (data) {
alert('Error:', data);
}
});
}
and with the ajax call i want to call the destroy method of my controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Task;
class TaskController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$tasks = Task::all();
return view('mainview',['tasks' => $tasks]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
return "destroy";
}
}
But when I click the links I get this error :
TokenMismatchException in VerifyCsrfToken.php line 67
I'm new on Laravel but I thought that csrf was for forms.
Share Improve this question edited Jun 6, 2016 at 17:33 Zakaria Acharki 67.5k15 gold badges78 silver badges105 bronze badges asked Jun 6, 2016 at 17:24 AFSAFS 1,4436 gold badges30 silver badges53 bronze badges3 Answers
Reset to default 10You should add csrf_field
to your main blade :
{{ csrf_field() }}
Then add _token
to your request :
var _token = $('input[name="_token"]').val();
function eliminar(id){
$.ajax({
type: "DELETE",
url: "task/"+id,
data: { _token : _token },
success: function (data) {
console.log(data);
},
error: function (data) {
alert('Error:', data);
}
});
}
Or you could add it one time in ajaxSetup
and it will affect all calls to $.ajax
or Ajax-based derivatives such as $.get()
:
$.ajaxSetup(
{
headers:
{
'X-CSRF-Token': $('input[name="_token"]').val()
}
});
Take a look to CSRF Protection.
Hope this helps.
This is what worked for me. I found several answers online and none of them alone worked; however, after bining all, I got the Ajax call to go through.
In the head of your view file, add the following line:
<meta name="csrf-token" content="<?php echo csrf_token() ?>"> // This will retrieve the necessary token.
Then, retrieve the value of the token and place it on a variable (optional step):
var currentToken = $('meta[name="csrf-token"]').attr('content');
On your ajax call, include the value of the token in the 'data:' field:
$.ajax({type: 'POST', data: {_token:currentToken},....});
You may avoid the optional step of creating a new variable to it on the 'data:' field; however, I find this step easier to understand.
Hope this helps.
You need to add the token input field when passing the 'DELETE' method.
Html:
<input class="token" value="{{ csrf_field() }}"/>
Code:
function eliminar(id){
var formData = '_token=' + $('.token').val();
$.ajax({
type: "DELETE",
url: "task/"+id,
data: formData,
success: function (data) {
console.log(data);
},
error: function (data) {
alert('Error:', data);
}
});
}
You could also remove that route from the verification process by adding it to the except array in the Middleware.