Symfony 3: Call controller deleteAction with Ajax - php

Question

I'm trying to delete a Symfony3 entity with ajax.
Problem is $form->isValid() returns false, but there are no errors on the form (or any child elements). What am I missing here?
Controller
/**
* #Route("/{profileID}/delete", name="profile_delete")
* #ParamConverter("Profile", options={"mapping": {"profileID": "id"}})
* #Method("DELETE")
*/
public function deleteAction(Request $request, Profile $Profile)
{
$form = $this->createDeleteForm($Profile);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->remove($Profile);
$em->flush();
return new JsonResponse(array('message' => 'profile removed'));
} else {
return new JsonResponse(array('message' => 'error'));
}
}
private function createDeleteForm(Profile $Profile)
{
return $this->createFormBuilder()
->setAction($this->generateUrl('profile_delete', array('profileID' => $Profile->getId())))
->setMethod('DELETE')
->getForm()
;
}
Twig
$.ajax({
url: "{{ path('profile_delete', {'profileID': Profile.id}) }}",
type: 'delete',
success:function(data){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
}
});

Answer 1

You're submitting the form without a csrf-token. A quick fix is to add the token as data:
$.ajax({
url: "{{ path('profile_delete', {'profileID': Profile.id}) }}",
type: 'delete',
data: {
form: {
_token: "{{ csrf_token('form') }}"
}
},
success:function(data){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
}
});
form here is the form name and could also be set manually. E.g. delete-form:
private function createDeleteForm(Profile $Profile)
{
return $this
->get('form.factory')
->createNamedBuilder('delete-form', FormType::class, null, [
'action' => $this->generateUrl('profile_delete', array('profileID' => $Profile->getId())),
'method' => 'DELETE',
])
->getForm()
;
}
with:
$.ajax({
url: "{{ path('profile_delete', {'profileID': Profile.id}) }}",
type: 'delete',
data: {
'delete-form': {
_token: "{{ csrf_token('delete-form') }}"
}
},
success:function(data){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
}
});