symfony2 how to access twig path by javascript

Question

In symfony2, this works fine in the html.twig file:

<a class="btn brl-next brl-btn" href="{{ path('new_message') }}">Next</a>

but currently, i need to access path('new_message') by javascript.

I tried:

        nextButtons.each(function () {
            $(this).on('click', function () {
                $("a").prop("href", "{{ path('new_message') }}");
            });
        });

But it's not working, does someone can help me on how to access symfony path by javascript?

^ +1 use that bundle, so you don't have to reinvent the wheel. — moonwave99
– moonwave99, Commented Jul 21, 2014 at 13:44
You can add the routes to your anchor tags in your twig template like explained here: stackoverflow.com/a/24674562/1791606 . Meaning you can have standalone javascript files rather mixing javascript and html in your template files. — qooplmao
– qooplmao, Commented Jul 21, 2014 at 13:51
@Debflav I like the ideao of FOSJsRoutingBundle, but it depends on how often you need that. For just a simple ajax task where you want to define your route in routing.yml you also can make a simple div with an attribute, as i described below :) — Neysor
– Neysor, Commented Jul 21, 2014 at 19:15

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Just add an HTML Element with an attribute with the path. I use that e.g for getting my ajax route. See example below:

dyncontent.html.twig

<div id="dyncontent" class="dyn" data-ajaxurl="{{ path("common_ajax") }}"></div>

i need that div for loading data into it, and as path information i have the data-ajax attribute with my path defined.

now i can select this path with my Javascript

dyncontent.js

var ajaxpath =  $("#dyncontent").attr("data-ajaxurl");
$.getJSON(ajaxpath , null, function(data) {
  //get JSON out of the right controller with correct path
}

I am not sure what you are trying with your buttons, but you can also make

button.html.twig

<a class="btn brl-next brl-btn" href="#" data-path="{{ path('new_message') }}">Next</a>

and get the information with

button.js

var new_message_path = $(".brl-btn").attr("data-path");

now you have your path in the new_message_path variable. But think about making your selector unique.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 21, 2014 at 19:02

Neysor

3,91511 gold badges36 silver badges67 bronze badges

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

Comments

ji_bay_ · Accepted Answer · 2014-07-21 13:33:42Z

0

You can do this like that:

In your layout.html.twig define global js vars like this:

<script type="text/javascript">
    var routes = {
        myroutes:{
            route1:"{{ path('my_symfony_route', {}, true) }}", // the true permits to use relative path
            route1:"{{ path('my_symfony_route2', {}, true) }}" 
        },
    };
</script>

Then in yourjsfile.js call global depending on your needs

nextButtons.each(function () {
    $(this).on('click', function () {
        $("a").prop("href", routes.myroutes.route1);
    });
});

I hope this will help you!

answered Jul 21, 2014 at 13:33

ji_bay_

2211 silver badge6 bronze badges

9 Comments

J.L Over a year ago

it does not work: it will direct go to : /{{ path('new_message', {}, true) }}

ji_bay_ Over a year ago

This is strange, it works for me... could you test your variables visibility via your firebug console?

J.L Over a year ago

are you using FOSJsRoutingBundle ?

ji_bay_ Over a year ago

No i don't use FOSJsRouting.

ji_bay_ Over a year ago

you can try without options i put in the example: routes = { myroutes:{ route1:"{{ path('my_symfony_route') }},

|

HaveNoDisplayName · Accepted Answer · 2015-06-11 14:25:27Z

0

For my case, I use all the path

For example if your route's name is: "new_message", and the path is /yourproject/web/app_dev.php/message/new,you can make like that in javascript:

var route='/docMessagerie/web/app_dev.php/protocol/updateProtocol/';

It's working for me

edited Jun 11, 2015 at 14:25

HaveNoDisplayName

8,537106 gold badges41 silver badges50 bronze badges

answered Jun 11, 2015 at 14:04

Gothiquo

8681 gold badge11 silver badges33 bronze badges

Comments

Hemant Parmar · Accepted Answer · 2018-02-06 07:41:38Z

0

You can directly add twig path syntax like this.

var commercial = '{{path('_commercial')}}';

then you can call like this

 window.location = commercial ;

edited Feb 6, 2018 at 7:41

Hemant Parmar

4,0047 gold badges28 silver badges53 bronze badges

answered Feb 6, 2018 at 7:03

Jilani Shaik

1

Collectives™ on Stack Overflow

symfony2 how to access twig path by javascript

4 Answers 4

dyncontent.html.twig

dyncontent.js

button.html.twig

button.js

Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

dyncontent.html.twig

dyncontent.js

button.html.twig

button.js

Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related