I'm writing a testing utility- I want to show multiple finished HTML "pages" in a single browser window.
Is this possible? I'm using Java Servlets.
For example, normally the user goes to a utility screen, fills in a bunch of fields and POSTS this to my servlet, which builds up a full HTML stream based on their input and writes it to HttpServletResponse.getWriter(). When the user views source, they get a <html> ... </html>.
What I want to do is allow users to request multiple "screens" and get the results in a single web page where you'd scroll down to see the 2nd, 3rd, etc. screens, maybe there is some kind of divider in between. I thought of frames or iframes, but didn't have luck. I have seen where I can write my big html stream to a javascript variable, then use document.write to dump it into the iframe. But that seems pretty awkward, and I'd have to be really careful about escaping quotes and stuff.
You will have to use iframes or frames to do this. A single web page can only contain one set of html tags and thus one html page.
Another idea would be to render the page by your script and then capture a picture of it and then have a page containing images. You will of course loose all interaction with the page.
I'm not sure what you're trying with your frames, but I imagine frames should work OK for what you've described.
Instead of trying to post to more than one URL from your form, you just post to a servlet that returns a page with the frameset, and each frame has a source that points to one of the URLs you want to test. For example:
<form action="testServlet" method="post">
<input type="text" name="someValue" />
</form>
The testServlet then returns a page with this content:
<frameset rows="33%,33%,33%">
<frame src="testUrl1?someValue=value">
<frame src="testUrl2?someValue=value">
<frame src="testUrl3?someValue=value">
</frameset>
The only problem with this is that you're doing a GET instead of a POST, but that's easy to get around. All you would need do is to implement the doGet method within your servlets and just call doPost from within doGet.
Just leave out the <html>/</html> tags for each page and wrap the whole thing inside a single large ....
Like this maybe:
<html>
[page1Content]
<hr />
[page2Content]
<hr />
[page3Content]
<hr />
</html>
Related
I have two jsp, let's say A.jsp and B.jsp. A.jsp has the following code:
<c:import url="B.jsp" >
<c:param name = "page_title" value = "Title" />
</c:import>
In B.jsp i need to check some conditions and do a redirection to Login.jsp. I achieve this by doing response.sendRedirect(Logn.jsp)
The problem is that the redirection is made on B.jsp so the result is that the browser displays the content of Login.jsp and A.jsp but i need to redirect the whole page to Login.jsp. That is, the browser should only show Login.jsp.
Consider that the redirection must be made on B.jsp unless there is a way that B.jsp can tell A.jsp the url to redirect to.
EDIT: A.jsp and B.jsp belong to different projects
In your B.jsp, instead of doing a redirect, set a flag on the request as
<c:set var="login" value="true" scope="request" />
Then in A.jsp check the flag and redirect if present.
<c:if test="${login == 'true'}">
<c:redirect url="/login.jsp" />
</c:if>
Try doing a jsp:include instead.
<jsp:include page="B.jsp" >
<jsp:param name="page_title" value="Title" />
</jsp:include>
There are two parts to solving this:
1) Making sure that you are not sending any HTML to the client in A until you have performed the logic in B. That means that you must call the B.jsp early (part of good MVC design).
2) Use the var parameter in your c:import:
<c:import url="B.jsp" var="output">
Now the output of the call to B will be in a buffer called "output" instead of being sent directly to the client. That allows you to make decisions in A (after the call to B). If you decide you want to redirect, you can, because you have dumped nothing (except some white space probably) to the browser. If you decide you want to send the output of B to the browser instead you can simply do this after the c:import:
${output}
There is even a trick to get rid of the white space being sent to the browser if that becomes necessary, but it rarely is (if you send too much white space the buffer will commit and then you cannot redirect, but that's rare and an entirely different question).
Make sense?
There are many examples on the Net of outputting images from servlets by writing to request's output buffer.
Is it possible to create an entire HTML page with multiple images in a table from a servlet?
The images would be created on the fly by a bean.
You don't want to do it that way.
I would create two servlets:
To serve an HTML page with <img src="..."> elements for each image.
To serve the binary data of the image
Basically the first servlet would send the HTML to the client browser. The browser sends new HTTP requests for each <img> element it finds. The second servlet would handle those requests by writing the image's binary data directly to the response's OutputStream.
For small images, you can embed the images using css or directly in html.
To embed using css take a look at this.
This is what I would suggest:
<html>
<body>
<img alt="some title" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA.."/>
<img alt="some title" src="data:image/png;base64<data2>"/>
<img alt="some title" src="data:image/png;base64<data2>"/>
</body>
</html
To get the exact value you should have after base64 in src attribute, you should take a look at converting png images to base64.
This solution is somewhat non-ideal and might take the page to load forever if there are more than 10-15 images in the page.
If that is the case, then you should go with the other solution of linking to the url for servlets which serve image.
I have two different divisions in a JSP page. One contains a menu of links, when clicked the div2 (id-content) loads different pages accordingly. I am doing something like -
<div id="menu">
<ul class="navbar">
<li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
</li></div>
and in the script I have something as -
<script language="JavaScript">
function changeContent() {
document.getElementById('content').load('Login.jsp');
}
</script>
I also tried -
document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">";
None of the ways worked. Please suggest how should I
Try jquery..
function changeContent() {
$('#content').load('Login.jsp');
}
The solution is to use Ajax, which will asynchronously retrieve your page content that can be pasted in with the innerHTML method. See my answer to a similar question of how an Ajax call works and some introductory links.
As to why your examples in your answer don't work, in the first case there is no load() method on an Element object (unless you've defined one yourself and not shown it). In the second example, as one of the question comments says, there is probably something causing a syntax error in the javascript.
As an FYI, when there is a syntax error in some javascript in a web page, the current expression being parsed and the rest of the <script></script> block will be ignored. Since this is inside a function declaration, that function will never get defined.
For instance, an embedded quote in the included page will end the string for the innerHTML assignment. Then the javascript parser will try to parse the remainder of the HTML causing a syntax error as the HTML will not be valid javascript.
We use jquery. Add a click event handler to the anchor elements. In the click handler call $('#content').load(your_url);. You might want to use the load(url, function() { ...}) version. More info here http://api.jquery.com/load/
Your initial page comes down from the server. It's displayed by the browser. When you click on a link (or a button) in the browser, you want to fill the second div with new HTML. This is is a perfect job for an AJAX request. What the AJAX object in the browser does, is to send a POST (or whatever) string to the server. And then the Ajax object receives the HTML response back from the server. And then you can display that response data which the AJAX object contains, anywhere you want.
I know it must be simple, but still I am not able to figure it out.
I have a link on a jsp page.
When this link is clicked I want another tab (of browser) to open up.
The view of this new page is defined by action class, which needs a form field value.
The problem I am facing is that I can not get the values of form fields to the action class without submitting the form. And submitting the form changes the view of the original jsp as well, which defeats the whole purpose of opening a new tab.
So I need a way to get the form field values to action class without resetting the view of original jsp page.
One way I came across was URL re-writing but that would be my last option.
Please suggest something!!
Thanks!!
Firstly I would like to point out that currently possible (to my knowledge anyway) to force a new tab to appear, it is dependent on the users' browser and the settings that they have see here for more infomation.
Now onto your question, since links cannot send form data (on their own) you have 2 options:
You can use a form "submit" button pointing to the URL you want to send the data to and to and add the target="_blank" to the form which will cause a new page to open up when the form is submitted.
You can add a javascript event to your link so that when it is pressed you append the value of the input to the URL and open a new window with that URL.
Personally I would choose the first option.
Here is a simple example of option one which doesn't remove the input value when you submit...
<html>
<body>
<form action="test1.html" method="post" target="_blank">
<input type="text" name="bob" />
<input type="submit" value="Hello"/>
</form>
</body>
</html>
You could do an ajax call, or dynamically build the link url with get parameters in it.
I am using a html form like this:
<form action="question" method="get">
where question is a java servlet class which renders the data from the form and display on other page.
What I am trying to do is display this data just below the html form not on other screen.
(Somewhat like the page where we Ask Question in stackoverflow.com where the question you enter is rendered and displayed below.)
So I am trying to do same. Anyone has an idea how to do that?
The simplest way to do it, is to use javascript (client side).
Below is a very crude example on how to do this. This will give you an idea on how to proceed.
create a html page, with two separate text area boxes.
Let the first text area box be the source where you type in the text.
Assign it an id 'source_area'.
<textarea id='source_area'>
</textarea>
Let the second text area box be the destination.
Assign it an id 'destination_area'.
Set this area as "readonly" because you don't want users typing here directly.
<textarea id='destination_area' readonly>
</textarea>
Now when a user types into the first box, we need to capture the particular action.
For this example I will use the "onKeyUp" to capture events when a keyboard key is released.
Now when typing into the source text box, a key on your keyboard is released, it will invoke a javascript function "transferToNextArea()" is invoked.
We will create the javascript function "transferToNextArea()" in
Read more about javascripts here. http://w3schools.com/js/js_events.asp
Complete list of events here. http://w3schools.com/jsref/dom_obj_event.asp
The javascript function will extract text from 'source_area' text box.
It will then assign the same text into 'destination_area'.
function transferToNextArea()
{
//extracting text.
var varSrcText = document.getElementById("source_area").value;
//assigning text to destination.
document.getElementById("destination_area").value=varSrcText
}
Complete html (tested in Google Chrome)
<html>
<body >
Source Box
<textarea id='source_area' onKeyUp="transferToNextArea();">
</textarea>
<br>
Destination Box
<textarea id='destination_area' readonly>
</textarea>
</body>
<script type="text/javascript">
function transferToNextArea()
{
var varSrcText = document.getElementById("source_area").value;
document.getElementById("destination_area").value=varSrcText
}
</script>
</html>
This is just a very basic example. It is not very effecient, but it will give you an idea of how data can be moved around.
Before assigning the text, you could manipulate the text however you want it using javascript.
Stackoverflow formats the text as per the html tags after extracting it. This will require lot more code and more work.
Using a servlet for the above task is overkill.
You would use a servlet, only if you want to do something with the data on the server side.
Example
a) store it in a database before displaying it below.
Read about "ajax" calls to send and recieve data between the server and client.
Ajax will give you the means to send data to the servlet without having to refresh the whole page.
Create a JSP with a form
on submit post the data to some servlet
process request and produce resultant data and set it to request's attribute
forward the request to same jsp
check if the data is not null display under the form
Just let the servlet forward the request to the same JSP page and use JSTL <c:if> to conditionally display the results.
request.setAttribute("questions", questions);
request.getRequestDispatcher("/WEB-INF/questions.jsp").forward(request, response);
with
<c:if test="${not empty questions}">
<h2>There are ${fn:length(questions)} questions.</h2>
<c:forEach items="${questions}" var="question">
<div class="question">${question}</div>
</c:forEach>
</c:if>
See also:
Our servlets wiki page - Contains concrete Hello World examples.