I am new to Twirl, and am trying to create a TODO application with play, the way I have it right now, I am trying to send two objects(an ArrayList, and a String). I have wrapped some code in the controller in a try catch. If an exception is caught the template should be rendered with a String, but not the ArrayList, and if no exception is caught, It will return an ArrayList, but not a String. I have tried just passing one as null, but I feel there is a better way to do it. Is there? Here is my Twirl:
#(message: String, tasks: ArrayList[Task])
<!DOCTYPE html>
<html>
<head>
<title>TODO</title>
</head>
<body>
<h1>TODOs</h1>
<p>#message</p>
#for(task <- tasks) {
<li><#task.task</li> }
</body>
</html>
You could use Options:
#(maybeMessage: Option[String], maybeTasks: Option[Seq[Task]])
<!DOCTYPE html>
<html>
<head>
<title>TODO</title>
</head>
<body>
<h1>TODOs</h1>
#for(message <- maybeMessage) {
<p>#message</p>
}
#for(tasks <- maybeTasks) {
#for(task <- tasks) {
<li>#task.task</li>
}
}
</body>
</html>
And then from your controller:
Ok(views.html.foo(None, Some(Seq(Task("task 1"), Task("task 2")))))
Ok(views.html.foo(Some("Something went wrong."), None))
Related
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js">
</script>
</head>
<body>
<p>
<math overflow="scroll"><mfrac><msup><msub><mi mathvariant="-italic">Q</mi><mrow><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub><mo mathvariant="italic">max</mo></mrow></msub><mn mathvariant="normal">0.75</mn></msup><msup><mi mathvariant="italic">β</mi><mn mathvariant="normal">0.75</mn></msup></mfrac><mo>≤</mo><mn mathvariant="normal">5</mn><mo>×</mo><msub><mi mathvariant="italic">AEL</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub></msub><mo>×</mo><msup><msub><mi mathvariant="italic">Q</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">m</mi></msub></msub><mrow><mo>−</mo><mn mathvariant="normal">0.25</mn></mrow></msup><mo></mo></math>
</p>
</body>
</html>
Getting parsing error with new CDN https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js
Here is a configuration you can use to post-filter the MathML to fix the invalid -italic math variant value.
MathJax = {
startup: {
ready() {
MathJax.startup.defaultReady();
MathJax.startup.input[0].postFilters.add(({data}) => {
data.walkTree(node => {
if (node.attributes) {
if (node.attributes.get('mathvariant') === '-italic') {
node.attributes.set('mathvariant', 'italic');
}
}
});
});
}
}
}
Place this in a <script> tag just before the script that loads mml-html.js.
I have hard time with this simple jscript for no reason. this code should display the time once clicked. but i get the error below. what am i doing wrong
{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')",
"filename": "https://stacksnippets.net/js",
"lineno": 30,
"colno": 43
}
function item(name)
{
var d = new Date();
document.getElementById("but1").innerHTML = d;
}
<!DOCTYPE html>
<html>
<body>
<script src="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\animation\index.Js"></script>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<button onclick="item(name)">Try it</button>
</body>
</html>
This id (#but1) does not exist, so innerHtml won't work, try changing it.
function item(name) {
var d = new Date();
document.getElementById("demo").innerHTML = d;
}
<!DOCTYPE html>
<html>
<body>
<script src="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\animation\index.Js"></script>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<button onclick="item(name)">Try it</button>
</body>
</html>
I am using the layout taglib to extend a page to its template but i don't know how to pass a variable to the main layout and apply a conditional class.
Considering this is my main-layout.marko
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### (TITLE === 'REGISTER')?'ACTIVE':'INACTIVE' ####">
<layout-placeholder name="title"/>
<layout-placeholder name="body"/>
</body>
</html>
this is my registration.marko
<layout-use template="./layout.marko">
<layout-put into="title">
$data.title
</layout-put>
<layout-put into="body">
some content
</layout-put>
</layout-use>
and finally this is the code I use to render the page and pass the title data
router.get('/register', function(req, res, next) {
registration.render({
title: 'register'
}, res);
});
How can I create a conditional class on the main-layout.marko file that switches between active or inactive depending on the page title?
Thanks
You can pass data to a layout by adding additional attributes to your <layout-use> tag. See: marko-layout » Layout Data
For your example, the following will work:
In main-layout.marko:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### ${data.title === 'REGISTER' ? 'ACTIVE' : 'INACTIVE' } ####">
<layout-placeholder name="title">
${data.title}
</layout-placeholder>
<layout-placeholder name="body"/>
</body>
</html>
In registration.marko:
<layout-use template="./layout.marko" title="${data.title}">
<layout-put into="body">
some content
</layout-put>
</layout-use>
That should solve your problem, but let me know if you are still stuck.
there is another way of passing data t all of its template that is using $global in which you are passing your data .
and after using global you dont need to add attribute to any tag . you can access it by using like
out.global.username
in for example magento they have php seperated from phtml.
I also do the same thing.
But I can't figure one thing out, and that is:
When I have this php script:
class aclass extends main{
public function redirect(){
require_once($this->frontend_folder . $this->admin_folder . "beheer/edit_account.phtml");
}
public function nav_menu(){
return "<nav>some nav menu things in here</nav>";
}
and the "view" phtml script:
<!doctype html>
<html>
<head>
</head>
<body>
<div id="wrap">
<?php
echo $this->nav_menu();
?>
</div>
</html>
"$this" doesn't work, but how can I get this working?
you need to instantiate the class in the view.
<!doctype html>
<html>
<head>
</head>
<body>
<div id="wrap">
<?php
$c = new aclass; // instantiate the class
echo $c->nav_menu(); // run the function from the class
$c = null; // null the variable, maybe help garbage collection...
?>
</div>
</html>
this is not an optimal way to use it, but I hope the idea is clear.
EDIT: This is a simple solution, depending on your archetecture, you can do many things. In simpliest form, you should consider instantiating your class at the top of the view, then you can reference it by the handle you assign it to throughout the view.
I would like to listen for all io request in all my web pages, however, when I used the syntax below, I can ONLY listen for the io with the yui instance.
Y.on('io:success', myCallBack);
How can I write a custom method/event or something else to achieve this?
My question is actually the same as below URL:
http://yuilibrary.com/forum/viewtopic.php?p=26009
I googled for a while but did not find a practical answer for this, any help will be appreciated, thanks.
Try
(Y.io._map['io:0'] || new Y.IO()).publish({
'io:success': { broadcast: 2 },
'io:complete': { broadcast: 2 },
etc.
});
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>io.jsp</title>
<script src="/spring-test/scripts/yui_3.5.1/build/yui/yui-min.js"></script>
</head>
<body>
test
<script>
YUI().use("io-base", function(Y){
function onSuccess(transactionid,response,arguments){
alert('start!');
}
Y.Global.on('io:start',onSuccess);
});
Y1 = YUI().use("io-base", "node", function(Y1){
Y1.publish('io:start',{broadcast : 2});
Y1.io("http://www.yahoo.com.hk");
});
</script>
</body>
Finally I got one example , however it works only on FF, Chrome but fail in IE:
Please suggest if there is any improvement, thanks.