I want some static pages of application to be rendered from XML i.e. i am planning to have a base page and xml containing structure of the page and xslt which will be transforming this xml to html and at runtime i will be rendering this html to my view and displaying this view
Is there any way/ example for doing the same. Please help
Here is the sample xml
<!DOCTYPE html>
<html>
<head>
<title>Create</title>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript" />
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript" />
</head>
<body>
<div id="menucontainer">
<ul id="menu">
<li>
Rutu
</li>
<li>
Employee
</li>
</ul>
</div>
<h2>Create</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<form action="/Employee/Create" method="post">
<fieldset>
<legend>EmployeeDetailsModel</legend>
<div class="editor-label">
<label for="EmpName">EmpName</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="EmpName" name="EmpName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmpName" data-valmsg-replace="true" />
</div>
<div class="editor-label">
<label for="DeptId">DeptId</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field DeptId must be a number." data-val-required="The DeptId field is required." id="DeptId" name="DeptId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DeptId" data-valmsg- replace="true" />
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
<div>
Back to List
</div>
There is a good blog post here that describes how to create an HTML Helper to render the XSLT in a view. You just call the helper class from your view passing in the path to the XSLT and the XML. I have modified this helper so that you can also pass the XSLT and XML as strings to achieve the same results.
MvcContrib project provides an XSLT based view engine http://mvccontrib.codeplex.com/releases - I would suggest to check it out.
Related
I get this error when ever I try to load this web page:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}"/>
<title>Competition</title>
</head>
<body>
<div>
<p th:text="'Name: ' + ${competition.name}" />
<p th:text="'Date: ' + ${competition.date}" />
<p th:text="'Venue: ' + ${competition.Venue}" />
<div th:if="${competition.competitors != null}">
<h3>Competitors</h3>
<ul>
<li th:each="item : ${competition.competitors}" th:text="${item}"></li>
</ul>
</div>
<h4>Add Competitor.</h4>
<form action="#" th:action="#{/competitions/{id}(id=${competition.id})}" th:object="${email}" method="post">
<p>User email: <input type="text" th:field="*{text}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</div>
<p th:text="${competition.id}"></p>
</body>
</html>
I added the org.unbescape dependency to my pom.xml.
I started getting this error when I added the the URL to the form
(This line:)
th:action="#{/competitions/{id}(id=${competition.id})}"
It looks like you are using a older version of org.unbescape. The class UriEscape was introduced in versin 1.1.0. Ref here
Can you try by upgrading the org.unbescape version to 1.1.1 as follows?
<dependency>
<groupId>org.unbescape</groupId>
<artifactId>unbescape</artifactId>
<version>1.1.1.RELEASE</version>
</dependency>
I'm trying to refactor our Thymeleaf code that have a lot of copy-paste. The general idea is we have something like this:
<form th:object="${createForm}">
<div><input type="text" th:field="*{first}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{second}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{third}"/> <!-- some boilerplate code --></div>
<div><input type="text" th:field="*{fourth}"/> <!-- some boilerplate code --></div>
</form>
and I want to refactor the fragment
<input type="text" th:field="*{first}"/> <!-- some boilerplate code -->
to a separate file as it is a lot of copy paste (there is quite some HTML in the boilerplate code section).
My first approach was to do something like this:
<form th:object="${createForm}">
<div th:replace="fragments/input :: input(*{first}" />
<div th:replace="fragments/input :: input(*{second}" />
<div th:replace="fragments/input :: input(*{third}" />
<div th:replace="fragments/input :: input(*{fourth}" />
</form>
and then have a fragments/input.html file
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="input(field)">
<input th:field="${field}"/> <!-- some boilerplate code -->
</div>
</body>
</html>
But, once compiled/deployed, I get error
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'field' available as request attribute
Anyone an idea how to solve this? The question is to reduce code copy-paste while retaining the benefit of having th:field.
I also tried use th:with like this
<div th:width="field=*{first}" th:replace="fragments/smallslider :: input()" />
and fragment
<div th:fragment="input()">
<input th:field="${field}"/> <!-- some boilerplate code -->
</div>
but that did neither produce error nor generate HTML.
I solved this in similar way as #Wilson did.
Fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
<div th:fragment="input(fieldName)">
<input th:field="*{__${fieldName}__}" type="text">
</div>
</body>
</html>
Calling:
<form th:object="${createForm}">
<div th:replace="fragments/input :: input('first')" />
<div th:replace="fragments/input :: input('second')" />
<div th:replace="fragments/input :: input('third')" />
<div th:replace="fragments/input :: input('fourth')" />
</form>
you can achive this by passing the name of your bean field to the fragment like so.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div th:fragment="input(fieldName, fieldValue)">
<input th:name="${fieldName}" th:value=${fieldValue}/> <!-- some boilerplate code -->
</div>
</body>
</html>
and call it like so
<form th:object="${createForm}">
<div th:replace="fragments/input :: input('field', *{field})" />
</form>
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
I'm experimenting with jQuery Mobile and have run into a problem on my Windows Phone 7 browser.
Whenever I add a button to the page, either <input type='button'> or <button>, the whole page doesn't render in the WP7 IE.
When I view the same page in IE7 (using IETester) I get a Script Error "Object doesn't support this property or method" Line 17 Char 45703, and then the page doesn't render.
Here's the html that's generated for my page:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<title>
iplan
</title></head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>
mobile login</h1>
</div>
<div data-role="content">
ello
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIzNjAxMDE2M2Rk5Yr3L4N9Yyh0TZrUHAh3ZX6rJck=" />
</div>
<label for="ctl00_ContentPlaceHolder1_txtUsername" id="ctl00_ContentPlaceHolder1_lblUsername">Username</label>
<input name="ctl00$ContentPlaceHolder1$txtUsername" type="text" id="ctl00_ContentPlaceHolder1_txtUsername" />
<br />
<label for="ctl00_ContentPlaceHolder1_txtPassword" id="ctl00_ContentPlaceHolder1_Label1">Password</label>
<input name="ctl00$ContentPlaceHolder1$txtPassword" type="password" id="ctl00_ContentPlaceHolder1_txtPassword" />
<br />
<input type="submit" name="ctl00$ContentPlaceHolder1$btnLogin" value="Login" id="ctl00_ContentPlaceHolder1_btnLogin" />
<span id="ctl00_ContentPlaceHolder1_Label2">Boo</span>
</form>
</div>
<div data-role="footer">
© 2011</div>
</div>
</body>
</html>
When I remove that <input type="submit" ... the page renders correctly.
Any ideas?
I had the same problem. Turned out I was using an out of date version of jQuery.
Solved this by using the most recent version.
Any ideas why this won't validate here:
http://validator.w3.org/#validate_by_input
It seems the form input tags are wrong but reading through the XHTML spec they should validate fine. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Try putting a fieldset tag around the inputs. I think the idea of forms in XHTML is that they can't have direct descendants that aren't div, fieldset, etc.
You need to move
<div class="Controls">
so that it's inside the <form tag
This validates nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
As someone else put it:
[quote]
The validator is telling you that your hidden input element cannot immediately follow the form tag - it needs to have a container element of some kind.
[/quote]
(Source)
I guess a fieldset could help; See The XHTML DTD:
<!ELEMENT form %form.content;>
<!ENTITY % form.content "(%block; | %misc;)*">
<!ENTITY % misc "noscript | %misc.inline;">
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">
No input for you :(
I had the very same problem and it took me some time to figure out. Is this a recent change with the w3c validator? it's just I'm sure some of my pages with forms validated in the past, but now they all seem to through up errors for the same problem.
I used to always do something like:
<div>
<form>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</form>
and get validation errors, so now I just add fieldset or div around all the labels and inputs to get it to validate, like this:
<div>
<form>
<fieldset>or<div>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</fieldset>or</div>
</form>
Seems to work, but I'm sure I didn't have to do this in the past... hmmm?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
Put your div inside your form.
Your input elements should be within a fieldset. This validates and has the added benefit of making the document more accessible to non-visual user agents.
As an aside, your markup is suffering from divitis a bit. You could put classes on the table cells directly rather than nesting div elements within them (I'm not going to comment on the use of tables for layout). Also, you could style the form element directly rather than nesting it within a div.
Anyway, here's your example with a fieldset added so it validates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<fieldset>
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</fieldset>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>