How to do html redirect in JSP? - html

I have the following JSP :
<%
String Target_Url=request.getSession().getAttribute("Target_Url").toString();
Target_Url="http://www.yahoo.com";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
if (window.top.location != window.location)
{
window.top.location.href=window.location.href;
}
</script>
<META http-equiv="refresh" content="0;URL=${Target_Url}">
</head>
...
</html>
It's inside a frame, and should redirect to the top level location, but it's not doing that, it keeps redirect to it self, but if I hard code it like the following, it works :
<META http-equiv="refresh" content="0;URL=http://www.yahoo.com">
I guess : content="0;URL=${Target_Url}" is incorrect, what's the correct format ?

Correct format:
<META http-equiv="refresh" content="0;URL=<%=Target_Url%>">

Related

Unable to run JSP file from VSCode

I have made a basic form page in HTML and programmed it such that when I click the submit button, it must go to a JSP page where the details entered will be displayed.
The HTML code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC</title>
</head>
<body>
<form method="post" action="xyz.jsp">
Name: <input type="text" name="nm" placeholder>
ID: <input type="text" name="id" placeholder>
Submit: <input type="submit">
</form>
</body>
</html>
The JSP code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XYZ</title>
</head>
<body>
<%
String St1 = request.getParameter("nm");
String St2 = request.getParameter("id");
out.println("Your name is: " + St1);
out.println("Your id is: " + St2);
%>
</body>
</html>
When I tried running the HTML page using the live server in vs code, it shows the page not found after clicking the submit button.
I am literally a beginner and helpless, please tell me what should I do? OR where am I getting it wrong?
I`m using VSCode for the aforementioned.

Proper way to add the language tag in Next/Head

I cannot find a solid example of using the language tag with Next Head. Here are the two best I've seen. Which one, if either, is proper?
Note: It doesnt have to be dynamic.
Option 1
<Head>
<meta property="og:locale" content="en_US" />
...
</Head>
Option 2
<html lang='en'>
<Head>
...
</Head>
</html>
Option 3 (capital Html)
<Html lang='en'>
<Head>
...
</Head>
</Html>
You can add it to the next.config.js
module.exports = {
i18n: {
locales: ['en-US'],
defaultLocale: 'en-US',
localeDetection: false,
},
}

How to get/convert formatted html of iframe into plain text?

I created an iframe into which I can post formatted text (from a Word document for example) and receive it as html. Is it possible to also recieve the unformatted version (without the html tags), such as created when copying formatted text into a textarea?
My code for logging the html of formatted text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.addEventListener("load", function () {
var editor = theWYSIWYG.document;
editor.designMode = 'on';
action.addEventListener('click', function() {
var formattedHTML = editor.body.innerHTML
console.log(formattedHTML);
}, false)
}, false)
</script>
</head>
<body>
<div id="textEditor">
<button id="action" title="Bold"><b>Click me</b></button>
<div id="richTextArea"></div>
<iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>
</body>
</html>
Technically I could ask the user to also paste the formatted text into a seperate textarea box, but I would prefer to do it in a single time.
Thanks in advance
Try this var text = editor.body.innerText || editor.body.textContent;
Taken from this answer https://stackoverflow.com/a/6743966/2668119

Display Heading and Description of a HTML template reading from JSON

I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>

How to meta refresh after all resources were loaded?

I want to redircet to another page by meta refresh, but only after all resources were loaded. Any ideas how to archive that?
SOLUTION:
I combined both ways, the meta refresh and the jQuery way.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%# taglib prefix="pos" uri="/WEB-INF/tld/pos.tld" %>
<%# taglib prefix="template" tagdir="/WEB-INF/tags" %>
<%# page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="" />
<meta http-equiv="Refresh" content="1; url=${callback}/" />
<script type="text/javascript" src="/JS/pos_js/jquery-latest.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
window.location = '${callback}';
});
</script>
</body>
</html>
With this way, for me, it is possible to redirect if the document in fully loaded and if JS is deactivated the meta refresh will throw the user to the callback page.
Only real way of doing it is:
<meta http-equiv="Refresh" content="1500; url=http://www.example.com/" />
That will wait 1.5 seconds for the page to load... not ideal, but without JS you'll be lucky!
edit: What about an iFramed option?
You could do this via jQuery using the $(document).load() function.
$(document).load(function() {
window.location = 'http://new.url.com';
});