Set twig variable from javaScript

Question

I need to generate url to be able to load some content in html element.

$('#editSchool').click(function () {
            var id = $(this).attr('data-id');

Problem starts here when I try to insert id value for id parameter

            $('#educationDialog').load("{{ path('_education_edit', {'id': id}) }}", function () {
                $('.closeDialog, #person_education_form_cancel').click(function () {
                    $('#addSchool').trigger('click');
                });
            });
        });

Do you have some solution, if this is possible?

Please state clearly the problem and desired behaviour.

Mitya
– Mitya

2017-01-06 11:14:30 +00:00
Commented Jan 6, 2017 at 11:14 — Mitya
– Mitya, Commented Jan 6, 2017 at 11:14

Stevan Tosic · Accepted Answer · 2018-03-27 08:20:06Z

2

The problem was very simple. Instead of passing data-id attribute, data-url can be passed.

<span id="editSchool" data-url="{{ path('_education_edit', {'id': id}) }}">  
     Edit School
</>

$('#editSchool').click(function () {
        var url = $(this).data('url');

        $('#educationDialog').load(url, function () {
            $('.closeDialog, #person_education_form_cancel').click(function () {
                $('#addSchool').trigger('click');
            });
        });
    });

answered Mar 27, 2018 at 8:20

Stevan Tosic

7,30714 gold badges65 silver badges121 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:00:32Z

1

The twig is parsed when the page is rendered, so the id variable in your route declartion is set when the page loads.

The easiest fix is to change your route to accept a nullable parameter for the id, then add the id to the route in your JavaScript. Also, for use in JavaScript, you will need to use the url twig function as it gives an absolute url, path gives a relative url. Ref: What is the difference between 'url' and 'path' in symfony2.3

Example routing.yml;

my_route:
    path:    /foo/bar/{id}
    defaults:   { _controller: AppBundle:Foo:bar, id: null }

Then in your twig;

<script>
var url = '{{ url('my_route') }}'+'/';
var id = $(this).attr('data-id'); 
$('#educationDialog').load(url+id, function () {
    // ...
});
</srcipt>

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jan 6, 2017 at 11:37

Rooneyl

7,9226 gold badges58 silver badges83 bronze badges

3 Comments

t-n-y Over a year ago

you should avoid putting your javascript in the twig template

Rooneyl Over a year ago

@t-n-y where do you put your JavaScript and why should putting it in a twig file be avoided?

t-n-y Over a year ago

it s better to separate you javascript in js files. It should be avoided to separate the code, just like you avoid putting css in the html.

Collectives™ on Stack Overflow

Set twig variable from javaScript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related