0

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 : Symfony Toolbar Message Error

3
  • Always add an error callback please to your ajax request. Commented Mar 14, 2017 at 22:23
  • What should I insert in the error callback in the ajax request to view try to see what the problem is ? Thanks in advance ! Commented Mar 14, 2017 at 22:31
  • In your controller, have you tried to dump($id) to verify you are getting what you expect? Commented Mar 15, 2017 at 1:22

2 Answers 2

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.

Sign up to request clarification or add additional context in comments.

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.