How to pass a variable from javascript to symfony2 controller

Question

I have a modal with some datas in a table and a radio button beside each row. Everytime I click that radio button, the corresponding datas will be stored in an array after clicking a button. Now, I have a problem in passing a variable from the javascript to my controller which is the 6th index of my array.

Based on what I have researched, most of the solutions were using ajax. I have already tried all the possible codes that I can in my controller but seems like it's not receiving anything. The data I sent in my ajax call did not reach the controller. Here is my twig file:

<button type="button" id="selectrow" class="btn btn-primary pull-right btn-spacing">Select</button>

$(document).ready(function () {
        $('#selectrow').click(function () {
          var data = selected[6];

                jQuery.ajax({
                    url: "project/edit/",
                    type: "GET",
                    data: { "data": data },
                    success: function (data) {
                        alert("OK");
                    },
                    error: function (data) {
                        alert("fail");
                    }
        });
});

The selected variable is where I stored the selected data somewhere in the file respectively. And below is my controller, I tried to display the following but the outputs are all null.

public function editAction(Request $request) {
       if ($request->isXmlHttpRequest()) {
          dump($request->getContent());
       }    

       dump($request->request->get('data'));
       dump($request->query->get('data'));
}

I am just really confused because after clicking the button it alerts 'OK' however, the data is not being sent to the controller. Can someone help me with this? It will really be appreciated, thank you.

This is the output that I get:

Answer 1

The problem here is that you refresh the page which means that you call the controller without any data at all. What happens before that is that jQuery calls your editAction method and waits for a response that never appears because you return nothing in the Controller which is peculiar because you should get an Error saying that a Controller should return a Response .

So what you have to ways to make sure the Controller receives the data from jQuery :

1. dump and die :

    public function editAction(Request $request) { if ($request->isXmlHttpRequest()) { dump($request->getContent()); } dump($request->request->get('data')); dump($request->query->get('data')); die(); // terminate the current script } 

2. Return the data in a response and handle it in jQuery s success :

   In the Controller:

    return new JsonResponse($request->request->get('data')); 

   In jQuery s success:

    $(document).ready(function () { $('#selectrow').click(function () { var dataSend = selected[6]; jQuery.ajax({ url: "project/edit/", type: "GET", data: { "data": dataSend }, success: function (data) { console.log(data...); if(data == dataSend) console.log("equivalent"); }, error: function (data) { alert("fail"); } }); }); 

   I don´t know what type the data variable. In case it is just a String or a Number you can just console.log(data) which should output the value in the browser console.

Please leave a comment if that works...