How to setup an ajax call using symfony2 - symfony

Question

I have this simply ajax/jquery call to a symfony2 controller/action
$.ajax({
type: 'post',
url: 'http://symfony.local:8080/app_dev.php/api/searches/guitar.json',
success: function(results) {
}
});
I'd need to change the first part of the url 'http://symfony.local:8080/app_dev.php/api/searches/guitar.json' in order to make it independent from the front controller I'm using. How can I achieve this?

Answer 1

First, why are you supplying the whole URL? You could omit the domain part so that the path is relative:
$.ajax({
type: 'post',
url: '/app_dev.php/api/searches/guitar.json',
success: function(results) {
}
});
Second, you can set up the prefix for your AJAX calls in a Symfony view:
<script type="text/javascript"></script>
{% if app.environment == 'dev' %}
var root = '/app_dev.php/';
{% else %}
var root = '/';
{% endif %}
</script>
I've introduced a window.root variable here. You can use it in your scripts then:
// ...
url: root + '/api/searches/guitar.json',
// ...
And as suggested in the comments, the best way here would be passing the URL to your scripts with a separate routing provider for JavaScript.

Answer 2

You could set the url as the href and catch it or set it as some of data tag.
As href
Your link
Link
And the javascript
$('a.ajax-link', function (e) {
e.preventDefault();
// Stop link updating page
var href = $(this).attr('href);
$.ajax({
type: 'post',
url: href,
....
});
});
Or as a data field
Your link
<a data-href="{{ path('your_route') }}" class="ajax-link">Link</a>
And the javascript
$('a.ajax-link', function (e) {
e.preventDefault();
// Stop link updating page
var href = $(this).data('href);
... see above ...
});
With either of these ways there is no use for FOSJsRouting or hard coded routes.