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 : stackoverflow.com/a/16584335/4008043 — Najd Mrabet
– Najd Mrabet, Commented Jun 8, 2016 at 18:17

Ben · Accepted Answer · 2013-05-01 18:09:55Z

80

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 1, 2013 at 18:09

Ben

1,1051 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ZhukV Over a year ago

This is a good variant, but FOSJsRoutingBundle the best solution.

dr.scre Over a year ago

This will escape '&' characters inside url to &

gkd Over a year ago

This will not work is my js file is inside asset folder, which is sibling of src folder..

John the Ripper Over a year ago

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.

igorw · Accepted Answer · 2011-10-02 14:37:29Z

46

You can use the FOSJsRoutingBundle.

answered Oct 2, 2011 at 14:37

igorw

28.4k6 gold badges82 silver badges92 bronze badges

1 Comment

Geoffrey Hale Over a year ago

Routing.generate('route_name')

T30 · Accepted Answer · 2016-02-25 12:09:35Z

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, 2016 at 12:09

T30

12.3k8 gold badges56 silver badges63 bronze badges

answered Jul 5, 2012 at 11:11

George

751 bronze badge

Comments

Yoann Kergall · Accepted Answer · 2019-05-03 12:49:32Z

0

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
    })
})

answered May 3, 2019 at 12:49

Yoann Kergall

3,3425 gold badges26 silver badges25 bronze badges

Comments

Imen AchOurii · Accepted Answer · 2016-11-08 20:50:15Z

-1

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

answered Nov 8, 2016 at 20:50

Imen AchOurii

117 bronze badges

Collectives™ on Stack Overflow

Generating routes in javascript with Twig and Symfony2

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related