server responded with a status of 405 (Method Not Allowed) - ajax

when i press the add to cart button it is not working and in the console it is saying 405 method not allowed
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "post",
url: "add-to-cart",
data: {
'product_id':product_id,
'product_qty':product_qty,
},
success: function (response) {
swal(response.status);
}
});
});
Route::middleware(['auth'])->group(function () {
Route::post('add-to-cart', [CartController::class, 'addProduct']);
});

Related

Laravel/Ajax delete function not refreshing my table after success

when I add my function fetchcategory(); in my delete ajax, my table is not refreshing:
$(document).on('click', '.delete_category_btn', function (e) {
e.preventDefault();
var cat_id = $('#delete_cat_id').val();
alert('Category Deleted!');
// location.reload();
$('#deleteCategoryModal').modal('hide');
fetchcategory();
//token taken from laravel documentation
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "DELETE",
url: "/clinical/bbr-category-configuration-delete/"+cat_id,
dataType: "dataType",
});
});
for a reference, my screenshot shows the alert, showing that the delete function follows through:
another reference is that my add function here reloads the page after a new table is added:
$.ajax({
type: "POST",
url: "/clinical/bbr-category-configuration",
data: category_data,
dataType: "json",
success: function (response){
console.log(response);
if(response.status == 400) {
$('#category_formCheck').html("");
$('#category_formCheck').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values) {
$('#category_formCheck').append('<li>'+err_values+'</li>');
});
}
else
{
$('#category_notif').html("");
$('#category_notif').addClass('alert alert-success');
$('#category_notif').text(response.message);
$('#createCategory').modal('hide');
fetchcategory();
}
}
});
another problem of mine is that I tried to add the alert and refresh function inside:
$.ajax({
type: "DELETE",
but they do not show up, so I placed them inside on(click
why is my delete ajax not refreshing my table?
UPDATE:
I am aware of location.reload(); but adding this defeats the purpose.
the data does get deleted, I have to manually refresh the whole page to see the changes though.
You can do it in ajax success. I believe fetchcategory() method is populating data to table
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).on('click', '.delete_category_btn', function (e) {
e.preventDefault();
var cat_id = $('#delete_cat_id').val();
// location.reload();
$('#deleteCategoryModal').modal('hide');
$.ajax({
type: "DELETE",
url: "/clinical/bbr-category-configuration-delete/"+cat_id,
dataType: "dataType",
success: function(data) {
alert('Category Deleted!');
fetchcategory();
},
error: function() {
alert('Error occured');
}
});
});
</script>

Why do I always get undefined value from other data?

I always get undefined values from other data for example: ID:123 the response for this would be the NetAmount: 1000.00 after sending it using AJAX GET REQUEST, so for other data it would just return an undefined value.
MY AJAX
function viewBill(AccountNum){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: "GET",
url: "{{ route('view.billing') }}",
data: {AccountNum:AccountNum},
dataType: 'json',
async: true,
beforeSend: function() {$('#userBill').html('Getting Information...')},
success: function(res) {
console.log(res.NetAmount);
$('#checkBill').css('display','block');
$('#userBill').html('₱ '+res.NetAmount);
},
error: function(res) {console.log('Error');},
complete: function() {
}
});
}
My Controller
public function viewBilling(Request $request){
if($request->ajax()){
$viewBilling = Table1::addSelect(['PaymentStatus' => Table2::selectRaw('COUNT(*)')
->whereColumn('AccountNumber','Table1.AccountNumber')
->whereColumn('ServicePeriodEnd','Table1.ServicePeriodEnd')
->where('AccountNumber', $request->AccountNum)
])->where('AccountNumber', $request->AccountNum)
->orderBy('ServicePeriod','desc')
->first();
return Response()->json($viewBilling);
}
}
I tried using dd() and it turns out there are values for the account I tried from the one that returns the NetAmount and from the one that returns an undefined value.
Found the problem, because of the parameter of my viewBill() function, I don't know why would it give me undefined values from other data I did check using the network tools, it just that it wasn't able to send the AccountNumber to the Controller. So I tried removing the parameter. I have an input tag that already has the value of the Account Number so instead of using the above code, I did this
function viewBill(){
var AccountNum = $('#inputAccountNum1').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.post({
url: "{{ route('view.billing') }}",
data: {AccountNum:AccountNum},
dataType: 'json',
beforeSend: function() {$('#userBill').html('Getting Information...')},
success: function(res) {
$('#checkBill').css('display','block');
$('#userBill').html('₱ '+res.NetAmount);
},
error: function(res) {console.log('Error');},
complete: function() {
}
});
}

React AJAX post request does not go to success/error method

I have a React Component which calls an AJAX POST request.
The POST request creates an entry in the database as expected. (status 201 returned) However the success/error methods of the same are not called.
$.ajax({
url: '/api/put/comment/',
dataType: 'json',
type: 'POST',
data: comment,
beforeSend: function(xhr) {
console.log('before send');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success: function(data) {
console.log('success');
this.loadData();
},
error: function(xhr, status, err) {
console.log('error');
this.setState({data:comments});
console.error(this.props.url, status, err.toString());
}
});
The request is called through a button click. Also the browser hangs once the request is made, and the solution is to open a new tab.
Also i do not see the POST request on the Network tab of Chrome, but see it on the backend.
Any hints?
Try using ES6 arrow functions or bind your functions with this
$.ajax({
url: '/api/put/comment/',
dataType: 'json',
type: 'POST',
data: comment,
beforeSend:(xhr) => {
console.log('before send');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success:(data) => {
console.log('success');
this.loadData();
},
error:(xhr, status, err) => {
console.log('error');
this.setState({data:comments});
console.error(this.props.url, status, err.toString());
}
});

POST http://127.0.0.1:8000/unlock 405 (Method Not Allowed)

I want to pass the unlock key to route using ajax but I am not allowed to do so. The code gives me method not allowed error.
I cant see the error in my code, whether it the route error or some other error
<script>
$(document).ready(function(){
$('.result-container').hide();
$('.unlock-btn').on('click', function(){
$.ajax({
url: "{{route('unlock')}}",
method: 'post',
data: {
theme_id : {{$theme_id}},
key : $('.key').val(),
},
success: function(data){
console.log('success');
if(data === '0')
$('.result-container').show();
else
{
window.location = "{{route('view', ['theme_id' => $theme_id])}}";
}
}
})
});
});
</script>
So your route is a get but in ajax you are sending post request. Change it to post.
Route::post('/unlock', 'ThemeController#unlock')->name('unlock');
And also add a token in data otherwise you will get 419 error for missing CSRF.
$.ajax({
url: "{{route('unlock')}}",
method: 'post',
data: {
theme_id : {{$theme_id}},
key : $('.key').val(),
"_token": "{{ csrf_token() }}",
},
success: function(data){
console.log('success');
if(data === '0')
$('.result-container').show();
else
{
window.location = "{{route('view', ['theme_id' => $theme_id])}}";
}
}
})

Laravel - DELETE Ajax request

I am using Laravel 5.0. I have created a RESTful Controller. Now i wanna use the destroy function via an ajax call.
This is my JS:
$.ajax({
type: 'POST',
url: '/pv/' + data.id,
data: {_method: 'delete' },
success: function(data){
console.log(data);
}
});
And this is my destroy function:
public function destroy($id)
{
$pv = PV::find($id);
$pv->delete();
return true;
}
All i got is a 500 error.
first check your route in laravel
Route::delete('/deleteprocess', 'Controller#destroy');
in javascript
$.ajax({
url: '/deleteprocess',
type: 'POST',
data:{
'_token': $('meta[name=csrf-token]').attr("content"),
'_method': 'DELETE',
},
success: function(result) {
// Do something with the result
}});
set type : POST,
set token : _token,
set method : _method as DELETE,
That's probabily a "CSRF" Exception. If you are using Ajax Request with jQuery, add this (before your $.ajax):
$.ajaxSetup({
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
And, in your "html" ..create a new "meta tag" with csrf-token..value:
{{ csrf_token() }}
Read more: http://laravel.com/docs/5.0/routing#csrf-protection

Resources