I am trying to concatenate a variable to my url link in ajax. The variable $news is the one that handles the notification id.
$(document).on("click", "#viewList", function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var $news = $(this).prop("value");
$.ajax({
type: "get",
url : '{{url("admin/recipients/", $news)}}', //returning an error undefined variable news
data: {newsID : $news},
success: function(store) {
console.log(store);
$('#rec').text(store);
},
error: function() {
$('.alert').html('Error occured. Please try again.');
}
});
});
In my web.php, it's route is inside a route group.
Route::group(['middleware' => 'auth:admin'], function () {
Route::prefix('admin')->group(function() {
Route::get('/recipients/{news}', 'Admin\NewsController#recipients');
});
});
So how can I make this work? By the way, my ajax is inside a blade.php file.
$news doesnt exist to blade because it executes on the time server is rendering the page. So your javascript hasn't been executed yet. To make this work, change you js code to this:
$(document).on("click", "#viewList", function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var news = $(this).prop("value");
$.ajax({
type: "get",
url : '{{url("admin/recipients")}}' + '/' + news,
data: {newsID : news},
success: function(store) {
console.log(store);
$('#rec').text(store);
},
error: function() {
$('.alert').html('Error occured. Please try again.');
}
});
});
Can someone please show a Laravel 5.7 post ajax example with a full-working minimum example in a blade template? I know there are some resources in the web, but I miss a concise, straight-forward minimum example.
You can do something like this,
web.php
Route::post('/admin/order/{id}', 'OrderController#edit')->name('admin.order.edit');
blade.php
$(document).on('click', '.delete-button', function (e) {
e.preventDefault();
var orderId = 1
$.ajax({
type: 'post',
url: '/admin/order/' + orderId,
data: {
'_token': $('input[name=_token]').val(),
'data_one': 'dataone',
},
success: function () {
toastr.success('Order Has Been Deleted Successfully.');
},
error: function(XMLHttpRequest) {
toastr.error('Something Went Wrong !');
}
});
});
$.ajax({
url: 'http://some.working/url',
type: "POST",
data: $('#formContainer').serialize(),
success: function (response) {
console.log('Success', response);
},
error: function (response) {
console.log('Error', response);
}
});
The data can be produced in many ways for example
1. Using serialize() method as shown in the above example.
2. Using FormData():
for example
var data = new FormData($('#formContainer'));
In both of the above example, one thing compulsory is that your form
must contain csrf field. which can be provided using any of the
following methods:
<input type="hidden" name="_token" value="{{ csrf_token() }}" >
or
{{ csrf_field() }}
or even more simply by just using
#csrf
in some where in your form.
In case you are not using any form, you can create the data object by
yourself like this
var data = {
_token: '{{ csrf_token() }}',
data1: 'Value1',
data2: 'Value2',
data3: 'Value2'
}
Define a Web Route
Route::get('currencies/fiat/changeStatus','FiatCurrencyController#changeStatus')->name("currencies.fiat.chanageStatus");
Call this function on click onclick="changeStatus(1,0)"
function changeStatus(id,status){
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
/* the route pointing to the post function */
url: '/currencies/fiat/changeStatus',
type: 'GET',
/* send the csrf-token and the input to the controller */
data: {_token: CSRF_TOKEN,cid:id,status:status},
dataType: 'JSON',
/* remind that 'data' is the response of the AjaxController */
success: function (data) {
console.log(data);
}
});
}
That's it all Done.
$(document).ready(function(){
/* In laravel you have to pass this CSRF in meta for ajax request */
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
/* change in website layout base on click */
$('#user_view').on('click',function (e){
e.preventDefault();
$('.loading_screen').show();
var val = $(this).data('id');
$.ajax({
url: base_path + 'user/changeview/'+val,
type: "POST",
success: function (data) {
var obj = jQuery.parseJSON(data);
if (obj.SUCC_FLAG == 0){
window.location.href = site_url;}
else{
/* for console error message. */
console.log(obj.MSG);}
$('.loading_screen').hide();
},
error: function () {
alert("server error");
}
});
});
});
Hey it's a working code and i hope this will works for you.
I want to use ajax with selectize to load bdd results onchange.
I need to use post because I must send data to my url.
My function looks like this :
select_etages.load(function(callback) {
xhr && xhr.abort();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var data = { id:value }
xhr = $.ajax({
type: 'post',
dataType: 'json',
data: JSON.stringify(data),
data : { bat : value },
url: 'add/etages',
success: function(results) {
callback(results);
},
error: function() {
callback();
}
})
});
In my web.php I've got this :
Route::post('/lots/add/etages', ['as' => 'lots.add_post.select', 'uses' => 'Copro\LotController#select2']);
And my controller :
public function select(Request $request)
{
return "test";
}
But when I tried to use it, I've got an "419 unknown status". I can see that it's a post ajax and my data but I've got no error message :
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message
If I change to get it's working but not post.
Anyone know why I can't use post ??
Thank for your help.
Maybe you just rewrite the "select2" name end of the route to "select"?
I think you need to remove $.ajaxSetup function in callback function. Code might look like this.
$(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
select_etages.load(function(callback) {
xhr && xhr.abort();
var data = { id:value }
xhr = $.ajax({
type: 'post',
dataType: 'json',
data: JSON.stringify(data),
url: 'add/etages',
success: function(results) {
callback(results);
},
error: function() {
callback();
}
})
});
});
I have a bunch of POST requests made with Ajax in my Laravel application.
A typical request looks like:
$.ajax({
url: '/path/to/method',
data: {'id': id},
type: 'POST',
datatype: 'JSON',
success: function (response) {
//handle data
},
error: function (response) {
//handle error
}
});
I have the CSRF token set and everything works fine most of the time:
jQuery(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
However, after a long hiatus (for example, computer asleep for a long time), all Ajax calls return a 419 error, as if the token wasn't set. After I reload the page everything is back to normal. This is on a local server.
How do I resolve this? Is there some way to "renew" the token before a call? Do I have to do the $.ajaxSetup bit before each call? It's not enough to do it once on page load?
This is my suggestion:
JS
//create a function to set header
function setHeader(data){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': data
}
});
}
//in first load of the page set the header
setHeader($('meta[name="csrf-token"]').attr('content'));
//create function to do the ajax request cos we need to recall it when token is expire
function runAjax(data){
$.ajax({
url: '/path/to/method',
data: {'id': id},
type: 'POST',
datatype: 'JSON',
success: function (response) {
//handle data
},
error: function (jqXHR, textStatus, errorThrown) {
if(jqXHR.status==419){//if you get 419 error which meantoken expired
refreshToken(function(){refresh the token
runAjax();//send ajax again
});
}
}
});
}
//token refresh function
function refreshToken(callback){
$.get('refresh-csrf').done(function(data){
setHeader(data);
callback(true);
});
}
//Optional: keep token updated every hour
setInterval(function(){
refreshToken(function(){
console.log("Token refreshed!");
});
}, 3600000); // 1 hour
Route
//route to get the token
Route::get('refresh-csrf', function(){
return csrf_token();
});
Hope this helps.
I do an ajax call but I keep getting this error:
419 (unknown status)
No idea what is causing this I saw on other posts it has to do something with csrf token but I have no form so I dont know how to fix this.
my call:
$('.company-selector li > a').click(function(e) {
e.preventDefault();
var companyId = $(this).data("company-id");
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: '/fetch-company/' + companyId,
dataType : 'json',
type: 'POST',
data: {},
contentType: false,
processData: false,
success:function(response) {
console.log(response);
}
});
});
My route:
Route::post('fetch-company/{companyId}', 'HomeController#fetchCompany');
My controller method
/**
* Fetches a company
*
* #param $companyId
*
* #return array
*/
public function fetchCompany($companyId)
{
$company = Company::where('id', $companyId)->first();
return response()->json($company);
}
The ultimate goal is to display something from the response in a html element.
Use this in the head section:
<meta name="csrf-token" content="{{ csrf_token() }}">
and get the csrf token in ajax:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Please refer Laravel Documentation csrf_token
Another way to resolve this is to use the _token field in ajax data and set the value of {{csrf_token()}} in blade. Here is a working code that I just tried at my end.
$.ajax({
type: "POST",
url: '/your_url',
data: { somefield: "Some field value", _token: '{{csrf_token()}}' },
success: function (data) {
console.log(data);
},
error: function (data, textStatus, errorThrown) {
console.log(data);
},
});
It's possible your session domain does not match your app URL and/or the host being used to access the application.
1.) Check your .env file:
SESSION_DOMAIN=example.com
APP_URL=example.com
2.) Check config/session.php
Verify values to make sure they are correct.
This is similar to Kannan's answer. However, this fixes an issue where the token should not be sent to cross-domain sites. This will only set the header if it is a local request.
HTML:
<meta name="csrf-token" content="{{ csrf_token() }}">
JS:
$.ajaxSetup({
beforeSend: function(xhr, type) {
if (!type.crossDomain) {
xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
}
},
});
use this in your page
<meta name="csrf-token" content="{{ csrf_token() }}">
and in your ajax used it in data:
_token: '{!! csrf_token() !!}',
that is:
$.ajax({
url: '/fetch-company/' + companyId,
dataType : 'json',
type: 'POST',
data: {
_token: '{!! csrf_token() !!}',
},
contentType: false,
processData: false,
success:function(response) {
console.log(response);
}
});
Thanks.
in my case i forgot to add csrf_token input to the submitted form.
so i did this
HTML:
<form class="form-material" id="myform">
...
<input type="file" name="l_img" id="l_img">
<input type="hidden" id="_token" value="{{ csrf_token() }}">
..
</form>
JS:
//setting containers
var _token = $('input#_token').val();
var l_img = $('input#l_img').val();
var formData = new FormData();
formData.append("_token", _token);
formData.append("l_img", $('#l_img')[0].files[0]);
if(!l_img) {
//do error if no image uploaded
return false;
}
else
{
$.ajax({
type: "POST",
url: "/my_url",
contentType: false,
processData: false,
dataType: "json",
data : formData,
beforeSend: function()
{
//do before send
},
success: function(data)
{
//do success
},
error: function(jqXhr, textStatus, errorThrown) //jqXHR, textStatus, errorThrown
{
if( jqXhr.status === "422" ) {
//do error
} else {
//do error
}
}
});
}
return false; //not to post the form physically
If you already done the above suggestions and still having the issue.
Make sure that the env variable:
SESSION_SECURE_COOKIE
Is set to false if you don't have a SSL certificate, like on local.
If you are loading .js from a file you have to set a variable with the csrf_token in your "main" .blade.php file where you are importing the .js and use the variable in your ajax call.
index.blade.php
...
...
<script src="{{ asset('js/anotherfile.js') }}"></script>
<script type="text/javascript">
var token = '{{ csrf_token() }}';
</script>
anotherfile.js
$.ajax({
url: 'yourUrl',
type: 'POST',
data: {
'_token': token
},
dataType: "json",
beforeSend:function(){
//do stuff
},
success: function(data) {
//do stuff
},
error: function(data) {
//do stuff
},
complete: function(){
//do stuff
}
});
Even though you have a csrf_token, if you are authenticate your controller actions using Laravel Policies you can have 419 response as well. In that case you should add necessary policy functions in your Policy class.
some refs =>
...
<head>
// CSRF for all ajax call
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
...
...
<script>
// CSRF for all ajax call
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content') } });
</script>
...
This worked for me:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
}
});
After this set regular AJAX call. Example:
$.ajax({
type:'POST',
url:'custom_url',
data:{name: "some name", password: "pass", email: "test#test.com"},
success:function(response){
// Log response
console.log(response);
}
});
You have to get the csrf token..
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
After doing same issue is rise ,Just Add this meta tag< meta name="csrf-token" content="{{ csrf_token() }}" >
After this also the error arise ,you can check the Ajax error. Then Also check the Ajax error
$.ajax({
url: 'some_unknown_page.html',
success: function (response) {
$('#post').html(response.responseText);
},
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
$('#post').html(msg);
},
});
formData = new FormData();
formData.append('_token', "{{csrf_token()}}");
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
2019 Laravel Update, Never thought i will post this but for those developers like me using the browser fetch api on Laravel 5.8 and above. You have to pass your token via the headers parameter.
var _token = "{{ csrf_token }}";
fetch("{{url('add/new/comment')}}", {
method: 'POST',
headers: {
'X-CSRF-TOKEN': _token,
'Content-Type': 'application/json',
},
body: JSON.stringify(name, email, message, article_id)
}).then(r => {
return r.json();
}).then(results => {}).catch(err => console.log(err));
I had SESSION_SECURE_COOKIE set to true so my dev environment didn't work when logging in, so I added SESSION_SECURE_COOKIE=false
to my dev .env file and all works fine my mistake was changing the session.php file instead of adding the variable to the .env file.
just serialize the form data and get your problem solved.
data: $('#form_id').serialize(),
This error also happens if u forgot to include this, in your ajax submission request ( POST ),
contentType: false,
processData: false,
Got this error even though I had already been sending csrf token. Turned out there was no more space left on server.
This works great for those cases you don't require a form.
use this in header:
<meta name="csrf-token" content="{{ csrf_token() }}">
and this in your JavaScript code:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '<?php echo csrf_token() ?>'
}
});
A simple way to fixe a 419 unknown status on your console is to put this script inside in your FORM. {{ csrf_field() }}
in the name of the universe programmer
i send ajax with pure js and i understand when i dont set this method of ajax in pure js
<< xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded") >>
i recive this error 419.
the full method of pure ajax is :
let token = document.querySelector('meta[name="csrf-token"]').content;
let xhr = new XMLHttpRequest();
// Open the connection
xhr.open("POST", "/seller/dashboard/get-restaurants");
// you have to set this line in the code (if you dont set you recive error 419):
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//* Set up a handler for when the task for the request is complete
xhr.onload = function () {
};
// Send the data.
xhr.send(`_token=${token}`);