Symfony2 - Sonata Admin - add javascript before field - javascript

In admin class:
protected function configureFormFields(FormMapper $formMapper) {
$formMapper
->add('name', 'text')
->add('description', 'text')
;
}
I don't know how I can before "name" add javascript, can you help me?

Working for me:
In admin class src\PP\TestBundle\TestAdmin.php
public function configure() {
$this->setTemplate('edit', 'PPTestBundle:CRUD:edit_javascript.html.twig');
}
In src\PP\TestBundle\Resources\views\edit_javascript.html.twig
{% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/pptest/admin/js/myscripts.js') }}" type="text/javascript"></script>
{% endblock %}
When you do all this stuff and you have upload myscripts.js you should send this in command line:
app/console assets:install web
(possible that I forgot something)
Sorry for my bad English :<>

EDITED
1º You need to create a custom TWIG template for it (where you could place your javascript code just before the widget code).
2º Then you write inside ap/config/config.yml where your custom template is to allow Symfony and SonataAdmin to recognize it.
1º You have some info here Sonata Admin - Custom template
2º More info here customize field types
An example could be something like this:
Admin class
protected function configureFormFields(FormMapper $formMapper) {
$formMapper
->add('name', 'ajax_autocomplete')
->add('description', 'text')
;
}
And, in the TWIG template you need to extend from the Sonata Admin field template that better fits your necessities. In this case maybe base_edit.html.twig or edit_text.html.twig
You have a list of templates to extend from, inside this Sonata Admin dir: vendor\sonata-project\admin-bundle\Sonata\AdminBundle\Resources\views\CRUD
Customization
Imagine you have placed your custom template inside XXXBundle:YYY:ajax_autocomplete.html.twig
I think it should work if you write a line here:
sonata_doctrine_orm_admin:
templates:
types:
list:
ajax_autocomplete: XXXBundle:YYY:ajax_autocomplete.html.twig

Starting from sonata admin 3.x you can add/remove js/css to/from the page without extending it.
sonata_admin:
....
assets:
# javascript paths to add to the page in addition to the list above
extra_javascripts:
- 'your js file path'
# javascript paths to remove from the page
remove_javascripts:
- 'your js file path'
you can find more information here https://github.com/sonata-project/SonataAdminBundle/pull/4836/files?short_path=e252be0#diff-e252be027e26148c11d971dc969f4be0

Related

How to translate strings in javascript written in script tags of html in django?

Hi I am translating a website in hungarian, I have problems with alerts and confirm strings that i have in my templates. I am using gettext('') but these strings are not appearing in po files
my urls.py
urlpatterns = patterns('',
url(r'^jsi18n/$', javascript_catalog, js_info_dict, name='javascript-catalog'),
I have created po file django.po by running makemessages it has all the strings marked as trans in templates and also strings from *.py files.
then
I have run following command
django-admin.py makemessages -d djangojs -l hu_HU
its creating djangojs.po.
The strings appearing in this file are all from *.js files in my static folder.
But how do i have my strings used in alerts and confirms that are written in my templates.
here are snippets from my templates.
<script>
if($('#id_action').val()=='DEL'){
if(confirm(gettext('Are you sure you want to delete selected author(s) ?'))){
flag_action=true;
}
}
</script>
In my template i also have something like this which is not appearing in po files either.
<li>
<a onclick="if(confirm(gettext('Are you sure you want to delete the selected author?'))){filter_content({{auth.id}},'DEL');return false;}" href="javascript:void(0)">
{% trans 'Delete' %}
</a>
</li>
The string in gettext is not appearing in any po.
I have included the following in my templates
<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
Use this
var alert_var = {% blocktrans %}"Are you sure you want to delete selected author(s) ?" {% endblocktrans %};
<!-- begin snippet: js hide: false console: true babel: false -->
then use this variable where ever you need
As Arhot said {% blocktrans %}"Text..."{% endblocktrans %} works perfectly.
If you use this inside the <script> tags in the html file, the words ids will be generated in the file .po corresponding to html traslations and not javascript traslations. I mean you will find the new words in the file django.po and not inside the djangojs.po.

How to include properly Javascript using a Javascript Twig Template

I know how to access my assets, but i wanted to create a template working with Javascript and Twig, which would allow me to use Twig variables in my script.
For example, I have a template called 'details.html.twig', which extends a 'layout.html.twig':
{% extends '#AcmeBundle/Front/layout.html.twig %}
{# SOME CODE AND CONTENT #}
{% block page_script %}
{{ parent() }}
<script>
{# Part of my script #}
</script>
{% endblock page_script %}
All of this worked perfectly, but to be able to reuse some js code (using twig variables), I cut some part of my script and put I in an external template, called 'viewer.html.twig'. To be able to use it in my 'details.html.twig', I used:
{% include '#AcmeBundle/Front/Model/viewer.html.twig' %}
I put this line right after the {{ parent() }} one and before the <script> tag.
However, my script which used to work when directly written in 'details' template seems to be quite ignored right now.
If any of you could have a clue of what makes my template being included but skipped, or a way to include the template easier or properly, I'm open to all kind of observations.
G'day,
Jérémy
If you code a file containing only javascript you should name your file:
{% include '#AcmeBundle/Front/Model/viewer.js.twig' %}
Then Twig (as of 1.17) automatically defines its escaping strategy based on the extension.
See the twig docs and an example of js twig file in symfony.

How to render a component with dynamic content in a page using an npm-based static site generator?

The goal is to render a component with dynamic content in a page using an npm-based static site generator:
I can't seem to find a solution to this in in Harp, Brunch or Metalsmith. I have been playing with each of these and it feels like I am going about this the wrong way.
The structure will be something like:
/pages
|_ home.??
|_ about.??
/partial
|_ header.??
|_ body.??
|_ portfolio-item.??
/data
/home
partial-1.??
partial-2.??
partial-3.??
partial-4.??
Now I need home to include each partial with the data passed to the partial.
//home.??
include header with partial-1
include body with partial-2
include portfolio-item with partial-3
include portfolio-item with partial-4
And each partial needs markup:
//portfolio-item.??
<p>
{{project-description}}
</p>
And each data item needs to have the relating id for data:
//sort of like json
{
project-description: whatever i need
}
Why do this? I want to:
Separate markup from data
Have files act like a CMS
Speed up development as I am not copying partials around if I am reusing them. (For example, harp supports unique values for files but not reusing files with unique values)
Any tips will be great! I think jade or Ejs might be solutions, but the data might have to be manipulated by some custom code. This, however, feels like someone has done this before.
After #MikeC pointed me in the direction of Jekyll I went ahead and explored it.
By using the documentation I came up with the following solution to the problem:
The standard Jekyll structure is was used.
We must make the builder partial that will add components from data files
{% assign page_data = site.data.[page.context] %}
{% assign counter = 0 %}
{% for partial_name in page_data.partials %}
{% assign counter = counter | plus:1 %}
{% include {{ partial_name }}.html %}
{% endfor %}
In about.md add the following
---
layout: page
title: About
context: about
permalink: /about/
---
{% include builder.html %}
Then add a partial that you would like to test on like _includes/hello-text.html.
{% capture data_file %}{{ page.context }}-{{ counter }}{% endcapture %}
{% assign context = site.data.[data_file] %}
<p>
{{ context.content }}
</p>
Finally add your data files _data/about.json
{
"partials": ["foobar", "foobar", "foobar"],
}
and _data/about-1.json
{
"content": "helloworld"
}
You can add about-2.json for the second partial and so on. I would still appreciate any improvements on this issue if anyone has any suggestions you can check out the repo on github to bash it out.

How to load a custom JS file in Django admin home?

I have a heavily customized Django admin where it's very simple to load a custom JS file for each of my ModelAdmins:
class MyModelAdmin(admin.ModelAdmin):
class Media:
js = ('js/admin/mymodel.js',)
But how do I do this for the admin "homepage," where all my admin models are listed?
Update #1: amending my question, since the solutions below aren't that useful if I cannot efficiently include Django's jQuery. So, how do I include Django's jQuery in the JS file? If I wrap my code with (as I do in my other ModelAdmin JS files):
(function ($) {
// my code here...
})(django.jQuery);
I get the following error:
ReferenceError: django is not defined.
Thanks.
Update #2: I was able to include Django's jQuery successfully by following this answer: https://stackoverflow.com/a/10584539/585783
You can override templates/admin/index.html and add the JavaScript in the block extrahead:
{% extends "admin/index.html" %}
{% block extrahead %}
{{ block.super }}
# add a <script> tag here with your JavaScript
{% endblock %}

Is there any way to load, minimize and combine different javascript files for different templates in Django?

Now, I put some common javascript files in PIPELINE_JS settings. But I also want to load more specific js files based on each individual template. I know I can simply add a script tag to include corresponding js files in each template, but that would add additional request to server, which is not a good idea I think. The ideal way I want to do is to use PIPELINE to load, minimize and combine different js files based on different templates. Is there any way to do this?
Yes, It is very simple:
PIPELINE_JS = {
'stats': {
'source_filenames': (
'js/jquery.js',
'js/application.js',
),
'output_filename': 'js/stats.js',
},
'logged_in': {
'source_filenames': (
'js/jquery.js',
'js/collections/*.js',
'js/application.js',
),
'output_filename': 'js/logged_in.js',
},
#and so on..
}
and while including in the template,
{% load compressed %}
{% compressed_js 'stats' %}
In another template where you wish to import the other target,
{% load compressed %}
{% compressed_js 'logged_in' %} {# or whichever you wish to import #}
Read the documentation for better understanding.

Categories

Resources