How to generate Symfony 2 twig URL with parameter value from Javascript?

Question

I want to append query string parameters from javascript (jquery) to symfony 2 url. I want to pass the value of selected radio button to ajax request egin plain php I would have done like

$(document).ready(function() {
    $('.id_radio').click(function() {                      
        $.ajax({
            'url': 'example.php?id='+($this).val(),
            'success': function(r) {
                $('#div1').html(r);
            }
        });
    });

How to generate such URL in symfony2 twig ? We generate URL in symfony 2 twig like

{{ path('example_path', {'id': id}) }} where id is twig variable.

I tried using FOSJsRoutingBundle but don't know if it is for same problem and not sure how to use it ?

I tried below but it is not working.

$('.id_radio').click(function() {
    alert(Routing.generate('example_path', {
        'id': $(this).val()
        }));
    $.ajax({
        'url': Routing.generate('example_path', {
            'id': $(this).val()
            }),
        'success': function(r) {
            $('#div1').html(r);
        }
    });
});

Solution mentioned below by koskoz worked, I did not pass options={"expose"=true} but after adding it worked.

But there is one more problem. It works only until we do not refresh page. If we refresh page, it does not work. To make it work, I have to delete symfony cache files.

It does not work in other browser if we have already opened it in one browser.

Answer 1

This is exactly what FOSJsRoutingBundle is aiming for:

You configure the route you want to expose in JavaScript, load the JS and then simply do something like this :

Routing.generate('my_route_to_expose', { id: 10 });

Answer 2

Instead of

/**
 * @Route("/example/{name}", name="example_path", options={"expose"=true})
 * @Template
 */
public function exampleAction($name)
{

}

and using FOSJsRoutingBundle

$('.id_radio').click(function() {
    alert(Routing.generate('example_path', {'id': $(this).val()}));
    $.ajax({
        'url': Routing.generate('example_path', {'id': $(this).val()}),
        'success': function(r) {
            $('#div1').html(r);
        }
    });
});

Below worked better for me,

     /**
     * @Route("/example", name="example_path", options={"expose"=true})
     * @Method({"GET"})
     * @Template 
     */
    public function exampleAction()
    {


    }

$('.id_radio').click(function() {
    $.ajax({
        'url': '{{ path('example_path') }}',
        'data': 'name='+$(this).val(),
        'type': 'GET',
        'success': function(r) {
            $('#div1').html(r);
        }
    });
});

Answer 3

Get the fosjsrouting bundle from here: https://github.com/FriendsOfSymfony/FOSJsRoutingBundle and in your routing file add for that route

options: expose: true

And in your js file add url = Routing.generate('route_name', {parameter: parameter_value});