Please help.I have a problem with implementation of orgcharts in Symfony 2.8 project. When I put example code to the twig file the result page draws additional lines not associated with the hierarchy.
Print screen below :
{% extends 'base.html.twig' %}
{% block title %}Example{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/href/css/home.css') }}"/>
{{ parent() }}
{% endblock %}
{% block body %}
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', ''],
['Carol', 'Bob', '']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true});
}
</script>
<div id="chart_div"></div>
{% endblock %}
Do anyone implemented orgcharts in twig before? Please help.
Related
I'm trying to embed a Phaser game into a Django application, but struggling with the most basic of operations to get started: Making sure the canvas is placed inside a particular div as to center it on the middle of the page.
From what I could gather, for this to work, I should simply specify the parent div. However, whenever I specify the parent div, the canvas is nowhere to be found. When I leave out the line again, it reappears, but outside the layout.
{% extends "app/layout.html" %}
{% block content %}
<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>
<div id='phaser-canvas'></div>
{% endblock %}
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-canvas',
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
}
function create() {
}
function update() {
}
</script>
What am I not understanding?
Your html file extends your app/layouts.html. That layouts.html has a content block in which the content of your content block gets inserted. But as all the rest of your code is not within that block, it does not get inserted to layouts.html.
Create more blocks in your layouts.html like one for styles, one for javascript etc. Then put your code also in these blocks. Because only what's inside those blocks gets transferred to the template which is to extend.
layout.html:
{% block styles %}
{% endblock %}
{% block content %}
{% endblock %}
{% block javascript %}
{% endblock %}
your template:
{% extends "app/layout.html" %}
{% block content %}
<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>
<div id='phaser-canvas'></div>
{% endblock %}
{% block javascript %}
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-canvas',
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
}
function create() {
}
function update() {
}
</script>
{% endblock %}
userlist.html
<a id="{{user.id}}" href="/followerPosting?id={{following.id}}" class="btn">profile</a>
I want to pass the id value to the url when the btn is clicked.
followerPosting.html
<script type="text/javascript">
var url = require('url');
var queryData = url.parse(request.url, true).query;
var fid = queryData.id;
</script>
So I parsed the URL and stored the id value in a variable (fid).
{% for twit in twits %}
{% if twit.User.id == fid %}
<div class="twit">
<div class="twit-content">{{twit.content}}</div>
</div>
{% endif %}
{% endfor %}
I want to use this variable in html (django)
how can I use this value?
I tried to use Ejs but it didn't work well...
#Flask Code
from flask import Flask, render_template
app = Flask(__name__)
posts = [
{
'author': 'User',
'title': 'Test',
'content': 'First post',
'date_posted': '2021, 4 ,13',
},
{
'author': 'User2',
'title': 'Flask is cool',
'content': 'Flask testing',
'date_posted': '2021, 4 ,14'
}
]
#app.route('/')
#app.route('/home')
def hello():
return render_template('home.html', posts=posts)
#ignore this
#app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)
#HTML Code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
{% for post in posts %}
<p>By {{ posts.author }} on {{ posts.date_posted }}</p>
<p>By {{ post.content }}</p>
{% endfor %}
</body>
</html>
the for loop is executing but the values in the dict. are not displaying, I am very new in flask
so I'm pretty sure I have to add in some extra code..? Any help is appreciated :D
Use your loop variable post inside your for loop instead of posts.
{% for post in posts %}
<p>By {{ post.author }} on {{ post.date_posted }}</p>
<p>By {{ post.content }}</p>
{% endfor %}
Data isn't showing on page template using ACF Post Object and calling it with Timber.
Tried to add the data to index.php and the news.php template.
ACF Post Object Field Name:
news_author_data
news.php
$post = new TimberPost();
$context['post'] = $post;
$context['news_author'] = new
TimberPost(get_field('news_author_data'));
Timber::render('core/news.twig', $context);
news.twig
{% for news in news_author %}
test
{% endfor %}
No error message. Just no data.
You're going about it the wrong way, support for ACF is baked into Timber, as per the docs here:
[https://timber.github.io/docs/guides/acf-cookbook/]
Assuming this is a repeater field all you need to do is add this to your news.twig file
<div class="my-list">
{% for item in post.meta('news_author_data') %}
<div class="item">
<h4>{{ item.my_repeater_field }}</h4>
<h6>{{ item.my_repeater_field }}</h6>
<img src="{{ Image(item.picture).src }}" />
</div>
{% endfor %}
</div>
If get_field('news_author_data') returns an array of post objects you can't put the collection directly into the "new TimberPost" constructor. You have to loop through them like so:
$post = new TimberPost();
$context['post'] = $post;
$context['news_author'] = array_map(function($post) {
return new TimberPost($post);
}, get_field('news_author_data'));
Timber::render('core/news.twig', $context);
Hope this helps.
I have a js object like this:
var data = [
{ src: "src1", name: "name 1" },
{ src: "src2", name: "name 2" },
{ src: "src3", name: "name 3" }
]
I am looping through it with Nunjucks:
{% for object in data %}
{{object.src}}
{% endfor %}
But I want to limit the number of iterations to 2.
How do I do that with Nunjucks?
I know there is a range option but I couldn't find how to use it in this case.
You could accomplish this a couple different ways:
A) Use loop.index0 special variable (Demo in Codepen)
Inside a for loop, you can use loop.index0 instead limit-var
{% for obj in data %}
{% if loop.index0 < 2 %}
{{obj.src}}: {{obj.name}}
{% endif %}
{% endfor %}
B) Add Custom Filter (Demo in Codepen)
But more readable is add custom filter limit and use it
var nunjucks = require('nunjucks');
var env = nunjucks.configure();
var data = [
{src: "src1", name: "name 1"},
{src: "src2", name: "name 2"},
{src: "src3", name: "name 3"}
];
env.addFilter('limit', function(arr, limit) {
return arr.slice(0, limit);
});
var res = nunjucks.renderString(`
{% for obj in data | limit(2) %}
{{obj.src}}: {{obj.name}}
{% endfor %}`,
{data}
);
console.log(res);
C) Use native slice() function (Demo in Codepen)
{% for obj in data.slice(0, 2) %}
{{obj.src}}: {{obj.name}}
{% endfor %}