I'm trying to generate a comment on a single line at the end of an HTML file:
<!-- generated by SERVER1 -->
I have tried
/
generated by #{#server_name}
But this outputs it over 3 lines -
<!--
generated by SERVER1
-->
I've tried
/ generated by #{#server_name}
But that doesn't evaluate the #server_name var -
<!-- generated by #{#server_name} -->
Any ideas?
Just as you can drop back to raw HTML output when you want, so you can drop in raw HTML comments, even with interpolation.
This template:
- #foo = 42
#test1
/
Hello #{#foo}
#test2
<!-- Hello #{#foo} -->
Produces this output:
<div id='test1'>
<!--
Hello 42
-->
</div>
<div id='test2'>
<!-- Hello 42 -->
</div>
Tested with Haml v3.1.4 (Separated Sally)
It's still an open issue: github.com/haml/haml/issues/313. I think you're stuck with the multiline comment for now, even though nex3 says single line interpolation should work.
Related
I have 2 HTML files, suppose one.html and two.html. In one.html I want to include two.html.
In JSF I can do it like that:
It means that inside one.xhtml file, I can include two.xhtml.
How can we do it in *.html file? in thymeleaf
you can do it easily. could you share your header.html file?
or, let me show a bit like I do for my projects
in header.html put in side the <body> a code:
<div th:fragment="client_header">
<p>This is for client</p>
</div>
<div th:fragment="admin_header">
<p>This is for admin</p>
</div>
and let's say you want to add client_header into the index.html. Do follow these in your index.html page (inside <body>)
<div th:replace="includes/header :: client_header">
</div>
note: includes/header before :: refers the html path (excludes .html) and client_header after :: refers the part in header.html you want to insert.
I hope you understand everything that I have explain here.
In one.html you can include two.html by following this steps:
Place both pages under the resources folder, something like /resources/one.html, /resources/two.html
Include two.html in one.html by adding this line in one.html:
<div th:insert="two :: two"></div>
Include this bit of code in two.html just after the <body> tag:
<div th:fragment="two">
This should include the bit of code surrended by the <div th:fragment="two">into one.html
More info in the thymeleaf documentation
I'm searching for a solution for a simple Split Testing (without statistics).
Basically for each request I want a different image to be rendered.
<div class="hero-panel">
<img src="test1.png" alt="img" />
<!-- or -->
<img src="test2.png" alt="img" />
<!-- or -->
<img src="test3.png" alt="img" />
</div>
Per request, one of the 3 images. Has anyone a good solution for this ?
you can select a random image between these three by
<img src= "<%=['test1.png', 'test2.png', 'test3.png'].sample%>" alt="img" />
Is there a way in Grails GSP to replace the following
<tmpl:/templates/header />
<!-- tmpl namespace call is equivalent to <g:render template="/templates/header" /> -->
<!-- definition of inner content -->
<tmpl:/templates/footer />
With an outer template? Essentially, a way to import the wrapping outer template,
<outertemplate:templatename>
<!-- header will be rendered from outer template -->
<!-- definition of inner content -->
<!-- footer will be rendered from outer template -->
</outertemplate:templatename>
and the definition of the outer template being something along the lines of
<!-- definition of header content -->
<!-- placeholder or attr for inner content -->
<!-- definition of footer content -->
Encapsulating the wrapping content in a single template versus two. IIRC there was a way to do this under JSF but I can't find an equivalent under GSP.
Ok so what I was looking for was Grails' SiteMesh layout support, which allows me to define commonly used view markup in a more eloquent manner then templates.
So the header and footer content can be placed inside a layout
<html>
<head>
<title><g:layoutTitle/></title>
<g:layoutHead />
</head>
<body>
<!-- HEADER CONTENT DEFINED HERE (or for stuff in head in the head above -->
<g:layoutBody />
<!-- FOOTER CONTENT DEFINED HERE -->
</body>
</html>
And then use the layout,
<html>
<head>
<title>An Example Page</title>
<meta name="layout" content="main" />
</head>
<body>This is my content!</body>
</html>
Which I think is much cleaner then header and footer templates.
You can also nest layouts.
You can create something like this using a tag library.
class SimpleTagLib {
def emoticon = { attrs, body ->
out << body() << (attrs.happy == 'true' ? " :-)" : " :-(")
}
}
This defines a tag emoticon that can be used in gsp like this:
<g:emoticon happy="true">Hi John</g:emoticon>
body() is used to render the tag body content.
(The example is copied from the offical grails documentation)
I know the first part of a URL, but need to define the last part uniquely based on what the client enters in a div. For example:
<!-- specify page name in the div -->
<div id="client-entry">page-name</div>
<div id="load-url">url loads here</div>
<!-- load what is specified at the end of the url -->
<script>
$("#load-url").load("known-folder/"#client-entry.text()".html");
</script>
Any help would be appreciated.
Idea 1:
Give an attribute to div of your choice (Say for example ajaxify)
<div id="client-entry" ajaxify="unique link here">
then using jQuery you can get the value as
$('#client-entry').attr('ajaxify');
and then load the next div with whatever attribute value the client-entry div has has.
Idea 2:
You may use an input in the client-entry div as
then using jQuery get the value of input as
var toLoad = $('client-input').val( );
Use this value in your load code.
$("#load-url").load("known-folder/"+toLoad+".html");
I'm trying to build a dynamic display in a web page. The site is built in ASP.NET MVC 3, but I'm not sure if this matters...
Essentially, I have a base "_Editor.cshtml" page which uses partials to render the specific editor content in my display using query parameters. Consider an editor for a chart (line chart vs. bar chart).
_Editor.cshtml
<div id='tabs'>
<ul>
<li><a href='#queryTab'>Define Query</a></li>
<!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
<!-- ko template: 'tabNames' -->
<!-- /ko -->
<li><a href='#themeTab'>Styles and Themes</a></li>
</ul>
<div id='queryTab'>
<!-- configure db connection, tables, fields, etc... (not important) -->
</div>
<!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
<!-- ko template: 'tabContent' -->
<!-- /ko -->
<div id='themeTab'>
<!-- show various style options here (not important) -->
</div>
</div>
<script type="text/javascript">
$(function(){
var vm = { /* define my model here */ };
ko.applyBindings(vm);
$("#tabs").tabs();
});
</script>
#if (Model.EditorType == ChartTypes.Bar) {
#Html.Partial("_BarChartEditor")
} else if (Model.EditorType == ChartTypes.Line) {
#Html.Partial("_LineChartEditor")
}
_BarChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Bar Chart Tab!</li>
<!-- I could have many more tab names here -->
</script>
<script id="tabContent" type="text/html">
<div id="barChartTab">
<h1>Add controls for bar chart configuration</h1>
</div>
<!-- I would create a div for each tab name above here -->
</script>
_LineChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Line Chart Tab!</li>
</script>
<script id="tabContent" type="text/html">
<div id="lineChartTab">
<h1>Add controls for line chart configurations</h1>
</div>
</script>
Sorry for the lengthy code drop (it took a long time to write it all here, so have mercy on me). :) I wanted to make sure that my problem was understood because of the way I'm building my editors using custom partials. Perhaps it's cludgy, but it works for the most part...
Really, everything works great except for the tab content. The tab rendering appears to be happening before I'm able to bind my view model to the UI. When the 'ko.applyBindings()' method is called, the tab shows up on different tabs.
Has anybody tried to do this? Has anybody had success? I've created a jsfiddle to show a simple scenario to show exactly what I'm talking about:
http://jsfiddle.net/TrailHacker/j2nhm/
Thanks for any help!
I actually got it working with your example, your content template was just structured incorrectly. It was missing the <div> tags.
If you modify this for your example, just remember that the div id needs to match the link's ref. You can throw both of these values into your viewmodel, to allow for multiple custom tabs.
http://jsfiddle.net/tyrsius/UCGRZ/