How to integrate Ajax with Symfony2

Question

I'm looking form simple tutorial/example about ajax in symfony2, for beginner?

I have these examples:

city.php: http://pastebin.com/Qm8LS5kh
ajax_req.js: http://pastebin.com/UqJMad24
index.html: http://pastebin.com/H1err4Yh

How can these be put into a Symfony2 app?

Have you tried to create Entity/Form/Action/View with no ajax? — Ziumin, Nov 27 '12 at 12:50
Your question is horribly presented, but the answer helped me a lot — Nico, Sep 14 '13 at 17:50

score 103 · Accepted Answer · answered Nov 27 '12 at 13:53

103

It is easy. I will illustrate how to do an AJAX call in Symfony2 through 3 steps. For the following example, assume to use the jQuery library.

Define the route for the action that has to handle your AJAX call. E.g.

AcmeHomeBundle_ajax_update_mydata:
  pattern:  /update/data/from/ajax/call
  defaults: { _controller: AcmeHomeBundle:MyAjax:updateData }

Define the action in the MyAjax controller from Home bundle. E.g.

public function updateDataAction(){
  $request = $this->container->get('request');        
  $data1 = $request->query->get('data1');
  $data2 = $request->query->get('data2');
  ...
  //handle data
  ...
  //prepare the response, e.g.
  $response = array("code" => 100, "success" => true);
  //you can return result as JSON
  return new Response(json_encode($response)); 
}

Prepare your AJAX call in your Twig template, e.g.:

function aButtonPressed(){
    $.post('{{path('AcmeHomeBundle_ajax_update_mydata')}}',               
                {data1: 'mydata1', data2:'mydata2'}, 
            function(response){
                    if(response.code == 100 && response.success){//dummy check
                      //do something
                    }

    }, "json");    
}

$(document).ready(function() {     
  $('button').on('click', function(){aButtonPressed();});
});

You can change the example by using other AJAX calls.

answered Nov 27 '12 at 13:53

JeanValjean

17,172
23
113
157

controller http://pastebin.com/sPJkhpbY routing http://pastebin.com/mpb4X7CU ajax.js http://pastebin.com/tx70YNxz view: http://pastebin.com/9DvVPYMJ when I open browser i only see: {"code":100,"success":true} I completely beginner – Thomas Shelby Nov 27 '12 at 14:20
this means that we will have to write the js code in php ?? – wilsonrufus Aug 05 '13 at 06:00
1

@wilsonrufus **NO!** JS is always executed on the client side, PHP at server side. Using ajax, you don't render the whole page at client side in one call. The client request for an URL. The server first returns the main PHP page with the JS code that I illustrated. Then, once the browser receive the response and load the main page (and finally document is ready), the JS code is executed. The JS code makes a call to a Symfony action (which is mapped by a unique URL) and waits for the result that is handled by JS. – JeanValjean Aug 05 '13 at 13:05
2

Don't you need to test if request is xmlHttpRequest ?? – Haithem Rihane Mar 05 '14 at 14:45
11

Use new JsonResponse($data) instead of new Response(json_encode($data)) – TeaCupApp Jul 16 '14 at 06:51
Thanks. It's working as expected & helps me a-lot to call ajax with symfony :) – Jun 24 '15 at 07:19
1

For Symfony 2.2 and higher you can simply use `return new JsonResponse($response)` without encoding it. – user2268997 Sep 09 '15 at 13:27
[link](http://stackoverflow.com/q/32725054/5067173) Can anyone help me? – Marcius Leandro Sep 23 '15 at 14:20
@zm455 read the PHP code first. – JeanValjean Jul 27 '16 at 16:49

How to integrate Ajax with Symfony2

1 Answers1

Linked