Rim
Rim

Reputation: 78

Ajax url parametetr using Twig path

i have a problem in my twig view when i pass params in the ajax url path, logically twig is executed before javascript so he didnt recognize the input value passed as parameter. Is there a solution to do this without passing the param in data ?

 <script type="text/javascript" charset="UTF-8">
(function($) {

    var $projectField = $('#project-field-container');

    $projectField.on('change', function() {
        var id_project = $(this).val();
        if('' != id_project) {
            $.ajax({
                url: {{ path('project_field', {'id_project': id_project})}},
                success: function (data) {
                    var content = $('select', data.contentHTML).html();
                    $projectField.html(content).trigger('change');
                }
            });
        } else {

        }
    });
})(jQuery);

Upvotes: 3

Views: 3319

Answers (3)

ghabriel
ghabriel

Reputation: 123

You could add

data-url="{{ path('project_field', {'id_project': id_project}) }}"

and access it through your js

<script type="text/javascript" charset="UTF-8">

(function($) {

var $projectField = $('#project-field-container');

$projectField.on('change', function() {

    var url = $(this).data('url');

    $.ajax({
      url: url,
      success: function (data) {
            var content = $('select', data.contentHTML).html();
                $projectField.html(content).trigger('change');
            },
      error: function (data) {
            console.log(data);
        }
      });
    });
})(jQuery);

Upvotes: 0

Guigzz
Guigzz

Reputation: 131

Maybe you could try to assign the twig statement to a js variable earlier (before the call to ajax) like this :

var path = {{ path('project_field', {'id_project': id_project})}};

and then use

url: path

in your ajax request.

Upvotes: 1

Rvanlaak
Rvanlaak

Reputation: 3085

You should use the FOSJsRoutingBundle for this. It has an interface that is similar or maybe even identical to the Twig {{ path() }} and allows you to only expose a small part of the routes to Javascript.

Your js implementation then will be able to generate routes as you can see in the documentation.

Upvotes: 1

Related Questions