Generating routes in javascript with Twig and Symfony2

Question

Quite odd problem, sorry for asking, i'm quite new to Symfony/Twig. My route requires a mandatory region_id paramenter:

ajax_provinces_by_region:
  pattern: /ajax/region/{region_id}/provinces
  defaults: {_controller: SWAItaliaInCifreBundle:Ajax:provincesByRegion }
  requirements: {region_in: \d+}

The question is: how can i generate this route based on a select element in javascript (code below)?

The problem is: i can't use path and url helpers from Symfony as they require to specify the region_id parameter (this.value) i can't access because it's a javascript variable (and Twig is compiled server-side).

$(document).ready(function() {
    $('select#regions').change(function(){

        // Make an ajax call to get all region provinces
        $.ajax({
            url: // Generate the route using Twig helper
        });

    });
});

you can use this trick if you don't like to use bundle : http://stackoverflow.com/a/16584335/4008043 — Najd Mrabet, Jun 08 '16 at 18:17

score 79 · Answer 1 · answered May 01 '13 at 18:09

79

I know it's an old question, but just in case you don't want to install a bundle like FOSJsRoutingBundle, here's a little hack:

var url = '{{ path("yourroute", {'region_id': 'region_id'}) }}'; 
url = url.replace("region_id", this.value);

'region_id' is just used as a placeholder, then you replace it in JS with your actual variable this.value

answered May 01 '13 at 18:09

Ben

1,095
1
11
14

This is a good variant, but FOSJsRoutingBundle the best solution. – ZhukV Aug 14 '13 at 12:53
This will escape '&' characters inside url to & – dr.scre Feb 27 '14 at 08:06
This will not work is my js file is inside asset folder, which is sibling of src folder.. – gkd Nov 10 '14 at 12:33
I thought this was the best solution and I've been using it successfully for a while. Where it fails is if you have routing requirements and multiple values. For example I had a route with two variables and both must be digits (`"\d+"`) so for temporary values I was adding a simple integer into the each one then replacing. What eventually caught me is that the id of the real item got replaced on the 2nd url.replace causing an invalid path to be generated. – John the Ripper Mar 25 '16 at 18:44

score 45 · Accepted Answer · answered Oct 02 '11 at 14:37

45

You can use the FOSJsRoutingBundle.

answered Oct 02 '11 at 14:37

igorw

27,759
5
78
90

2

Routing.generate('route_name') – Geoffrey Hale Dec 16 '15 at 23:11

score 4 · Answer 3 · edited Feb 25 '16 at 12:09

4

url:  "{{ path('SampleBundle_route',{'parameter':controller_value}) }}"

Where SampleBundle_route is a valid path defined in routing.yml or annotatins.

For testing, write this in the twig template:

<script>
    var url= "{{ path('SampleBundle_route') }}";
    alert(url);
</script>

edited Feb 25 '16 at 12:09

T30

11,422
7
53
57

answered Jul 05 '12 at 11:11

George

75
1

score 0 · Answer 4 · answered Nov 08 '16 at 20:50

0

 * @Route("/{id}/edit", name="event_edit", options={"expose"=true})

answered Nov 08 '16 at 20:50

Imen AchOurii

13
7

score 0 · Answer 5 · answered May 03 '19 at 12:49

You can use data attribute in your HTML:

<select id="regions">
    {% for region in regions %}
        <option data-path="{{ path('ajax_provinces_by_region', {'region_id': region.id}) }}">...</option>
    {% endfor %}
</select>

then in your javascript:

$('select#regions').on('change', function() {

    let path = $(this).find(':selected').data('path')

    $.ajax({
        'url': path
    })
})

Generating routes in javascript with Twig and Symfony2

5 Answers5

Linked

Related