Level 102
If you add a dd('test'); inside the method, is it then shown in a modal?
Sep 7, 2022
17
Level 9
Inertia.post not working where axios.post does
I have the following controller method that deletes a given record:
public function destroy(Request $request)
{
log::debug("Destroying");
Question::where('id',$request->toDelete)->first()->delete();
return redirect('/questions')->with('message',"Question deleted.");
}
I am trying to trigger this method using the following code:
function deletePrompt(param){
if(confirm("Are you sure you want to delete this question?")){
const data = {toDelete:param};
Inertia.post('/admin/questions/delete',data);
}
}
The problem is that this does nothing and provides no feedback (it just reloads the page. No error message, nothing in console, nothing in laravel.log). "log::debug("Destroying");" also doesn't run. Meanwhile, the following with axios does work fine.
function deletePrompt(param){
if(confirm("Are you sure you want to delete this question?")){
const data = {toDelete:param};
axios.post('/admin/questions/delete',data)
.then((response) => {
console.log(response);
});
}
}
The response logged appears to be the redirect that I want as well. Using axios isn't a good alternative here, because I want Inertia to perform a redirect to an updated version of the page with a flash message. I have using Inertia.post without authentication middleware, but this has not had any effect. Changing the redirect in the controller to inertia(...) or anything else has no effect (nor should it, since the controller seems not to get called). Here is the route file, in case it matters.
Route::middleware(['auth','isAdmin'])->group(function(){
//...
Route::post('/admin/questions/delete',[QuestionController::class,'destroy']);
}
);
Apologies if the problem is something that should be really obvious, but why is Inertia.post(...) doing nothing and how can I fix it?
Level 9
@Sinnbeck No.
Level 9
With axios, it returns a server error 500, with Inertia.post it just does nothing and reloads the same page.
Level 102
@PhilKz weird. If you open the network tools in the browser and use the inertia version, do you see a request to the url?
Level 102
Any chance the isAdmin middleware is failing for some reason. If you remove it from the route, does it work?
Level 9
@Sinnbeck Status is blocked and the "transferred" column says "NS_BINDING_ABORTED".
Level 9
@Sinnbeck I tried to removing the route from the isAdmin middleware and the same thing happened. I also have other Inertia.post requests going through the same middleware fine to create and update the resource.
Level 102
@PhilKz hmm can't remember ever seeing that before. Not sure what that means
Level 102
Could you try changing it to a delete request and see if it makes a difference? (I know it does not send the data, but I'm curious if it hits the endpoint)
Inertia.delete('/admin/questions/delete');
Route::delete('/admin/questions/delete',[QuestionController::class,'destroy']);
Level 9
@Sinnbeck I tried it, and it's still not hitting the endpoint (and still giving me blocked and NS_BINDING_ABORTED). I also tried moving this out of the auth middleware, same result.
Level 102
@PhilKz if you try any other post route from that same js code, does that work?
I'm trying to figure out if it's the js or the php that's the problem
Level 9
@Sinnbeck Same result on another route. Also noticed I'm getting "The connection used to fetch this resource was not secure" warnings in the network tab.
Level 102
@PhilKz oh now that's interesting. Can you show the complete component? Any change if you remove the confirm?
Level 9
@Sinnbeck I solved it, and the problem was a bit embarrassing for me. I needed to wrap the button calling the function in a form tag to prevent it get rejected by xsrf protection. The problem was in:
<Link onClick={()=>deletePrompt(question.id)} className='rounded-md bg-red-600 py-1 px-2 mt-1 text-indigo-50'>Delete</Link>
This should have been:
<form onSubmit={deletePrompt}>
<input type='hidden' name='toDelete' value={question.id} />
<button type='submit' className='rounded-md bg-red-600 py-1 px-2 mt-1 text-indigo-50 leading-normal'>Delete</button>
</form>
With the deletePrompt function turning into this:
function deletePrompt(e){
e.preventDefault();
const param = e.target[0].value;
if(confirm("Are you sure you want to delete this question?")){
const data = {toDelete:param};
Inertia.post('/admin/questions/delete', data);
}
}
Probably would have been obvious if I'd posted the full react component to start with.
Level 9
@Sinnbeck Thanks for the help, by the way. I wouldn't have thought to check the network tab, and that's where the error message I needed to look at was.
Level 102
@PhilKz great to hear. Yeah using a Link component won't work correctly with on click. You could have just replaced it with a regular <button
<button onClick={()=>deletePrompt(question.id)} className='rounded-md bg-red-600 py-1 px-2 mt-1 text-indigo-50'>Delete</button>
Level 9
@Sinnbeck You're right. That works too!
Please or to participate in this conversation.