[2.x] Form - Ajax

Form - Ajax - Symfony

Bonjour les amis ,
je débute avec ajax , j'espere retrouver mon bonheur avec vous .
J 'essaie d'ajouter des donnés (menus) sans refraichir la page , l'ajout ce fait , l'affichage aussi .
Mais le code m'affiche , lorsque je clique submit , une deuxieme form (deux a la fois )
je sais pas d"ou viens :roll:
Merci d 'avance .

Controlleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
 
   public function newFormAjaxAction() {
        $request= $this->getRequest();
        $newform = $this->get('form.factory') ->create(new menuType(), new Menu());
 
          $x="a"; 
        if ($request->isXmlHttpRequest()) {
            $newform->handleRequest($request);
            if ($newform->isValid()){
            $menu = $newform->getData();
                $em = $this->getDoctrine()->getManager();
                $em->persist($menu);
                $em->flush();
 
 
 
              $x = $em->getRepository('MyAppEspritBundle:menu')->findAll();
           return $this->render('MyAppEspritBundle:Default:ajaxbouton.html.twig', array('form' => $newform->createView(),'menu'   => $x));
 
            //return new JsonResponse(array('response'=>TRUE));
            }
            else{
            return $this->render('MyAppEspritBundle:Default:ajaxbouton.html.twig', array('form' => $newform->createView(),'menu'   => $x));
 
       //      return new JsonResponse(array('response'=>false));  
            }
        }
        return $this->render('MyAppEspritBundle:Default:ajaxbouton.html.twig', array('form' => $newform->createView()      ,'menu'   => $x));
 
    }

Vue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{# empty Twig template #}
 
 
<script src="{{ asset('bundles/myappesprit/js/jqueryajax.min.js') }}" type="text/javascript"></script>
 
 
<form id="form_ajouter" action="{{ path('rn_phototekbundle_ajax') }}" method="post">
    {{ form_widget(form) }} 
 
 
 
    <input type="submit" value="{{ 'ajouter' | trans }}" />
</form>
 
<div class="loading"></div>
<div id="resultats_ajouter"> 
    {% include 'MyAppEspritBundle:Default:liste.html.twig' with {'menu' : menu}  %}
</div>
 
 
 
<script type="text/javascript">
$(function() {
 
    $("#form_ajouter").submit(function(){ 
   //     var form = $(this).serialize();
        $.ajax({
            type: 'post',
            url: "{{path('rn_phototekbundle_ajax')}}",
     //       data: {form},
              data: $(this).serialize(),
            success: function(data)
            {           
             /*if (data['response']===true){
                 console.log(data);
                 $('#'+id).remove();
             }*/              
               $('#resultats_ajouter').html(data);
               $(".loading").hide();
            }
        });
            return false;
    });
});
</script>

Vue liste.html :

Code:

1
2
3
4
5
6
7
8
9
10
<table>
{% for a in menu %}
    <tr>
        <td>{{ a.id }}</td>
        <td>{{ a.position }}</td>
        <td>{{ a.name }}</td>
        <td>{{ a.lien }}</td>
    </tr>
{% endfor %}
</table>

form_widget(form) fait déjà le rendu du formulaire en incluant la balise form. Tu n'as pas besoin d'en réécrire une en html si tu utilises cette fonction twig.

merci c'est résolu ,
enfaite j'ai reformuler mon js en ajoutant

Code:

datatype: "json",

et dans le controlleur :

Code:

1
2
3
4
 
    return $this->container->get('templating')->renderResponse('MyAppEspritBundle:Default:liste.html.twig', array(
                            'menu' => $x
                ));