Hello Everyone ! I am sending some specific data through ajax but getting empty request in controller and the error is "500 Server Error". this is my code:
$(document).on('click', '#status_update', function(e) {
var data = $(this).prop('checked') == true ? 1 : 0;
var firmware_id = $(this).data('id')
var url = "{{ route('changeStatus', '') }}/" + firmware_id;
Send_Ajax_Req_To_Server('GET', data, url, '', updatedStatus);
});
and My Generic function for AJAX is:
function Send_Ajax_Req_To_Server(requestType = 'GET', data, url, dataType = 'json', callBack = '') {
$.ajax({
type: requestType,
url: url,
data: data,
dataType: dataType,
processData: false,
contentType: false,
success: function(response) {
if (typeof callBack === 'function') {
callBack(response);
} else {
console.log('error');
}
},
error: function(response) {
if (typeof callBack === 'function') {
callBack(response);
} else {
console.log('error');
}
}
});
}
I just need "id" and "status" which will be "0" or "1" in my controller. I am not sure what I am doing wrong ?
What do you mean when you say getting empty request in controller. a 500 error code could mean many things. If the endpoint exists then simply console.log the response to see what's coming back. If you're not able to get that then check the endpoint actually exists. Eliminate the problems one by one.
If you're using GET as a type. Try this:
$(document).on('click', '#status_update', function (e) {
let data = $(this).prop('checked') === true ? 1 : 0;
let firmware_id = $(this).data('id')
let url = "{{ route('changeStatus', '') }}/" + firmware_id + "?status=" + data;
Send_Ajax_Req_To_Server(
'GET',
null,
url,
'',
updatedStatus
);
});
And do not forget to add csrf-token in your Send_Ajax_Req_To_Server method
function Send_Ajax_Req_To_Server(requestType = 'GET', data, url, dataType = 'json', callBack = '') {
$.ajax({
type: requestType,
url: url,
data: data,
dataType: dataType,
processData: false,
contentType: false,
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, // THIS
success: function (response) {
if (typeof callBack === 'function') {
callBack(response);
} else {
console.log('error');
}
},
error: function (response) {
if (typeof callBack === 'function') {
callBack(response);
} else {
console.log('error');
}
}
});
}
And within your <head> tag:
<meta name="csrf-token" content="{{ csrf_token() }}"/>
@anuzpandey CSRF is not the issue here, because I added it already.
@gemini_man93 Okay. Please look at the other changes suggested i.e.
let url = "{{ route('changeStatus', '') }}/" + firmware_id + "?status=" + data;
@gemini_man93 Or if you'd like another approach. Try this.
$(document).on('click', '#status_update', function (e) {
let status = $(this).prop('checked') === true ? 1 : 0;
let firmware_id = $(this).data('id')
let url = "{{ route('changeStatus', '') }}/" + firmware_id;
let data = {status}
Send_Ajax_Req_To_Server(
'GET',
data,
url,
'',
updatedStatus
);
});
And in your Send_Ajax_Req_To_Server method. Update processData value to true. And you're good to go.
@anuzpandey great. but there is some issue in other forms, when i tried to add new data with image, then it shows error:
TypeError: 'append' called on an object that does not implement interface FormData
@gemini_man93 If the mentioned issue is solved then mark the solution as answer.
And for the new issue create a new thread as it is not related to this discussion.
Please or to participate in this conversation.