\n<\/code><\/p>\n\/Acme\/DemoBundle\/Controller\/DemoController.php<\/p>\n
[...]\r\nuse Sensio\\Bundle\\FrameworkExtraBundle\\Configuration\\Route;\r\nuse Sensio\\Bundle\\FrameworkExtraBundle\\Configuration\\Method;\r\n[...]\r\n\r\n\/**\r\n * Renders the \"new\" form\r\n * \r\n * @Route(\"\/\", \"demo_new\")\r\n * @Method(\"GET\")\r\n *\/\r\npublic function newAction(Request $request)\r\n{\r\n $entity = new Demo();\r\n $form = $this->createCreateForm($entity);\r\n\r\n return $this->render('AcmeDemoBundle:Demo:new.html.twig',\r\n array(\r\n 'entity' => $entity,\r\n 'form' => $form->createView()\r\n )\r\n );\r\n}\r\n\r\n\/**\r\n * Creates a new Demo entity.\r\n *\r\n * @Route(\"\/\", name=\"demo_create\")\r\n * @Method(\"POST\")\r\n *\r\n *\/\r\npublic function createAction(Request $request)\r\n{\r\n \/\/This is optional. Do not do this check if you want to call the same action using a regular request.\r\n if (!$request->isXmlHttpRequest()) {\r\n return new JsonResponse(array('message' => 'You can access this only using Ajax!'), 400);\r\n }\r\n\r\n $entity = new Demo();\r\n $form = $this->createCreateForm($entity);\r\n $form->handleRequest($request);\r\n\r\n if ($form->isValid()) {\r\n $em = $this->getDoctrine()->getManager();\r\n $em->persist($entity);\r\n $em->flush();\r\n\r\n return new JsonResponse(array('message' => 'Success!'), 200);\r\n }\r\n\r\n $response = new JsonResponse(\r\n array(\r\n 'message' => 'Error',\r\n 'form' => $this->renderView('AcmeDemoBundle:Demo:form.html.twig',\r\n array(\r\n 'entity' => $entity,\r\n 'form' => $form->createView(),\r\n ))), 400);\r\n\r\n return $response;\r\n}\r\n\r\n\/**\r\n * Creates a form to create a Demo entity.\r\n *\r\n * @param Demo $entity The entity\r\n *\r\n * @return SymfonyComponentFormForm The form\r\n *\/\r\nprivate function createCreateForm(Demo $entity)\r\n{\r\n $form = $this->createForm(new DemoType(), $entity,\r\n array(\r\n 'action' => $this->generateUrl('demo_create'),\r\n 'method' => 'POST',\r\n ));\r\n\r\n return $form;\r\n}<\/pre>\nThen I prepare my HTML:<\/p>\n
\/Acme\/DemoBundle\/Resources\/Demo\/new.html.twig<\/p>\n
{% block body -%}\r\n <h1>Demo creation<\/h1>\r\n\r\n <div class=\"form_error\"><\/div>\r\n <form method=\"POST\" class=\"ajaxForm\" action=\"{{path('demo_create')}}\" {{ form_enctype(form) }}>\r\n <div id=\"form_body\">\r\n {% include 'AcmeDemoBundle:Demo:form.html.twig' with {'form': form} %}\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n {{form_rest(form)}}\r\n <\/form>\r\n\r\n <ul class=\"record_actions\">\r\n <li>\r\n <a href=\"{{ path('demo') }}\">\r\n Back to the list\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n{% endblock %}\r\n\r\n\r\n{% block javascripts %}\r\n<script>\r\n initAjaxForm();\r\n<\/script>\r\n{% endblock %}<\/pre>\nAnd then I build the form; It’s always a good practice to put the fields of your form in a separate file\u00a0so that you can reuse them for the edit form for example.<\/p>\n
\/Acme\/DemoBundle\/Resources\/Demo\/form.html.twig<\/p>\n
<div class=\"row\" >\r\n <div class=\"col-lg-4 col-md-4\">\r\n <div class=\"col-md-12\">{{ form_errors(form) }}<\/div>\r\n <div class=\"bg-danger\">{{ form_errors(form.name) }}<\/div>\r\n <div class=\"form-group input-group\">\r\n {{ form_widget(form.name, {'attr': {'placeholder':'Name', 'title':'Name', 'class':'form-control'}}) }}\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-md-4\">\r\n <div class=\"bg-danger\">{{ form_errors(form.isActive) }}<\/div>\r\n <div class=\"form-group\">\r\n {{ form_widget(form.isActive, {'attr': {'title':'Is active', 'class':'form-control'}}) }}\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nAnd to\u00a0tie the frontend with the backend we add a little Javascript (JQuery flavoured). This code simply listens to all submits from the page, and if the submitted form has the class ajaxForm then it submits it using Ajax.<\/p>\n
<\/p>\n
Thanks to the handy promises .done<\/code> and .fail<\/code>, and to the use of status codes in our response (400 \u00a0-> Bad request, 200 -> Ok, 404 -> Not Found and so on) the script will automatically go to the right promise and will make handling the response a lot easier. Also, if an error occurs in your form (e.g. a field is invalid), then the form is re-rendered with the errors displayed.<\/p>\n <\/p>\n
\/Acme\/DemoBundle\/Resources\/public\/main.js<\/p>\n
function initAjaxForm()\r\n{\r\n $('body').on('submit', '.ajaxForm', function (e) {\r\n\r\n e.preventDefault();\r\n\r\n $.ajax({\r\n type: $(this).attr('method'),\r\n url: $(this).attr('action'),\r\n data: $(this).serialize()\r\n })\r\n .done(function (data) {\r\n if (typeof data.message !== 'undefined') {\r\n alert(data.message);\r\n }\r\n })\r\n .fail(function (jqXHR, textStatus, errorThrown) {\r\n if (typeof jqXHR.responseJSON !== 'undefined') {\r\n if (jqXHR.responseJSON.hasOwnProperty('form')) {\r\n $('#form_body').html(jqXHR.responseJSON.form);\r\n }\r\n\r\n $('.form_error').html(jqXHR.responseJSON.message);\r\n\r\n } else {\r\n alert(errorThrown);\r\n }\r\n\r\n });\r\n });\r\n}<\/pre>\n <\/p>\n
Going a little further, you could put this form in a modal (easily done with bootstrap) and you can get a really nice user interface with forms in modals submitted with Ajax.<\/p>\n
Last but not least, don’t forget to check that your routings are correct in case you didn’t do it already:<\/p>\n
app\/config\/routing.yml<\/p>\n
demo:\r\n resource: \"@AcmeDemoBundle\/Controller\/\"\r\n type: annotation\r\n prefix: \/<\/pre>\n <\/p>\n
Have fun coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Making Ajax calls is a trivial task nowadays for any web developer, and I’m sure it’s no enigma for all […]<\/p>\n","protected":false},"author":28,"featured_media":1173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77,82],"tags":[89,194,236,237],"yst_prominent_words":[394,569,571,1034,1116,1369],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1029"}],"collection":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":3,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions"}],"predecessor-version":[{"id":133258,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions\/133258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media\/1173"}],"wp:attachment":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media?parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/categories?post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/tags?post=1029"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}