Ajax url to action not working + Symfony2

Question

I want to make an ajax call with jquery autocomplete like this:

$("#register_player_team").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "{{path('volley_scout_getteams_data')}}",
            dataType: "jsonp",
            success: function( data ) {
                console.log(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status);
                console.log(thrownError);
            }
        });
    }
});

In my routing.yml I have the following route defined:

volley_scout_getteams_data:
pattern:  /team/getteams
defaults: { _controller: VolleyScoutBundle:Team:getteams }

And in my TeamController I have an action called getteamsAction():

public function getteamsAction()
{
    $entityManager = $this->getDoctrine()->getManager();
    // Get teams from database
    $teams = $entityManager->getRepository('VolleyScoutBundle:Teams')->findAll();

    foreach($teams as $team){
        var_dump($team);
    }

    die();
}

(The dump and die() is just for testing, I want to check if he can find the link). But when I want to make the ajax call I always get the following error:

http://localhost:8080/volleyscout/web/app_dev.php/user/%7B%7Bpath('volley_s…)%7D%7D?callback=jQuery110207641139030456543_1389372448462&_=1389372448463 404 (Not Found) 

For some reason he can't find the action ... Does someone knows what I'm doing wrong? And when I try the link like this: web/app_dev.php/team/getteams I get a dump of the teams ..

UPDATE: My javascript links are defined in base view (twig) like this:

{% block javascripts %}
    {% javascripts
        '@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
        '@VolleyScoutBundle/Resources/public/js/*'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

And the ajax call is in my page.js:

(function () {
    $("#register_userType").change(function(){
        var value = $(this).find("option:selected").val();
        if(value == 'P' || value == 'T'){
            $('.teams').show();
        }
        else{
            $('.teams').hide();
        }
    });
    $("#register_player_team").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "{{path('volley_scout_getteams_data')}}",
                dataType: "jsonp",
                success: function( data ) {
                    console.log(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
                }
            });
        }
    });
})();

UPDATE 2: I did the following things:

• Installed the bundle
• Added the bundle to my AppKernel
• Registered the routing definition in app/config/routing.yml
• Published assets (php app/console assets:install --symlink web)

Added the 2 javascript lines to my base.html.twig like this:

{% block javascripts %}
    {% javascripts
        '@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
        '@FOSJsRoutingBundle/Resources/public/js/router.js'
        '@VolleyScoutBundle/Resources/public/js/bootstrap.min.js'
        '@VolleyScoutBundle/Resources/public/js/jquery-ui-1.10.3.custom.min.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
    <script src="{{ asset('bundles/volleyscout/js/security.js') }}"></script>
{% endblock %}

But now I get this errors:

GET http://localhost:8080/volleyscout/web/app_dev.php/js/routing?callback=fos.Router.setData 500 (Internal Server Error) register:117
Uncaught Error: The route "volley_scout_getteams_data" does not exist. 

It's very strange. When I clear my cache, the first time it works perfectly. And when I refresh it shows the errors ...

Solution

The following line in your javascript code

url: "{{path('volley_scout_getteams_data')}}",

won't work...

The best way is to use the FOSJsRoutingBundle

1 Install FOSJsRoutingBundle to expose your routing in your JavaScript code. (very straight-forward)

2 Enable your route

volley_scout_getteams_data:
    pattern:  /team/getteams
    defaults: { _controller: VolleyScoutBundle:Team:getteams }
    options:
        expose: true

3 Adapt your js

var getTeamsUrl = Routing.generate('volley_scout_getteams_data');

$("#register_player_team").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: getTeamsUrl,
            //...
        });
    }
});