I'm trying to integrate Ace Editor into my Symfony2 app. But I'm facing problem which caused by Ace Editor dynamic component loader whenever it tries load Themes and Language supporter. In my template I simply load ace like this
{% javascripts 'bundles/app/js/ace/ace.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
then occurs: Failed to load resource error (theme or language js file).
Any help would be greatly appreciated. Thanks
Try this :
{% block external_javascripts %}
<script src="{{ asset('bundles/app/js/ace/ace.js') }}" type="text/javascript"></script>
{% endblock %}
Related
Is this possible to use assetic with inheritance ? With the code below I get this error :
An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "_assetic_41351d9" as such route does not exist.
My app layout :
{# app/Resources/views/layout.html.twig
{% block javascripts %}
{% javascripts
'assets/js/jquery-2.2.0.min.js'
'assets/js/main.js'
output='assets/compiled/app.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
My child layout :
{% extends "::layout.html.twig" %}
...
{% block javascripts %}
{{ parent() }}
{% javascripts
'assets/js/jquery.owl.min.js'
output='assets/compiled/page.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Yes you can use inheritance with Twig, and there is nothing inherently wrong with what you are trying to do in your code. I would try completely clearing your cache and loading the page again, and make sure all of the assets you are trying to load properly exist.
I believe it's not working the way we wanted it, but I discovered named assets
You name all your parent template assets in the config file
assetic:
assets:
jquery_and_ui:
inputs:
- '#AppBundle/Resources/public/js/thirdparty/jquery.js'
- '#AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
And then you include the jquery_and_ui name in all children, along with any other assets:
{% javascripts
'#jquery_and_ui'
'#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
It's obviously a hassle to do but I can't find the easy way to do this and don't understand why it doesn't generate parent template assets.
EDIT
Are you by any chance using LiipThemeBundle? This could solve the problem:
# app/config/config.yml
liip_theme:
# ...
assetic_integration: true
That should work fine. Extending block javascripts is ok for assets as well.
Actually such a message
Unable to generate a URL for the named route "_assetic_41351d9" as
such route does not exist
says about outdated cache. Did you clear it? That helped me.
php app/console cache:clear --env=dev
Hope it makes sense.
In my case it appeared that error was caused by fact that the base file extension was .html.twig, while child file had only .twig - changing extensions of both files to .html.twig solved the problem...
I have a problem with Symfony 2.7.1
I recently upgraded my project from 2.3 to 2.7.1.
I check all my project searching deprecated things to fix it, but when I open an action twig included templates which in turn contain assets, they are shown with bars directory in ASCII.
I leave an example of the problem, see if someone can give me a solution.
In my template
{% block javascripts %}
{% include 'AdminBundle:Global:notifications.html.twig' %}
{% include '::genemu.js.html.twig' with {'form': form} %}
{% endblock %}
And this is the content in genemu.js.html.twig that shows wrongly
{% javascripts output='admin/js/compiled/main_forms.js'
'bundles/bmatznerjqueryui/js/minified/jquery-ui.min.js'
'bundles/pinanoselect2/js/select2.full.min.js'
'uploadify/jquery.uploadify.min.js'
'tinymce/js/tinymce/jquery.tinymce.min.js'
'datetimepicker/jquery.datetimepicker.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
It shows like that
<script type="text/javascript" src="\x2Fapp_dev.php\x2Fadmin\x2Fjs\x2Fcompiled\x2Fmain_forms_jquery\x2Dui.min_1.js"></script>
<script type="text/javascript" src="\x2Fapp_dev.php\x2Fadmin\x2Fjs\x2Fcompiled\x2Fmain_forms_select2.full.min_2.js"></script>
<script type="text/javascript" src="\x2Fapp_dev.php\x2Fadmin\x2Fjs\x2Fcompiled\x2Fmain_forms_jquery.uploadify.min_3.js"></script>
<script type="text/javascript" src="\x2Fapp_dev.php\x2Fadmin\x2Fjs\x2Fcompiled\x2Fmain_forms_jquery.tinymce.min_4.js"></script>
<script type="text/javascript" src="\x2Fapp_dev.php\x2Fadmin\x2Fjs\x2Fcompiled\x2Fmain_forms_jquery.datetimepicker_5.js"></script>
I think must be an issue from 2.7.1 because it works fine in 2.3
Thanks.
This is because newer versions of Twig are detecting your genemu.js.html.twig as javascript (Because of the js in it) and now the js escaping strategy is used.
Rename your file to genemu.html.twig because it's a html.
I am new to Symfony 2. Previously I worked a lot with Codeigniter. Now that I am exploring assetic, I am not able to understand how I can add a single file to the stack of JS files which are already being loaded.
I have a main page twig file which has something like this:
{% javascripts '#BlogBlogBundle/Resources/public/js/vendor/*' output='js/combined.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Now this works fine if all the JS files are inside the vendor folder. But what if I have a JS file contact.js inside a folder called contact and I want that to be visible only on contact page. So, when I added such a code inside block body of contact page twig file
{% javascripts '#BlogBlogBundle/Resources/public/js/home/*' output='js/home_combined.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
the contact.js is coming before all other js files which are being loaded before the body ends.
In codeigniter, using the Carabiner library I could set up the default files which I want to load on all pages like jQuery. And if there are any specific file for a page, I can do that inside that particular controller.
Please let me know how I can do this inside Symfony also.
You can add a file to your assets like this:
{% javascripts
'#YourBundle/Resources/public/js/*'
'#AnotherBundle/Resources/public/js/some.js'
'#YourBundle/Resources/public/vendor/someother.js'
output="filename.js"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
In order to have pre-defined asset collections which you can then use as for example '#js_default' you can add these in your assetic.assets configuration as suggested in my answer here.
To add the contact.js after the main file js files you can do something like this.
{% block javascripts %}
{{- parent() -}}
{% javascripts "#AcmeBundle/Resources/public/js/contact.js" %}
<script type="text/javascript" src="{{ asset_url }}" ></script>
{% endjavascripts %}
{% endblock %}
I'm having problems with my child twig templates properly resolving their assets.
My assets lie in web/bundles/mlbp/images|js|css
In my parent twig template that all my other templates inherit from I have something like:
{% block javascripts %}
<script src="{{ asset('bundles/mlbp/js/jQuery.js') }}" type="text/javascript"></script>
{% endblock %}
When looking at source this resolves properly to /bundles/mlbp/js/jQuery.js
But in one of my child templates I'm doing something like this:
{% block javascripts %}
{{parent()}}
<script src="{{ asset('bundles/mlbp/js/tableSortInit.js') }}" type="text/javascript"></script>
{% endblock %}
This for some reason resolves to /js/tableSortInit.js which does not exist. I don't see why it would work in one but not the other so any help will be very appreciated
You should try checking any other templates that relate to that one, it may be coming from those especially if you do a lot of in template rendering etc.
I normally place my JS and CSS Assetic assets inside a DefaultBundle, but I suppose the best place to put them would be in the app/Resources/public/(js|css) folders.
Also, to reference assets we use:
{% javascripts filter="" output="js/core.js" debug=true
"#DefaultBundle/Resources/public/js/jquery-1.6.2.js" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
How do I go about referencing shared assets like jQuery and my CSS reset stylesheets in app/Resources/public/...?
You could also use this:
{% stylesheets '../app/Resources/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Yes it's a good choice to not put libraries inside a Bundle
see here : http://symfony.com/doc/current/cookbook/bundles/best_practices.html#vendors
A bundle should not embed third-party libraries written in JavaScript, CSS, or any other language.
What i suggest you, is to put you jquery and reset files under something like: app/Resources/public/js/jquery.min.js and to change your code with something like:
{% javascripts filter="" output="js/core.js" debug=true
"../app/Resources/public/js/jquery-1.6.2.js" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
I hope this will work for you.
EDIT: Edited answer to be like https://stackoverflow.com/a/9237004/505836, thanks David.
My solution is almost the same as David's, but using %kernel.root_dir% instead of hard-coding the app folder (although, I doubt many change this folder's name), e.g.:
{%- javascripts output='compiled/main.js'
'%kernel.root_dir%/Resources/public/js/jquery-1.10.2.min.js'
'%kernel.root_dir%/Resources/public/js/underscore-1.5.2.min.js'
'#MyOwnBundle/Resources/public/js/default.js'
-%}
<script src='{{ asset_url }}'></script>
{%- endjavascripts %}
If the third party libraries reference their own assets (e.g. typically images in a img sub-folder, referenced from .css files), it's usually sufficient to create the corresponding symlinks on the server, e.g. ln -s .../app/Resources/public/img .../web/img or something similar. Or use the cssrewrite filter, of course - but beware of its caveats.
(Also, note that I don't use the type="<mime-type>" attribute, as the files' content-type is supplied in the HTTP headers anyway.)
You can replace ../app/Resources/public/css/ by public/css/. The same for Javascript folder.
{% stylesheets filter='less' output='css/core' 'public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% javascripts "public/js/*" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
Here all the files of /web/public folder are automatically loaded.