JMSTwigJsBundle doesn't compile - javascript

In a search to optimize the possibility of my application made with symfony2, I choose the JMSTwigJsBundle to allow the usage of twig template both frontend or backend.
I use composer to install bundles and symfony (it is the 2.7.3 version)
I began to follow a tutorial who bring me to add both FOSJsRoutingBundle and JMSTwigJsBundle. The first one, installed first, work perfectly, but the second brought me different kinds of problem, beginning with "Uncaught ReferenceError: goog is not defined". I resolved it by adding the following content :
these two lines on app/autoloader.php as described in the official documentation ( http://jmsyst.com/bundles/JMSTwigJsBundle ):
$loader->add('JMS', __DIR__.'/../vendor/jms/twig-js-bundle');
$loader->add('TwigJs', __DIR__.'/../vendor/jms/twig-js/src');
The app/AppKernel.php is set with the following line :
new JMS\TwigJsBundle\JMSTwigJsBundle(),
I also add to my app/config.yml these lines :
Filters:
twig_js:
resource: "%kernel.root_dir%/../vendor/jms/twig-js-bundle/JMS/TwigJsbundle/Resources/config/services.xml"
apply_to: "\.twig$"
So, we can found inside my layout.html.twig the following lines
{% javascripts
'js/fos_js_routes.js'
'%kernel.root_dir%/../vendor/jms/twig-js/twig.js
'#NameSpaceNameBundle/Resources/views/customFolder/example.html.twig'%}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
And, thank to the filters on the config file, we don't need to add the filter line.
These modifications are from : https://github.com/schmittjoh/JMSTwigJsBundle/pull/13 post 3
I also do modifications presentend here : https://github.com/schmittjoh/twig.js/issues/35 post 2 :
I found a way to fix this issue by copyng the file
/Symfony/vendor/bundles/JMS/TwigJsBundle/Resources/config/services.xml
to
/Symfony/vendor/bundles/Symfony/Bundle/AsseticBundle/Resources/config/filters/twig_js.xml
and changing the service id from twig_js.assetic_filter to
assetic.filter.twig_js.
Every of theses modifications bring me to a new error :
Uncaught SyntaxError: Unexpected token %
on the created file "exemple.html.twig.js:1". For information, the twig file looks like :
{% twig_js name="example" %}
the html code
And the content generated on the new file is... exactly the same content than the twig's file.
So, please, what did I have to do to make it work ? Thank's

To make it work to and have a compiled version of any .twig, I had to include the "YUIcompressor" to the app/config/config.yml :
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_js
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
and add the appropriate file to the associate path.
Then I add to the layout.html.twig
{% javascripts filter='?yui_js'
'js/fos_js_routes.js'
'%kernel.root_dir%/../vendor/jms/twig-js/twig.js
'#NameSpaceNameBundle/Resources/views/customFolder/example.html.twig'%}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Finally I use the app/console assets:install and app/console assetic:dump to check if they're is nothing wrong, refreshed and it was ok (at least for me).

Related

How to include a javascript from /js/ in jekyll

I've added the cookie consent code from here
It has
<script>
...
if(readCookie('cookie-notice-dismissed')=='true') {
{% include ga.js %}
{% include chatbutton.js %}
}
...
</script>
in the html. This is placed within _includes but I can't figure out how to include javascript like /js/foo.js, located in another directory. I believe this is bundled with bundler within the jekyll assets.
Up to now, I've added javascript on my layouts in the following way, but haven't used {% include %} for this yet and I don't know how to let the _includes/cookie_consent.html know ẁhere to find it.
<script src="/js/foo.js"></script>
<script>
$(function(){
new Foo(".js-foo");
});
</script>
I can see two options to solve this
you create a file in _includes that contains the links to the extra JS you want.
For example:
# /_includes/bar.html
<script src="/js/foo.js"><\/script>
Inside _cookie_consent.html you can then add{% include bar.html %}
You add the link directly to your body.
if(readCookie('cookie-notice-dismissed')=='true') {
const js = '<script src="/js/foo.js"></script>'
document.body.appendChild(js)
}

Manage static link in js libraries within django

So I was trying to add an audio recording function to my website developed with django.
I wanted to do something similar as https://github.com/addpipe/simple-web-audio-recorder-demo so I started by trying to run it without modification.
I took the same html as in the git linked above, put the js/ folder in my static/ folder, and simply changed the following lines (index.html, line 32-33)
<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>
for
{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>
These js files load correctly, but the problem is that when I click record on my website, I get a "GET /myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1" 404 error in my django server.
WebAudioRecorderWav.min.js is called within WebAudioRecorder.min.js. I tried to use the {% load static %} trick in the js file, but it doesn’t work.
What would be the correct way to work around this?
Thanks in advance.
You should use the workerDir setting to set the correct path to the other imported js files. Probably your recorder is initialised in app.js, where you cannot use template tags like {% static %}. The best way is to create a global variable in your template before loading app.js:
In your HTML template:
<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>
In your app.js:
if (typeof jsFilesPath !== "undefined") {
audioRecorder = new WebAudioRecorder(sourceNode, {
workerDir: jsFilesPath // must end with slash
});
}

Assetic and generating new filename every change

Hi i am using assetic in symfony 3. But i have problem my assets are defined like this:
{% stylesheets filter='cssrewrite' filter='?uglifycss'
'assets/font-awesome-4.6.3/css/font-awesome.min.css'
'assets/bootstrap-3.3.7/css/bootstrap.min.css'
...
%}
In console run php bin/console assetic:watch
After change in css or js it will generate new file but with same name for example ce9c2ef.css.
But it is problem because after deploy, css file has changes content but no filename so all people see old css...
Q: How i can change generated file name every change in css?
There is options 'output='path/filename.js' in {% stylesheets %} but there i can't add <?php echo $var; ?> or {{ var }}...
UPDATE:
assetic config:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
uglifyjs2:
bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
uglifycss:
bin: "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"
templating config:
templating:
engines: ['twig']
EDIT:
So i found solution PARTIAL solution:
To config add:
assetic:
workers:
cache_busting: ~
and after that, your file will looks like ce9c2ef-d1e35a0_filename.css in develop and ce9c2ef-d1e35a0.css in prod...
but in deploy you must clear cache first so you have 2 hashes first ce9c2ef still the same (I do not understand the point of existence) and second d1e35a0 is changing so it finally resolving problem with browser cache....
But if you make changes in css, assetic:watch compile it, but page loads old files...!
Worst bundle ever i mean that changing filename is basic thing and on the internet is so many ways how resolve it and i was tryed one after another 1 day until i finally succeed...
When you're using assetic, one way to solve your issue is by giving your assets a version in your framework:templating section of app/config.yml:
assets:
version: "%application_version%"
Then you can specify your version in your parameters.yml/parameters.yml.dist file:
parameters:
application_version: 1.0.1
Then you can load your stylesheets or javascript like so:
{% stylesheets output='css/sites.css' filter='cssrewrite'
'assets/font-awesome-4.6.3/css/font-awesome.min.css'
'assets/bootstrap-3.3.7/css/bootstrap.min.css'
...
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}
Now when you dump your assets, it will automatically append ?1.0.1 (or whatever version you are on" to the end of them. For example, in production you would see the following:
<link href="/css/site.css?1.0.1" type="text/css" rel="stylesheet" media="all" />
Note that there are different ways of doing naming strategies, and this can get tricky if you forget to update your assets version every time you make changes to your assets, but there are ways to improve upon that strategy. This should get you up and running though.
If you notice I didn't manually specify the uglify* filters - you can have these automatically applied by putting this in your app/config_prod.yml:
assetic:
filters:
uglifycss:
apply_to: "\.css$"
uglifyjs2:
apply_to: "\.js$"

Call JavaScript function from Twig

I'm working on a Symfony2 project and I want to call a JavaScript function and pass an array of JSON objects (which I get from a controller) from a Twig.
But a first, very simple test already failed, like:
main.js:
function helloWorld(name) {
console.log("hello " + name);
}
linked to main.js in the twig and called the function:
<body>
<script>helloWorld("world!")</script>
{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
which results in a ReferenceError:
"Uncaught ReferenceError: helloWorld is not defined"
What do I have to do differently to make this work?
EDIT: Thanks to the two who took the time to answer. The described twig actually consists of a bunch of nested twigs and the placement of the javascript include was based on the Symfony documentation, guess that's why I didn't see the obvious. Should have detected the problem myself when phrasing the question though....
Invert the order of the functions:
<body>
{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
<script>helloWorld("world!")</script>
</body>
The script with the definition of the helloWorld definition is put after the function is executed. This means JavaScript doesn't yet know the function and triggers this error.
Solution: Put your javascript below your imports (before </body>, in the javascripts block for instance) or put the imports before the page javascript (in the head for instance).

django tinymce javascript not loading on non-admin pages

Im trying to implement TinyMCE on Django, i have successfully implement it on admin page using settings like this :
admin.py:
class TinyMCEAdmin(admin.ModelAdmin):
class Media:
js = ('/media/js/tiny_mce/tiny_mce.js', '/media/js/tiny_mce/textareas.js',)
settings.py :
TINYMCE_JS_ROOT = '/media/js/tiny_mce/'
TINYMCE_JS_URL = '/media/js/tiny_mce/tiny_mce.js'
then when i try to implement it on my form(non-admin) :
forms.py:
from tinymce.widgets import TinyMCE
class Foo(forms.Form):
title = forms.CharField(max_length = 100)
content = forms.CharField(widget = TinyMCE())
When i see the result, it just showing plain html textarea, then i hit "F12" on Chrome, then it says : 'Uncaught reference error: tinyMCE is not defined'.
How do i fix that error? thx guys
Looking at the documentation, if you are using TinyMCE in your form outside of the admin, you need to tell it to include the JS/CSS required to render TinyMCE manually. So in your base template (or somewhere similar) you need to add:
<head>
...
{{ form.media }}
</head>
or you could simply manually load the js:
<head>
<script src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
<script src="{{ MEDIA_URL }}js/tiny_mce/textareas.js"></script>
</head>
but the former is probably easier
Looks like the file tiny_mce.js has not been loaded in this case.

Categories

Resources