(Javascript in Symfony4) - Path function not working - ajax

Question

The {{ path }} function when used in JavaScript is not working in Symfony 4. Just some background:
$ bin/console debug:router
Produces:
add_post_comment ANY ANY ANY /comment/add/post
In my JavaScript file, here is what my AJAX call looks like:
$.ajax({
url: "{{ path('/comment/add/post') }}", // I also tried "{{ path('add_post_comment') }}"
type: "POST",
dataType: "json",
data: {
"userId": userId,
"postId": postId,
"commentText": commentText
},
async: true,
success: function (data)
{
alert("success!");
console.log(data)
$('div#ajax-results').html(data.output);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("error - " + errorThrown + " - textStatus is " + textStatus);
console.log("Error in saving comment to database: " + errorThrown);
console.log(errorThrown);
console.log("XMLHttpRequest is: ");
console.log(XMLHttpRequest);
}
});
Then when I debug everything in the JavaScript console, it produces:
http://------.-------.com/%7B%7B%20path('/comment/add/post')%20%7D%7D 404 (Not Found)
So the path command is not actually compiling.
Here is what my composer.json looks like:
{
"type": "project",
"license": "proprietary",
"require": {
"php": "^7.1.3",
"ext-iconv": "*",
"aws/aws-sdk-php": "^3.67",
"aws/aws-sdk-php-symfony": "^2.0",
"doctrine/doctrine-fixtures-bundle": "^3.0",
"knplabs/knp-paginator-bundle": "^2.8",
"sensio/framework-extra-bundle": "^5.2",
"symfony/asset": "^4.1",
"symfony/console": "^4.1",
"symfony/event-dispatcher": "^4.1",
"symfony/expression-language": "^4.1",
"symfony/flex": "^1.0",
"symfony/form": "^4.1",
"symfony/framework-bundle": "^4.1",
"symfony/lts": "^4#dev",
"symfony/monolog-bundle": "^3.3",
"symfony/orm-pack": "^1.0",
"symfony/process": "^4.1",
"symfony/security-bundle": "^4.1",
"symfony/serializer-pack": "*",
"symfony/swiftmailer-bundle": "^3.2",
"symfony/translation": "^4.1",
"symfony/twig-bundle": "^4.1",
"symfony/validator": "^4.1",
"symfony/web-link": "^4.1",
"symfony/yaml": "^4.1",
"twig/extensions": "^1.5"
},
"require-dev": {
"symfony/debug-pack": "*",
"symfony/dotenv": "^4.1",
"symfony/maker-bundle": "^1.5",
"symfony/profiler-pack": "*",
"symfony/test-pack": "^1.0",
"symfony/web-server-bundle": "^4.1"
},
"config": {
"preferred-install": {
"*": "dist"
},
"sort-packages": true
},
"autoload": {
"psr-4": {
"App\\": "src/"
}
},
"autoload-dev": {
"psr-4": {
"App\\Tests\\": "tests/"
}
},
"replace": {
"symfony/polyfill-iconv": "*",
"symfony/polyfill-php71": "*",
"symfony/polyfill-php70": "*",
"symfony/polyfill-php56": "*"
},
"scripts": {
"auto-scripts": {
"cache:clear": "symfony-cmd",
"assets:install %PUBLIC_DIR%": "symfony-cmd"
},
"post-install-cmd": [
"#auto-scripts"
],
"post-update-cmd": [
"#auto-scripts"
]
},
"conflict": {
"symfony/symfony": "*"
},
"extra": {
"symfony": {
"allow-contrib": false
}
}
}
Any help is greatly appreciated.

Answer 1

Include your code inside another twig which you are sure of that it is rendered already as a twig. (like your base.html.twig or even better: only twig files that are actually going to need this piece of code)
The twig file located in SomeBundle in the folder Resources/views/Someotherfolder with name "myjavascript.html.twig" can look like this:
<script>
// Your javascript code here
var myvar = "{{ path('add_post_comment') }}";
</script>
This file you include inside another twig file
{% block javascripts %}
{% include 'SomeBundle:Someotherfolder:myjavascript.html.twig' %}
{% endblock %}
Or when your code in the file myjavascript.html.twig is without "script" tags like:
// Your javascript code here
var myvar = "{{ path('add_post_comment') }}";
You need to put it inside other script tags
{% block javascripts %}
<script>
{% include 'SomeBundle:Someotherfolder:myjavascript.html.twig' %}
</script>
{% endblock %}