Hello,
I do have a collection of 'photoDetails' object in a Set .I want to display images in this set
accordingly when the user clicks on a link saying next. I am able to display a single image on my jsp page . src of image tag is given to my servlet.
How can i display the images on same place without submitting it. ?
Can any one help ?
Thanks & Regards
Anuja K
> How can i display the images on same place without
> submitting it. ?
You have 2 options - load the entire set of images on request and have a lot of javascript that does the hide/show functionality.
The other option ofcourse is to have links that load different images from the server, each being a seperate request.
ram.
AJAX happens under the hood, but it is still a request to the server. Also how different would it be if the user clicks on a link that initiates the XMLHttp request.
AJAX is helpful when the browser makes a discreet request behind the scenes even when the user is yet to finish his/her task. But remember, here, the AJAX request if any can be instantiated only when the user clicks on the link which makes it no more efficient than an ordinary Http request.
ram.
Hi,
Anuj you can also store the path of image in an array in javascript and thn as user clicks next you change the src (source) value of img tag in html thru javascript. I think broswer will automatically call the next image.
Notice one thing tht array in javascript will be having just the path of image from the context and it will be populated dynamically through jsp.
Hope it will help you.
Cheers
~Gaurav Daga
Hi ,
thank you all , but still i couldn't figure out a way .
my image tag is like this
<img src ="PropertyImage.do?action=image" height="100" width="100" name = "img" />
and i want to change only the image display in the page without changing the other contents of the page is this possible with a click on the link ?
Thanks
Anuja K
Hi Anuja,
First modify your img tag like this.
<img src ="PropertyImage.do?action=image" height="100" width="100" name = "img" id="img" />
Then define one simple javascript method to change the image src from your array of images.
document.getElementById("img").src="your new image src";
Cheers
Rajesh R
You have to have a jsp which displays a lot of thumbnails.
The jsp would include a Servlet which given an id would generate the blown up version of the image.
Here is a sample.
Note: use jstl tags instead of scriptlets
//this generates a thumbnail images as link
//clicking on it would cause the same jsp to be loaded
//in the jsp check if there is a request for blown up image
<%if(request.getParameter("img1") == null){%> //if there is no request for blown up image 1
<a href = "display.jsp?id=img1"><img src = "thumbnail_img1"></a> //show the thumbnail
<%}else{
<jsp:include page = "path_to_servlet"/> //call the servlet which shows a blown up image
<%}%>
ram.
You have to have a jsp which displays a lot of thumbnails.
The jsp would include a Servlet which given an id would generate the blown up version of the image.
Here is a sample.
Note: use jstl tags instead of scriptlets
//this generates a thumbnail images as link
//clicking on it would cause the same jsp to be loaded
//in the jsp check if there is a request for blown up image
<%if(request.getParameter("img1") == null){%> //if there is no request for blown up image 1
<a href = "display.jsp?id=img1"><img src = "thumbnail_img1"></a> //show the thumbnail
<%}else{
<jsp:include page = "path_to_servlet"/> //call the servlet which shows a blown up image
<%}%>
ram.
Its the same jsp which would be called verye time, the user clicks on the link. The jsp by default includes a Servlet which would generate the enlarged image if there is a request for it.
So if you click on the next image, the jsp displays all images as is, except the image which has to be blown up. The jsp includes the servlet which then displays the blown up image.
If you have the src as the servlet, it will work, but that page would contain only the blown up image which the user clicked on. All other images would be lost and the user would have to go back to see the other images.
cheers,
ram.
