I am trying to include an EJS file in my XHTML file so that I could pass on the data to the managed bean.
I tried by including withing in script tag as but i am not getting the value from the EJS file to XHTML file.
Could anyone please help me in the proper way to include an EJS file in HTML/ XHTML file.
Thanks,
ind.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1> Date is: </h1> <%= new Date() %>
Room Type is: <%= checkindt %> <br />
Room Type is: <%= roomtype %>
</body>
</html>
app.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<script type="text/javascript" src="/ind.ejs" > </script>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" >
function setValue(){
alert('app.xhtml');
alert('cindt is: '+ checkindt);
document.getElementById('myForm.cindt').value = checkindt;
}
</script>
</head>
<body>
<div>My app</div>
<form name="myForm" >
Date: <input type="text" name="cindt" />
<button id="submit" onclick="setValue();" />
</form>
</body>
</html>
There may be a better solution than using ejs, but I will attempt to answer this question anyways.
1) Download a browser compatible version of EJS. Try clicking Here to download or go here.
2) Inlude it in you page:
<script src="ejs.js"></script>
<script>
// your code here
</script>
3) Render/Compile it:
From text:
<script src="ejs.js"></script>
<script>
var ejsResult = new EJS({
text: "<div>Room number is: <%= roomnumber %> <br /> Room Type is: <%= roomtype %> </div>"
}).render({roomnumber: "111", roomtype: "Suite"})
someElement.innerHTML = ejsResult;
</script>
From a url:
<script src="ejs.js"></script>
<script>
var ejsResult = new EJS({
url: "templateLocation.ejs"
}).render({roomnumber: "111", roomtype: "Suite"});
someElement.innerHTML = ejsResult;
</script>
Related
I am trying to access variables passed from the server to the client with ejs
My server file:
router.get('/', function (req, res, next) {
res.render('chat', {user: req.user, message: null});
});
My client file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Simple Chat App</title>
</head>
<body>
<header>
<h1>Super Chat</h1>
</header>
<section>
<div id="change_username">
<input id="username" type="text"/>
<button id="send_username" type="button">Change username</button>
</div>
</section>
<section id="chatroom">
<section id="feedback"></section>
</section>
<section id="input_zone">
<input id="message" class="vertical-align" type="text"/>
<button id="send_message" class="vertical-align" type="button">Send</button>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<% var user = <% user %> %>
console.log(user);
</script>
<script src="chat.js"></script>
</body>
</html>
I get an error:
Could not find matching close tag for "<%".
How do I fix this?
<% var user = <% user %> %>
You can't nest <% %> blocks. You are either inside EJS mode or outside it. You can't go into Extra Deep EJS Mode.
Aside, you also can't just output a variable into client-side JS. You need to generate JavaScript source code from the variable. JSON.stringify is a good way to generate object, array and string literals from objects, arrays and strings.
<script>
const user = <%- JSON.stringify(user); %>
console.log(user);
</script>
Note that use of <%- to output without escaping for HTML.
The problem is here, you just have to replace the value of the user in the template.
var user = "<%=user%>" // Please change this line
Updated Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Simple Chat App</title>
</head>
<body>
<header>
<h1>Super Chat</h1>
</header>
<section>
<div id="change_username">
<input id="username" type="text"/>
<button id="send_username" type="button">Change username</button>
</div>
</section>
<section id="chatroom">
<section id="feedback"></section>
</section>
<section id="input_zone">
<input id="message" class="vertical-align" type="text"/>
<button id="send_message" class="vertical-align" type="button">Send</button>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var user = "<%= user %>" // problem is here
console.log(user);
</script>
<script src="chat.js"></script>
</body>
</html>
I Hope this helps you.
it says that it cannot find closing tag for your ejs template.
you don't need the surrounding ejs template notation in script.
<script type="text/javascript">
var user = '<%= user %>'
console.log(user);
</script>
Try this.
GOOD LUCK. :)
Here is my Code:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<!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>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<% request.getParameter("ServerName"); %>';
alert(x);
</script>
<body>
<form>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
Here in the above function onclick of a button i want to execute the scriptlets which is inside javascript?
you can also use this:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<%
String ServerName = (String)request.getParameter("ServerName");
%>
<!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>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<%=ServerName%>';
alert(x);
</script>
<body>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
You can, but if you want the result to be passed to the JavaScript you have to output something.
var x='<%= request.getParameter("ServerName"); %>';
^ output!
… and unless you take measures to escape that data, you render yourself vulnerable to XSS attacks.
(And, obviously, this won't work until the form is actually submitted)
I'm trying to do the following:
- I have 2 pages (page 1 with input fields & page 2 where the entered input should display)
- I need to get all that was typed from the first input field, and put the results inside the tag "content" of the 2nd page.
1º Page Input :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 1 - Input</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$("#iframeId").contents().find("body").html($("<div class='content'></div>").append(code));
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="submit();" />
<iframe id="iframeId" name="iframeId" src="layout.html"></iframe>
<div id="test">
Text
</div>
</body>
</html>
2º Page Layout :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 2 - Layout</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="foot"></div>
</body>
</html>
THANKS!
This should work if both files are having the same origin:
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$('#iframeId').contents().find('.content').text(code);
}
</script>
You were almost there :)
UPDATE:
To insert on submit:
<script type="text/javascript">
$('#iframeId').load(function(){
$('input[type="button"]').on('click',function(){
$('#iframeId').contents().find('.content').html($('textarea[name=message]').val());
});
});
</script>
To insert on type:
<script type="text/javascript">
$('#iframeId').load(function(){
$('textarea[name=message]').on('input',function(){
$('#iframeId').contents().find('.content').html($(this).val());
});
});
</script>
Not returning form field values
var formJSON = $.toJSON($('#form1'));
JSP is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<script type="text/javascript" src="js/ebs.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" onclick="validateField()" method="post">
Text Field 1 : <input id="txt1" name="txt1" type="text" />
<br />
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>
My JavaScript is:
function validateField() {
alert('fn called');
var formJSON = $.toJSON($('#form1'));
alert('after');
alert('formJSON' + formJSON);
alert("method ends here.");
}
I am getting:
form JSON{"length":1,"0":{"txt1":{},"1":{}},"context":{"location":{}},"selector":"#form1"}
(There is no content for txt1 field even if we type something there.)
$.toJSON() converts an ordinary Javascript object to JSON.
It does not get values of DOM elements or jQUery objects.
You want .serializeArray().
I am trying to use gadgets.io.makeRequest to retrieve the site http://www.novasoftware.se/webviewer/(S(r2vc0j45wbu53x55slbdce55))/MZDesign1.aspx?schoolid=27500&code=82820
It worked before, but now it returns empty html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="0.1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<TITLE></TITLE>
</HEAD>
<BODY>
<P>
</BODY>
</HTML>
This is the simple code that I'm using:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My test gadget" height="400"/>
<Content type="html"><![CDATA[
<script type="text/javascript">
function getHtml() {
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
var url = "http://www.novasoftware.se/webviewer/(S(r2vc0j45wbu53x55slbdce55))/MZDesign1.aspx?schoolid=27500&code=82820";
gadgets.io.makeRequest(url, response, params);
};
function response(obj) {
//obj.text contains the text of the page that was requested
var html = obj.text;
console.log(html);
document.getElementById('content_div').innerHTML = html;
};
gadgets.util.registerOnLoadHandler(getHtml);
</script>
<div id="content_div"><p>Content here</p></div>
]]>
</Content>
</Module>
Is it possible that the site has blocked it? And how do I see that? This same code works for other URLs like http://www.google.com
I also don't get any errors in the return string