Symfony & Ajax error 404, no error message in Symfony Toolbar

Question

I am developing a web application with Symfony, but I have some problems with Ajax.

I would like to press some button with id (1,2,3,4...) and dynamicaly (with ajax) search in my db some stuff who are related with those ids.

My javascript code :

appP08.controls.btnZone.on('click', function(){
        var ZoneID = $(this).attr('id');
        var ZoneName = $(this).text();
        alert(ZoneID);

        $.ajax({
            url: "/recor/circuit",
            type: "POST",
            data: {
                ZoneID: ZoneID
            }, 
            success: function(data){
                $('#divCircuit').html(data);
                $('#zoneChoice').text(' - ' + ZoneName);
                appP08.controls.divZone.hide();
            }
        });
    });

When I press the button, Ajax is executed and I see the alert, so Jquery works well. But after that nothing happens.

I have created a route :

mk_reappro_production_circuit:
    path:    /recor/circuit
    defaults: {_controller: MKReapproProductionBundle:Appli:circuit }
    methods: [post]

And the controller :

    public function circuitAction(Request $req){
    $req = $this->getRequest();
    if ($req->isXMLHttpResult()){
        $id = $req->request->get('ZoneID');

        if($id != null){
            $repository = $this->getDoctrine()->getManager()->getRepository('MKReapproProductionBundle:Circuit');
            $listCircuits = $repository->findAll($id);

            return $this->render('MKReapproProductionBundle:Appli:circuit.html.twig', array(
                'listCircuits' => $listCircuits
            ));
        } 
    }
  }

The view :

{% extends "MKReapproProductionBundle::layout.html.twig" %}

{% block mk_appli_train_body_circuit %}

<div id="divCircuit">
    {% for circuit in listCircuits %}
    <button class="btn btn-success" name="btnZone">
        {{ circuit.name }}
    </button>
    {% endfor %}
</div>

{% endblock %}

What should I do to display this button ? In the Symfony Toolbar there is just this :

Answer 1

I think the error is because Symfony does not find the path because you are not generating it correctly. Try this:

appP08.controls.btnZone.on('click', function(){
        var ZoneID = $(this).attr('id');
        var ZoneName = $(this).text();
        alert(ZoneID);

        $.ajax({
            url: "{{ path('mk_reappro_production_circuit') }}", //Change this line.
            type: "POST",
            data: {
                ZoneID: ZoneID
            }, 
            success: function(data){
                $('#divCircuit').html(data);
                $('#zoneChoice').text(' - ' + ZoneName);
                appP08.controls.divZone.hide();
            }
        });
   });

Using {{ path('mk_reappro_production_circuit') }}, Symfony will be responsible for generating the correct path.

As an additional comment, in controller:

    public function circuitAction(Request $req){
    $req = $this->getRequest(); //This line is not necessary, you are passing the $req variable directly to the function.
    if ($req->isXMLHttpResult()){
        $id = $req->request->get('ZoneID');

        if($id != null){
            $repository = $this->getDoctrine()->getManager()->getRepository('MKReapproProductionBundle:Circuit');
            $listCircuits = $repository->findAll($id);

            return $this->render('MKReapproProductionBundle:Appli:circuit.html.twig', array(
                'listCircuits' => $listCircuits
            ));
        } 
    }
  }

Edited:

Of course, {{ path('mk_reappro_production_circuit') }} works inside the twig template, because path is a twig variable. If you are importing an external js file, then you must create within your twig template a global variable that you can use inside your js. Something like this:

{% block js %}
    <script type="text/javascript">
        var path = "{{ path('mk_reappro_production_circuit') }}";
    </script>
{% endblock %}

This statement must come first than your js file.

Now, in your js:

appP08.controls.btnZone.on('click', function(){
        var ZoneID = $(this).attr('id');
        var ZoneName = $(this).text();
        alert(ZoneID);

        $.ajax({
            url: path, //Change this line.
            type: "POST",
            data: {
                ZoneID: ZoneID
            }, 
            success: function(data){
                $('#divCircuit').html(data);
                $('#zoneChoice').text(' - ' + ZoneName);
                appP08.controls.divZone.hide();
            }
        });
   });

The solution you found is not the right one, because if you change from the development to production environment, then the generated route will be incorrect again.

Answer 2

It was a path error.

I correct it in my js file like this :

path: "http://" + location.host,

$.ajax({
            url: selfObject.path + "/SymfonyReapproProduction/web/app_dev.php/appli/circuit",

I still don't understand why {{ path('mk_reappro_production_circuit') }} doesn't work.