{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block jsscript %}
<!-- Script code -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#btnNext_picklocation').attr('disabled','disabled');
$("#location input[type='checkbox']").click(function(){
if($('#location input[type="checkbox"]').is(':checked'))
{
$('#btnNext_picklocation').removeAttr('disabled');
}
else
{
$('#btnNext_picklocation').attr('disabled','disabled');
}
});
$("#location .maps img").attr("src","{% static 'media/loading.gif' %}");
$("#location .maps img").error(function(){
$(this).unbind("error").attr("src","{% static 'media/loading.gif' %}");
});
{% for obj in filter_location %}
var url{{obj.city}}="http://maps.googleapis.com/maps/api/staticmap?center={{obj.suite}},{{obj.street}},{{obj.city}}&size=400x200&maptype=roadmap&markers=size:mid|color:green|{{obj.suite}},{{obj.city}}&sensor=true";
$("#map{{obj.city}}").attr("src",encodeURI(url{{obj.city}}));
{% endfor %}
$('#btnNext').click(function(){
window.location.assign("./pickpaymentplan/");
});
});
</script>
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
{% endblock %}
{% block head %}
<h1 class="heading" >Place An Order</h1>
<h4 class="heading">Please choose a location</h4>
{% endblock %}
{% block content %}
<!-- Main Body Content -->
<form id="frmLocation" action="./" method="POST">{% csrf_token %}
<table border="0">
<tr>
<td>
<table border="1" id="location" >
<tr>
<th> </th>
<th>Locations</th>
<th>Map</th>
</tr>
{% if filter_location %}
{% for p in filter_location %}
<tr>
<td><input type="checkbox" id="{{p.location_id}}L" name="{{p.location_id}}L" ></td>
<td>{{p.suite}},{{p.street}},<br/>{{p.city}},{{p.state}},<br/>{{p.country}},{{p.zip}}</td>
<td class="maps" ><img id="map{{p.city}}" /></td>
</tr>
{% endfor %}
{% else %}
<tr></tr>
<tr><td colspan="5">No Locations!</td></tr>
{% endif %}
</table></td>
</tr>
<tr>
<td style="text-align:right"><input type="submit" id="btnNext_picklocation" name="btnNext_picklocation" class="btnNext" value="Next"/> </td>
</tr>
</table>
</form>
</div>
<div id="footer" name="footer">
</div>
{% endblock %}
I this code I have used a base.html file as a base template. Appropriate changes has been made to settings.py, like static_url, media_url. Still this page is not working as expected.
Can indentation be an issue?
Is there some extra steps to be followed for implementing css?
My first guess would be that you are overriding {% block jsscript %} in some descendant template. If that is not the case, then I would confirm that the output of {% static 'css/base.css' %} is actually giving you what you expect (can you visit that URL?)
Two other thoughts:
Spaces don't really matter in templates.
You should probably move your CSS into something like {% block stylesheets %} instead of {% block jsscript %}.
If you're overriding the template block, and want to maintain the block's original content, you can use {{block.super}} to output the original content, like this:
parent.html:
<html>
<head>
<title>{% block title %}MySite{% endblock %}</title>
<body>
{% block content %}{% endblock %}
</body>
</html>
child.html
{% extends 'parent.html' %}
{% block title %}Child Page - {{block.super}}{% endblock %}
{% block content %}Hello world!{% endblock%}
The titlefor a page rendered using child.html will be "Child Page - MySite"
The general steps to diagnose such issue in any framework are:
verify that the <link> tag is present in the generated page - use View Page Source in your browser or use HTML panel in Firebug*
verify that href attribute of the <link> tag looks ok-ish
Use Firebug's Net panel to see if your stylesheet is actually loaded
Enter the stylesheet's URL (as found in your generated page) directly in the browser's address bar to see if its actual contents is what you expect
If all of the above found no problems, use Firebug's CSS panel to see if there's another stylesheet which overrides your styles.
If you follow these steps, chances are high you'll be able to find the problem yourself, if not - you'll be able to ask a much more concrete question
* by "Firebug" I mean Firebug itself, Chrome Dev Tools or Opera Dragonfly, whatever suits your tastes.
Related
Newbie question I presume: How do I change some CSS property (// change background image of parent div) of the parent element from within the logic in the HTML template? Do I really need to implement JS for this?
<div class="exercise-items-wrapper">
{% if error %}
{{ error }}
{% else %}
{% for x in exercise %}
<div class="exercise-item">
{{x.name}}
{% if x.primary_focus == 'CO' %}
// change background image of parent div
{% endif %}
{% if x.friend_verified %}
<img src="{% static 'main/images/fv.svg' %}" height="14px">
{% endif %}
<p id="exercise-level" class="exercise-level">lv. VII</p>
{% if x.video_verified %}
<img src="{% static 'main/images/vv.svg' %}" height="14px">
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
If by parent div you're referring to the div with class exercise-item, then the way I've always done this is to simply also write the if-then template block within the class attribute:
<div class="exercise-item {% if x.primary_focus == 'CO' %}special-background-class{% endif %}">
And then define special-background-class in your CSS. Admittedly it doesn't look nice to read, but it works and it's much more maintainable than anything that has to use JS, unless your JS is already well-integrated into your Django app.
I have a template where the left column is used to display the top sell items.
here's a my master template code:
<html><body>
{% block menu %}
{% endblock menu %}
{% block columnleft %}
{% include 'TestBundle:Default:top_items.html.twig'%}
{% endblock columnleft %}
{% block body %}
{% endblock body %}
</body></html>
my top_items.html.twig code:
<table>
{% for entity in entities %}
<tr>
<td style="padding: 0px"><img src="{{entity.picture}}"
width="60px" height="60px" class="img-rounded"></td>
<td style="padding: 0px; vertical-align: middle">{{entity.name}}</td>
</tr>
{% endfor %}
Question:
Is there any chance to get 'entities' variable from a specific route(localhost/statistics/top_meals) that return an array as response?
I'm asking for this because I have many views, and passing the 'entities' variable using {%include 'TestBundle:Default:top_items.html.twig' with {'entities': array_var}%} need to be called in each view.
Thanks
You are way better of with render controller call:
<html><body>
{% block menu %}
{% endblock menu %}
{% block columnleft %}
{% render(controller('TestBundle:Default:topItems')) %}
{% endblock columnleft %}
{% block body %}
{% endblock body %}
</body></html>
and then create the controller:
/**
* #Template()
*/
public function topItems(){
// SOME LOGIC
return array(
'topItems' => $topItems
)
}
I can't understand some principles about layout composition in sf2.
I have this App/Namespace/MyBundle/Resources/views/layout.html.twig template:
{% extends '::base.html.twig' %}
{% block title %}Main Title{% block subtitle %}{% endblock %}{% endblock %}
{% block head %}<h1>Placeholdertitle</h1>{% endblock %}
{% block body %}{% endblock %}
{% block sidebar %}{% endblock %}
How should I make the head.html.twig to replace the head block?
Currently I have this App/Bundle/Resources/views/head.html.twig template:
{% extends 'AppNamespaceMyBundle::layout.html.twig' %}
{% block head -%}
<h1>
Main Title
</h1>
{% endblock %}
Then I load a page with this index.html.twig:
{% extends 'AppNamespaceMyBundle::layout.html.twig' %}
{% block subtitle %} | Categories{% endblock %}
{% block body -%}
<h1>Categories list</h1>
<table class="records_list">
<thead>
<tr>
<th>Id</th>
<th>Text</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr>
<td>{{ entity.id }}</td>
<td>{{ entity.text }}</td>
<td>
<ul>
<li>
show
</li>
<li>
edit
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<ul>
<li>
<a href="{{ path('category_new') }}">
Create a new entry
</a>
</li>
</ul>
{% endblock %}
And here I get the "Placeholdertitle" instead of the "Main Title", meaning that the head.html.twig isn't used. How am I supposed to use that head.html.twig to be in the layout.html.twig?
From what you are explaining, I guess that you want to render Layout + Head inside your Index.
You can use the following schema:
Layout <extended by> Head <extended by> Index. This way, when you will render Index, Twig will render both Head and Layout.
Another solution is to use the use.
PS: You cannot extends both head and layout in the same index file, as Twig says: Template inheritance is one of the most powerful Twig's feature but it is limited to single inheritance;
Did you try to remove the "-" in your head block in head.html.twig ?
Is it possible to override a template block from a twig extension? How do I do it?
Edit:
I have a block in my master layout template, it is called {% block emailMenu %}, the question is, is it possible to override this block, not from another template but from inside a twig custom function?
I guess I'm confused as the best way to handle my situation, my email menu will change from page to page depending on several factors, and I thought of making a twig function to be called from the layout or from another template, the reason I am thinking along these lines is to keep my other templates free from a lot of logic, logic that I'd rather have with pure PHP. Any thoughts would be appreciated.
You can just render additional controller (not a twig extension) which renders own template (possibly dependent on the page), which overrides base template block.
I think, overriding block from twig extensions - it is not the twig purposed for.
You must create a base template:
{# src/BW/MainBundle/Resources/views/Main/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
And then extends parent template with extends keyword:
{# src/Acme/BlogBundle/Resources/views/Blog/index.html.twig #}
{% extends 'BWMainBundle:Main:base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Also read this docs about templating in Symfony using Twig.
My problem:
I have 3 templates:
main.html.twig (main layout file)
layout.html.twig (a bundle specific layout override which contains some bundle specific JS tags)
create.html.twig (a page specific template file which also contains some page specific JS tags)
I am defining a block called 'javascript' in my base layout (main.html.twig), then overriding it (but calling {{ parent() }} in layout.html.twig. This works fine, and the JS tags from the main template file are still included above those in the layout.html.twig template.
I then do the same in the create.html.twig file, overriding the block as follows:
{% block javascripts %}
{{ parent() }}
{% javascripts '#BundleName/Resources/public/js/application.album.uploader.js'
'#BundleName/Resources/public/js/jquery.uploadify.js'
'#BundleName/Resources/public/js/swfuploadify.js' filter='?yui_js' %}
<script src='{{ asset_url }}' type='text/javascript'></script>
{% endjavascripts %}
{% endblock %}
At this point, instead of just overriding the javascript block in the parent (layout.html.twig) and including all the scripts defined in the templates above it, it does the following:
Dumps the <script> tags in the middle of the output (which causes an error, because in my main.html.twig file I am only including the jQuery library at the end of the HTML markup
Then it also dumps the scripts out along with the rest of the others (as I would expect it to)
I am not sure what is causing the scripts to be dumped in the middle of the create.html.twig template, and I'm also confused as to why they're being dumped to the screen twice (once in the middle of the create and then once at the bottom along with all the rest of my scripts from main.html.twig and layout.html.twig.
Has anyone got any ideas? Let me know if anything is unclear or if I can provide some more information.
EDIT:
File contents are below...
main.html.twig: https://gist.github.com/7f29353eaca0947528ce
layout.html.twig: https://gist.github.com/734947e9118b7765715e
create.html.twig: https://gist.github.com/c60c8d5c61e00ff86912
EDIT 2:
I've been having another look at the issue this morning and it looks as though its doing the same thing for stylesheets. I tried to define a new block called pagescripts in my layout.html.twig and then use the block in my create.html.twig but this had the same outcome, it just seems to dump the scripts and stylesheets wherever I use the
{% block pagescripts %}
(scripts here)
{% endblock}
I found the issue. In create.html.twig I was defining my {% block javascripts %} content inside inside my {% block content %}, so I assume Twig was rendering the output of the javascripts block inside the content block.
Moving the {% block javascripts %} content outside of the {% block content %} block fixed the issue.
Here is an example of main.html.twig:
<body>
{% block stylesheets %}
{% endblock %}
{% block jsscript %}
{% endblock %}
{% block content %}
{% endblock %}
</body>
into your create.html.twig
{% extends '::base.html.twig' %}
{% block jsscript %}
my javascript files...
{% endblock %}
{% block content %}
<h1>Create</h1>
<form action="{{ path('entity_create') }}" method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<p>
<button type="submit">Create</button>
</p>
</form>
{% endblock %}
If you still have issue, you can add a document ready function :
$(document).ready(function() {
// put all your jQuery goodness in here.
});