I'm trying to generate URL in my Javascript but I can't due to this error:
Error: The route "my_route" does not exist.
I don't know why but the route is not recongnized...
What I did:
1) Get the bundle by composer
2) Published the assets :
php bin/console assets:install --symlink public
3) Use this in JS:
Routing.generate("my_route")
4) And then, this in my controller:
/**
* #Route("/route/to/route", options = { "expose" = true }, name="my_route")
* #param Request $request
* #return Response
*/
public function my_route(Request $request){
some things... };
So, it's not working...
I checked the JS dependencies that are loaded in the page:
<script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
The first work but the second return error 404... Why ?
Regards
Related
I've tried to add webpack to a Symfony 3.1 app. The problem is, when I add HMR, the asset function doesn't resolve correctly
// base.html.twig
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
// app/config/config_dev.yml
framework:
assets:
base_path: "http://localhost:8080"
Result: <script src="/http://localhost:8080/bundles/fosjsrouting/js/router.js"></script>
How can I tell Symfony to not prepend the starting / if the base_path begins with http://?
You can use base_urls. Protocol/host/port should not be used in base_path for assets.
https://symfony.com/doc/current/reference/configuration/framework.html#assets
Have installed the angularjs and Twitter.Bootstrap packages succesfully
This is my index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
This is my app.js:
var TodoApp = angular.module("TodoApp", []).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
And, this is my list.html:
<h1>Test: {{test}}</h1>
This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.
No idea about what am i doing wrong?
Once you have defined a module, you need to define your controllers for that module and not independently.
Thus, your controller should be rewritten as:
TodoApp.controller('ListCtrl', [ '$scope', '$location',
function ($scope, $location) {
$scope.test = "Testing";
}
]);
This should show the view in question.
I would say, that if you check errors in console (in Chrome or IE press F12) you should see:
...Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider...
The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:
var TodoApp = angular
// here we say: we do not need any other module
.module("TodoApp", [])
// here we ask: inject $routeProvider from other module
.config(function ($routeProvider)
So to make it runing we have to include the module 'ngRoute'
var TodoApp = angular
// here we say: we need these modules to make our module working properly
.module("TodoApp", [
'ngRoute'
])
// now we can ask for the provider,
// using minification-safe syntax
.config(
[ '$routeProvider',
function ($routeProvider) {
$routeProvider.
...
}]);
And also do not forget to also reference this module scripts:
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>
What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?
Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:
<div ng-controller="someController">
<h1>{{ test }}</h1>
</div>
If you insist on keeping the function as a separate variable, you could do so and still have a controller:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
TodoApp.controller('someController', ListCtrl);
This also works.
Despite of this, your UI won't show, as there's an error in it:
var TodoApp = angular.module("TodoApp", [])
You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:
var TodoApp = angular.module("TodoApp", ['ngRoute'])
Your app should work after that.
I'm trying to use the AliDatatableBundle and I follow every step as docs say, so this is how my controller looks like:
public function indexAction(Request $request) {
$this->_datatable();
return $this->render('PICommonBundle:Default:index.html.twig');
}
private function _datatable() {
return $this->get('datatable')
->setEntity("PIProyectoBundle:Proyectos", "p")
->setFields(
array(
"Nombre" => 'p.nombre',
"Centros" => 'c.descripcion',
"Unidades" => 'u.descripcion',
"_identifier_" => 'p.id')
)
->addJoin('p.centros', 'c', \Doctrine\ORM\Query\Expr\Join::INNER_JOIN)
->addJoin('p.unidades', 'u', \Doctrine\ORM\Query\Expr\Join::INNER_JOIN);
}
public function gridAction() {
return $this->_datatable()->execute();
}
And this is my template:
{% extends '::base.html.twig' %}
{% block content %}
<link href="{{ asset('bundles/alidatatable/css/demo_table.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('bundles/alidatatable/css/smoothness/jquery-ui-1.8.4.custom.css') }}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{{ asset('bundles/alidatatable/js/jquery.datatable.inc.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/alidatatable/js/jquery.dataTables.min.js') }}"></script>
{{
datatable({
'edit_route' : 'editar-asistencia',
'delete_route' : 'eliminar-asistencia',
'js' : {
'sAjaxSource' : path('informes')
}
})
}}
{% endblock %}
But any time I try to execute the page I get this error:
DataTables warning (table id = 'ali-dta_98f13708210194c475687be6106a3b84'):
DataTables warning: JSON data from server could not be parsed. This is caused > by a JSON formatting error.
Any advice? I'm using latest jQuery 1.10.2.
are you spanish?
(i´m too !!)
I think your problem is whit sAjaxSource.
Read this tip:
Ali en github
At the end of post comment:
"I took a look on your code and even tested it: your error is too simple , the "sAjaxSource" have to include the route for the grid action and not the index action "
In my case this solved:
In (bundle) routing.yml:
empleados_grid:
pattern: /empleados_grid
defaults: { _controller: MyBundle:Empleados:grid }
and in twig template:
{{ datatable({
'edit_route' : 'empleados_update',
'delete_route' : 'empleados_delete',
'js' : {
'sAjaxSource' : path('empleados_grid')
}
})
}}
enter link description here
I am trying about this:
text
I have this in my twig
<a href='{{ path('likes_show_names') }}' rel='facebox'>
And than in controller:
$view= $this->renderView('WallBundle:Statuses:likes_names.html.twig');
return new Response($view);
No error appear the network (chrome) is displaying code get 200. Facebox open the pop up but the connntent.. is missing...
When i check response => preview its displaying: This request has no preview available
What i am doing wrong please?
I put Facebox in my web/ directory. The file structure looks like this:
web/facebox
web/js/jquery.js
Then, on the routing, I set my default and the ajax-called controller:
vendor_some_bundle_homepage:
pattern: /
defaults: { _controller: VendorSomeBundle:Default:index }
vendor_some_bundle_test:
pattern: /test
defaults: { _controller: VendorSomeBundle:Default:ajax }
Next, I created a simple controller for both routes:
<?php
namespace Vendor\SomeBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
public function indexAction()
{
return $this->render('VendorSomeBundle:Default:indexTest.html.twig');
}
public function ajaxAction()
{
return $this->render('VendorSomeBundle:Default:ajaxTest.html.twig');
}
}
Then, and I think the most important file for you, the page where there is a link that open facebox :
<!-- indexTest.html.twig -->
<html>
<head>
<link href="{{ asset('facebox/src/facebox.css') }}" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
<a href="{{ path('vendor_some_bundle_test') }}" rel='facebox'>click me</a>
<script src="{{ asset('js/jquery.js') }}" type="text/javascript"></script>
<script src="{{ asset('facebox/src/facebox.js') }}" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
});
</script>
</body>
</html>
Important: you should take care of your assets and of the routing. If there is some errors, they should be written in your app/log/dev.log file, or at last in your apache error.log.
Finally, create the view that will be included:
{# ajaxTest.html.twig #}
This is <em>some</em> remote content
This sample gave me the following result:
Note: there is still some assetic errors (see the close button at the right of the image), because I installed facebox quickly. The point of your question was the access to remote content, and here you have a sample you can follow to find your mistake.
For example, i have a script like this:
Routing.generate('_moderation_profile_confirm',{'id':objectId,'_locale':'en'})
is correct, but when i remove the '_locale' parameter, it send me error like '_locale' must be set.
my route name _moderation_profile_confirm contains a '_locale' prefix but how can i send the 'current' locale for the routing manager?
I supouse you are in twig template:
You can use this shorthand and get current locale:
Routing.generate('_moderation_profile_confirm',{'id':objectId,'_locale':'{{ app.session.locale }} '})
I copy here the response I proposed here
https://stackoverflow.com/a/35223108/279326
To set the request locale to all your call to Routing.generate, you can override this method and add the {{app.request.locale}} param in every call. The following script has to be executed in a twig template and after including routing script.
<!-- Include JSRouting libs & exposed routes -->
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script>
$(function () {
// change name of initial method
Routing.generateImpl = Routing.generate;
// override generate fonction by adding a default _locale from request locale
Routing.generate = function (url, params) {
var paramsExt = {};
if (params) {
paramsExt = params;
}
if (!paramsExt._locale){
paramsExt._locale = '{{ app.request.locale }}';
}
return Routing.generateImpl(url, paramsExt);
}
})
</script>
Now you can use Routing.generate transparently without worry about the _locale param !
// in any JS file
var url = Routing.generate('mypath');
var url2 = Routing.generate('another path', {param: 1});
To clarify the code, it could be possible to isolate the previous script in a js file. For that a global variable has to be defined.
<!-- for exemple in the <head> of the page -->
<script>
var REQUEST_LOCALE = '{{ app.request.locale }}';
</script>
And so in the script you can use REQUEST_LOCALE
// this line
paramsExt._locale = '{{ app.request.locale }}';
// has to be replaced by
paramsExt._locale = REQUEST_LOCALE;