title: Symfony2 get a form with AJAX
body: <p>I have a liste of customers, for each customer I have a button to show the edit form of customer.
  I want when I click into this button, a function ajax show the edit form of the specific customer clicked.</p>
  
  <p>I don't know how can do to render a form into the action (controller) executed with AJAX.</p>
  
  <p>Here the way I create the form in my controller:</p>
  
  <pre><code>public function editAction($id)
      {
          if ($this-&gt;container-&gt;get('request')-&gt;isXmlHttpRequest()) {
              $em = $this-&gt;getDoctrine()-&gt;getManager();
  
              $entity = $em-&gt;getRepository('ApplicationClientBundle:Client')-&gt;find($id);
  
              if (!$entity) {
                  throw $this-&gt;createNotFoundException('Unable to find Client entity.');
              }
  
              $editForm = $this-&gt;createEditForm($entity);
  
              $answer =$this-&gt;container-&gt;get('templating')-&gt;renderResponse('ApplicationClientBundle:Client:index.html.twig', array(
                  'editForm' =&gt; $editForm-&gt;createView(),
              ));
  
              $response = new Response(json_encode(array('editForm'=&gt; $answer)));
              $response-&gt;headers-&gt;set('Content-type', 'application/json; charset=utf-8');
              return $response;
          }
  
  
  
      }
  </code></pre>
  
  <p>But the response json is empty.</p>
  
  <p>What can I do in the controller and in the index.html.twig to show the form?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>In <code>index.html.twig</code>, I have:</p>
  
  <pre><code>{% block body %}
  &lt;div class="content-action"&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
          &lt;p&gt;&lt;span&gt;Raison Sociale :&lt;/span&gt;&lt;span id="raison_sociale" onclick="functionClick(this)"&gt;raison sociale&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;Adresse :&lt;/span&gt;&lt;span id="adresse"&gt; Avenue Majida Boulila imm.....&lt;/span&gt;&lt;p&gt;
          &lt;p&gt;&lt;span&gt;M.F. :&lt;/span&gt;&lt;span id="matriculeFiscale"&gt; 0000000 PES 000&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;C.P. :&lt;/span&gt;&lt;span id="codePostal"&gt; 3027&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;Ville :&lt;/span&gt;&lt;span id=""&gt; Sfax&lt;span/&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
          &lt;p&gt;&lt;span&gt;Tél. :&lt;/span&gt; 74 400 202&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;E-mail :&lt;/span&gt;&lt;span id="email"&gt; info@ggg.com.tn&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;Nom du contact :&lt;/span&gt;&lt;span id="nomContact"&gt; nom&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;span&gt;Tél. Mobile :&lt;/span&gt;&lt;span id="telephone"&gt; 23 447454&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&lt;input type="hidden" id="id" value="2"/&gt; &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!--content-action--&gt;
  {% endblock %}
  {% block javascripts %}
  &lt;script&gt;
          function functionClick(element){
          var id = $("#id").val();
              var route = '{{ path('client_edit', { 'id': "PLACEHOLDER" }) }}';
              route = route.replace("PLACEHOLDER", id);
               $.ajax({
  
  
                      //On lui indique le type d'envoie des informations
  
                      type: 'POST',
  
                      //On lui indique le chemin de la fonction
  
                      url:  route,
  
  
  
                      //On lui donne la valeur du choix qu'on a fait, et id est la variable qui va contenir notre valeur, nous la retrouvons dans notre controller
  
  
  
  
                      //Enfin nous lui disons de remplir notre formulaire avec le resultat  
  
                      success: function(response)
  
                      {
  
                          element.innerHTML= {{ the_first_fiels_of_the_form }};
                      }
  
                  }
  
              );
  
          }
  
      &lt;/script&gt;
   {% endblock %}
  </code></pre>
  
  <p>I want have <code>the_first_fiels_of_the_form</code> in the element clicked.</p>
  
  <p>I do:    <code>the_first_fiels_of_the_form ={{form_widget(editForm.raisonSociale)}}</code>
  But no result.</p>