I want to make an ajax call with jquery autocomplete like this:
$("#register_player_team").autocomplete({
source: function( request, response ) {
$.ajax({
url: "{{path('volley_scout_getteams_data')}}",
dataType: "jsonp",
success: function( data ) {
console.log(data);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
}
});
In my routing.yml I have the following route defined:
volley_scout_getteams_data:
pattern: /team/getteams
defaults: { _controller: VolleyScoutBundle:Team:getteams }
And in my TeamController I have an action called getteamsAction():
public function getteamsAction()
{
$entityManager = $this->getDoctrine()->getManager();
// Get teams from database
$teams = $entityManager->getRepository('VolleyScoutBundle:Teams')->findAll();
foreach($teams as $team){
var_dump($team);
}
die();
}
(The dump and die() is just for testing, I want to check if he can find the link). But when I want to make the ajax call I always get the following error:
http://localhost:8080/volleyscout/web/app_dev.php/user/%7B%7Bpath('volley_s…)%7D%7D?callback=jQuery110207641139030456543_1389372448462&_=1389372448463 404 (Not Found)
For some reason he can't find the action ... Does someone knows what I'm doing wrong? And when I try the link like this: web/app_dev.php/team/getteams
I get a dump of the teams ..
UPDATE: My javascript links are defined in base view (twig) like this:
{% block javascripts %}
{% javascripts
'@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
'@VolleyScoutBundle/Resources/public/js/*'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
And the ajax call is in my page.js:
(function () {
$("#register_userType").change(function(){
var value = $(this).find("option:selected").val();
if(value == 'P' || value == 'T'){
$('.teams').show();
}
else{
$('.teams').hide();
}
});
$("#register_player_team").autocomplete({
source: function( request, response ) {
$.ajax({
url: "{{path('volley_scout_getteams_data')}}",
dataType: "jsonp",
success: function( data ) {
console.log(data);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
}
});
})();
UPDATE 2: I did the following things:
Added the 2 javascript lines to my base.html.twig like this:
{% block javascripts %}
{% javascripts
'@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
'@FOSJsRoutingBundle/Resources/public/js/router.js'
'@VolleyScoutBundle/Resources/public/js/bootstrap.min.js'
'@VolleyScoutBundle/Resources/public/js/jquery-ui-1.10.3.custom.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script src="{{ asset('bundles/volleyscout/js/security.js') }}"></script>
{% endblock %}
But now I get this errors:
GET http://localhost:8080/volleyscout/web/app_dev.php/js/routing?callback=fos.Router.setData 500 (Internal Server Error) register:117
Uncaught Error: The route "volley_scout_getteams_data" does not exist.
It's very strange. When I clear my cache, the first time it works perfectly. And when I refresh it shows the errors ...
The following line in your javascript code
url: "{{path('volley_scout_getteams_data')}}",
won't work...
The best way is to use the FOSJsRoutingBundle
1 Install FOSJsRoutingBundle to expose your routing in your JavaScript code. (very straight-forward)
2 Enable your route
volley_scout_getteams_data:
pattern: /team/getteams
defaults: { _controller: VolleyScoutBundle:Team:getteams }
options:
expose: true
3 Adapt your js
var getTeamsUrl = Routing.generate('volley_scout_getteams_data');
$("#register_player_team").autocomplete({
source: function( request, response ) {
$.ajax({
url: getTeamsUrl,
//...
});
}
});
Came across this question/answer and almost started to install the mentioned FOSJsRoutingBundle mentioned by @Mick in the answer. As I had the exact same problem in my Ajax Request I couldn't get the URL. But now I don't see the need to get the FOSJsRoutingBundle..
What is an input field without a <form>
tag? Or even better: why is my <input>
field not in a <form>
? It is absolutely valid HTML to have <input>
fields outside a form tag, but it actually makes no sense.
Anyway, it makes sense to have <form>
arround the <input>
so also if the javascript shouldn't work, why so ever, it would sent the request to the right place and load the page. So now if you have a form arround the input just grab the URL from there...
This worked for me:
Add a <form>
{{ form_start(form, {'action': path('volley_scout_getteams_data')}) }}
get the URL/path with javascript
$.ajax({
url: $(this).closest('form').attr('action'),
从您的ajax网址中删除{{}}。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.