I'm trying to update data using laravel. I'm not sure why I can't access the PUT api. I tied so switch the api to store the data vs update and that works. I can't see anything wrong with the code.
Here is the api router
Route::put('product', 'ProductController#update');
here is the controller
public function update(Request $request, $id)
{
$product= Product::findOrFail($id);
$product->update($request->all());
return ['message' => "Success"];
}
Here is the vue.js
methods: {
updateProduct(id){
this.$Progress.start();
this.form.put('api/product/'+this.form.id)
.then(() => {
// success
$('#addNew').modal('hide');
Swal.fire(
'Updated!',
'Information has been updated.',
'success'
)
this.$Progress.finish();
Fire.$emit('AfterCreated');
})
.catch(() => {
this.$Progress.fail();
});
},
In the Vue component I have a modal with a form
<form #submit.prevent ="editmode ? updateProduct() : createProduct()">
The error I'm getting is
405 (Method Not Allowed)
The error I was getting was in the api router.
Route::put('product/{id}', 'ProductController#update');
Related
Really sorry if this has been covered before but I can't find a working solution and have even asked numerous work colleagues.
I have a form which sends a POST request to my MailController, validation and everything works just as expected, but on success, I want to redirect to a Thank you page. The Post request returns either a 200 or 302 depending on the method I try but every time it only sends the HTML to the response and doesn't render the component.
I can, however, navigate to that page if I visit the URL and it loads perfectly.
I've tried
to_route
Inertia::render
Redirect()
Redirect()->route()
Redirect::route()
even sending it in response, catching it in Axio's request in the component, and redirecting from there.
This is driving me nuts I just can't see what I'm doing wrong.
TIA for your help and suggestions
//controller
<?php
namespace App\Http\Controllers;
use ...
use Inertia\Inertia;
use...
class MailController extends Controller
{
public function sendEmail(Request $request)
{
$contact = $request->validate([
......
],[
.......
]);
Mail::to('email#email.co.uk')->send(new ContactEmail($contact));
return Redirect::route('thankyou');
// return response()->json([
// 'data' => $contact,
// 'message' => 'Message sent successfully.',
// 'redirect' => route('thankyou')
// ], 201);
}
}
// route
Route::get('/thankyou', function () {
return Inertia::render('Thankyou');
})->name('thankyou');
// submit function
submitContact: function () {
axios.post('/email', this.contact)
.then(response => {
console.log(response.data.redirect);
// if (response.data.redirect) {
// return Inertia.location(response.data.redirect);
// }
}).catch(err => {
const errors = err.response.data.errors;
if (err) {
Object.keys(errors).forEach(key => {
this.errors[key] = errors[key][0];
});
}
})
}
I have a laravel api in which I added ->paginate() so I can paginate, and use it by fetching the laravel api in my react native app, so as to apply a load more data when the app is scrolled.
This my laravel api
public function allPerson(Request $request) {
return Person::where('active', 'online')->paginate($request->input('results', 10));
}
Api URL
https://housedata.com/allperson?page=2
React Native
const [personData, setPerson] = React.useState([]);
const getPerson = () => {
axios.get('https://housedata.com/allperson?page=2')
.then(response => {
setPerson(response.data)
console.log(response.data);
});
}
useEffect(() => {
getPerson();
}, []);
<FlatList
data={personData}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return (
<View>
<Text>{item.person_name}</Text>
</View>
);
}}
/>
When I check console.log(response.data); I see the data is been fetch.
Also when I change ->paginate() to get() it is showing the data and working, how can I fix this.
Thanks
the get and paginate method returns data differently the get method returns the data directly where as the paginate method will return a paginate object which contains a data property so to access it you have to do
response.data.data
axios.get('https://housedata.com/allperson?page=2')
.then(response => {
setPerson(response.data.data) // <-- change this
console.log(response.data.data);
});
I have a edit page : http://localhost/smp/post/12
API ROUTE:
Route::get('package', [ProductController::class, 'update']);
In ProductController.php
public function update(Request $request) {
dd($request); //
}
In product.vue
axios
.post("/promotion-platform/api/images/upload",{ 'id' : this.id })
.then((res) => {
console.log(res.data);
})
eg: I fix the name box from 'Iphone 13' to 'Iphone 12'. And when I press update then I want to get the unique value I just modified.
on update method, you can return updated data.
On the vue side when you received success res.data you can over right it to do old data, then Vue's reactivity will update.
You can share also data of the component
I'm using Laravel and Vue's component, and when i try to access the banners property from response returned by axios in vue component it gives me undefined.
I am accessing the perperty like response.data.banners
I'm returning data from controller in following way:
public function getBanners(Request $request){
return response()->json(['
banners'=> BannerImage::active()->get()
]);
}
Here is how i am accessing axios response
<script>
export default {
data: function() {
return {
banners: []
}
},
mounted() {
axios.get("getBanners").then((res)=> {
console.log(res);
console.log(res.data);
console.log(res.data.banners);
this.banners = res.data.banners;
});
console.log('Component mounted.')
}
}
</script>
Response by axios
All is working before accessing the banners property. Is there anything i am not doing correct ?
You have an linebreak ↩ between ' and banners, which is shown in the console line 2 "↩ banners":
Problem
public function getBanners(Request $request){
return response()->json([' // <-- ↩ line break
banners'=> BannerImage::active()->get()
]);
}
Correct
public function getBanners(Request $request) {
return response()->json([
'banners' => BannerImage::active()->get()
]);
}
So I'm trying to get company details via the Foursquare API after a user gives in a business name and a location name.
For example: "Huntrs" and "Brussel" should get this business' details via Foursquare API and then return them.
So far i'm trying to do this over Axios to make an Ajax call within the Laravel framework.
ajax.js - Axios call:
//Ajax function to get company details when the getCompanyDetails() function is called on a btn click
function getCompanyDetails(){
//Get company name and location from form
let businessName = document.querySelector('#businessName').innerHTML;
let businessLocation = document.querySelector('#businessLocation').innerHTML;
//Make the actual API GET request
axios.post('/getcompanydetails', {
params: {
businessName: businessName,
businessLocation: businessLocation
}
})
.then(res => {
console.log(res);
console.log(res.data);
//Add response data to empty form fields
})
.catch(function (error) {
//Log request error in console, maybe also show onpage?
console.log(error);
})
}
web.php - Routing
Route::post('/getcompanydetails', 'AjaxController#getCompanyDetails'); //Route for ajax call made from JS file ajax.js
AjaxController.php - Controller that handles Guzzle request to API for ajax calls
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use GuzzleHttp\Exception\GuzzleException;
use GuzzleHttp\Client;
class AjaxController extends Controller
{
//Make Foursquare API request with Guzzle!
public function getCompanyDetails() {
//Get params back from the Axios get Request
$params = json_decode(file_get_contents("php://input"),true);
$location = $params['businessLocation'];
$companyName = $params['businessName'];
//Setup actual Guzzle request
$client = new Client();
$result = $client->request('GET', 'https://api.foursquare.com/v2/venues/search', [
'query' => [
'client_id' => env('FOURSQUARE_CLIENT_ID'),
'client_secret' => env('FOURSQUARE_SECRET_ID'),
'v' => "20191009",
'near' => $location,
'query' => $companyName,
'limit' => 1
]
]);
//Return $result in JSON format to ajax.js
return response()->json($result);
}
}
As Saly 3301 said i had to check the network tab:
network -> preview tab in chrome dev tools
This said the businessLocation index was undefined.
Solution:
Within the ajax.js, I removed the params{} around my actual name and location parameters and that stops the 500 internal error.
As such:
axios.post('/getcompanydetails', {
businessName: businessName,
businessLocation: businessLocation
})