When using the development server along with a view and template html file (which both seem to be formatted correctly), Django's server doesn't make the html from the template the source code to the web page like it should, but instead it seems to just render the template as if it were the thing that I wanted to show on the page. So it seems to create it's own html with my template file being the text that should be printed. For example, here is the view and template and resulting source code from the web page when run on the development server.
View:
def start(request, ampCode):
t = get_template('code_user.html')
c = Context({'user_code': ampCode})
html = t.render(c)
return HttpResponse(html)
Template:
{% extends "base_code_user.html" %}
{% block title %} This is the title {% endblock %}
{% block body %}
<b> {{user_code}} </b>
{% endblock %}
Other template that other one extends:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> {% block title %} {% endblock %} </title>
</head>
<body>
{% block body %} {% endblock %}
</body>
</html>
Resulting source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.35">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier; min-height: 14.0px}
span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<p class="p1"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.35">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier; min-height: 14.0px}
span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<p class="p1"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</p>
<p class="p1"><span class="Apple-converted-space"> </span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p class="p1"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p>
<p class="p1"><span class="Apple-converted-space"> </span><head></p>
<p class="p1"><span class="Apple-tab-span"> </span><title> This is the title </title></p>
<p class="p1"><span class="Apple-converted-space"> </span></head></p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-tab-span"> </span><body></p>
<p class="p1"><span class="Apple-tab-span"> </span><span class="Apple-tab-span"> </span></p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-tab-span"> </span><b> AAAAAA </b></p>
<p class="p2"><br></p>
<p class="p1"></p>
<p class="p1"><span class="Apple-tab-span"> </span></body></p>
<p class="p2"><br></p>
<p class="p1"></html></p>
</body>
</html>
Maybe I'm just not understanding what the template system does and it may be working correctly, but I was under the impression that whatever was in the template would become the resulting source code for the page. Any help on what might be causing this would be helpful. Thanks
Edit:
When I try your exact example in a django project it works for me (same view names, same template names). Output (assuming ampCode is 3):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> This is the title </title>
</head>
<body>
<b> 3 </b>
</body>
</html>
My guess is your problem is somewhere else and not to find in your code samples. Maybe you have problem in your URL conf pointing to a totally different view?
Previous answer:
In your view add themimetype to your HttpResponse:
return HttpResponse(html, mimetype='text/html')
If not it will interpret it as text/plain by default and therefore not render the html correctly.
If you want to keep things shorter when rendering templates you can simply use the response shortcuts. Have a look at Django shortcut functions.
Related
I have the following html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<html xmlns="http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="margin-left: 5%;">
<a name="pagetop"></a>
<a name="firstpage"></a>
<div>
<h3>Content to read I</h3>
<p>
Content to read II<br><br>
</p>
<img src="abc.svg" width="200" height="166" alt="">
<br><br>
<h4>Code:ABC</h4>
<!-- End Buttons -->
</div>
</body>
</html>
I want to read the content between the 2 tags < p > (without < br >) and < h3 >
Is there some standard available in lets say boost for achieving the same?
I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>
I'm using RichFaces 4.1 and I found out for my template as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="body">Default content</ui:insert>
</h:body>
</html>
It always add extra head info for me:
<link type="text/css" rel="stylesheet" href="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/DEFAULT/skinning.css" /><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/packed/packed.js"></script>
If I take out this portion from template, those extra info will be disappear:
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
With that extra info, the page renders better however if this page navigate to next page base on value return from form action (as defined in faces-config.xml), the component (e.g. a4j:commandButton ) will not work, need click twice to function.
Is that a bug? If you go to richfaces showcase and open the source, the meta info for head are diff. Any ideal why I get those extra meta info that seem buggy...
---- Some extra info ---
Hi Brendan
Thanks for the suggestion but not help...
[Template]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<ui:insert name="head"></ui:insert>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<title><ui:insert name="title">CEA</ui:insert></title>
</h:head>
<h:body>
<div id="page">
<div id="header">
<div class="right-controls">
<ul class="top-links layout">
<li>Project Site
</li>
</ul>
</div>
</div>
<div id="page-content">
<ui:include src="/templates/includes/navigation.xhtml" />
<ui:insert name="body">
Body content missed
</ui:insert>
<div class="clear"></div>
</div>
<div id="footer">
<ui:insert name="footer"></ui:insert>
</div>
</div>
</h:body>
</f:view>
</html>
[p.xhtml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/templates/template.xhtml">
<h:outputStylesheet>
.red {
color: red;
}
.green {
color: green;
}
</h:outputStylesheet>
<ui:define name="body">
<h:form>
<a4j:commandButton value="Store changes"
action="#{profileCreation.goNext}" />
</h:form>
</ui:define>
</ui:composition>
profileCreation.goNext only do one thing, return the success value:
public String goNext() {
return IdmConst.IDM_CREATE_PROFILES_SUCCESS;
}
[faces-config.xml]
<navigation-rule>
<display-name>p.jsf</display-name>
<from-view-id>/public/idm/p.xhtml</from-view-id>
<navigation-case>
<from-outcome>IDM_CREATE_PROFILES_SUCCESS</from-outcome>
<to-view-id>/jsf/idm/resetpwd.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
[resetpwd.xhtm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<style type="text/css">
.leftColumn {
width: 40%;
vertical-align: top;
text-align: left;
padding: 15px;
background: #00FFFF;
}
.rightColumn {
width: 60%;
vertical-align: top;
text-align: left;
padding: 15px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</ui:define>
<ui:define name="title">Change / Rest Password</ui:define>
<ui:define name="body">
<h:form id="resetPwdForm">
<rich:graphValidator value="#{passwordValidationBean}" id="gv">
<rich:panel header="Change password" style="width:500px">
<rich:messages for="gv"/>
<rich:messages globalOnly="true"/>
<h:panelGrid columns="3">
<h:outputText value="Enter new password:" />
<h:inputSecret value="#{passwordValidationBean.password}" id="pass" />
<rich:message for="pass" />
<h:outputText value="Confirm the new password:" />
<h:inputSecret value="#{passwordValidationBean.confirm}" id="conf" />
<rich:message for="conf" />
</h:panelGrid>
<a4j:commandButton value="Store changes"
action="#{passwordValidationBean.storeNewPassword}" />
</rich:panel>
</rich:graphValidator>
</h:form>
</ui:define>
</ui:composition>
</html>
[passwordValidationBean]
I use the sample from richfaces showcase (http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=graphValidator&skin=blueSky)
As you can see as defined in faces-config, after user click the button on p.xhtml it will go to resetpwd.xhtml, if I have .. defined in template, then the button on resetpwd.xhtml will not work properly, I need click twice then will process the request. Well, if I directly go to resetpwd.xhtml wthout go throgh p.xhtml, everything is working fine.
So I suspect the problem cause by the .. defined in template., with this xml element, page source willd isplay extra header info:
Must be some bug in richfaces state management or the extra meta info included in head. As mention if I directly go to resetpwd.xhtml, everything work fine (i.e. button on that page no need click twice to respond). If navigate from p.xhtml to resetpwd.xhtml will work fine if take out the ... from tempalte file, but if I do so then the page will not render with skin.
I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!
In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="title">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>
When I try to view the template I created the development server shows the template html file as if it were plain text. Basically the web page shows what is in my template .html file. I know something is working because when I pass the render_to_response function the dictionary of arguments and try to display the variable I passed I it renders that part correctly. Here is an example of the problem.
This is the template file:
<b>Hello</b>
Then the output source code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.35">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Courier}
</style>
</head>
<body>
<p class="p1"><b>Hello</b></p>
</body>
</html>
And the screen just shows:
<b>Hello</b>
Any ideas on how to make my template render as if it were an html file would be appreciated.
I don't know how you're outputting the html file into your template, but, if you're doing something like this in your template
{{ my_template }}
to render the my_template string variable that you're passing to render_to_response
you just need to use the safe filter
{{ my_template|safe }}
this won't html-encode your string, and the html will render propery into your page