File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes creating image using AJAX and displaying on web page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "creating image using AJAX and displaying on web page" Watch "creating image using AJAX and displaying on web page" New topic
Author

creating image using AJAX and displaying on web page

D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
Hi,
I am trying to display image using ajax and javascript.
Heres the situation.
I have an AJAX action , which creates a png file and saves in a folder.
When the ajax action returns only then I have the png file available, so I need to display this png file on the screen now.
I cannot just set the src of tag in the javascript as that doesn't work in FF , becoz this folder is not published on the webserver. Even if I get a way to write to a folder of webserver, it will not work since the image is only created during the ajax call, and there is not re-publish of the project on the weserver in between.
I use StreamResult from struts as a url to display the image. but how to open that url in javascript.
thanks
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
If you are streaming back the file, than you really should not be using an Ajax call.

You should just set the source of an image with the URL



If you need to do a post, than you need to find someway to get a temporary url to the image.

Eric
D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
hi Eric
AJAX code is creating the .png file.
This file is not present in the folder intially. When AJAX java code is called , it reads something from the database and based on that it creats .png file and saves in the folder.
Now if I do what you suggested my javascript looks like this

With this it never goes to dynamicImageaction to get the image when this javascript is executed.
any more suggestions?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Are you streaming back the image bytes in your Ajax call? What does the Ajax call look like? can you access the image from the web after it is made via a URL?

Eric
D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
I am not streaming back the image file from AJAX call. It returns only the name of the file created.
The url which is coming in the src , I am able to access the image if I type the same url directly in browser.
but in this manner nothing comes up , because itthe action spitting the image on screen) is a struts action and it never calls the action if I set src attribute in javascript after the page is loaded.

Is there another way to stream the image from ajax call and display in a div , instead of using this struts StreamResult thing.
thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

I still do not understand the issue. If you set the src attribute of the image to a valid URL for the file, it will diplay the image.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
It is not displaying because the src is set to a valid url after page is loaded.
anyway I found something which looks like will solve my problemm , I am trying it now
have a look at "another example" here
http://www.rodsdot.com/ee/scriptingRemoteImages.asp
D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
My problem is solved using the above link.
Thanks you guys anyways !
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

D kukreja wrote:It is not displaying because the src is set to a valid url after page is loaded.

Again, it doesn't matter. If you set the src to a valid URL, whether the page has already been loaded or not, it will display the image.
D kukreja
Ranch Hand

Joined: Jan 29, 2008
Posts: 39
it is working now after I followed the "onload" event thing in the above page.
This page says:
"The problem is that once the page is loaded, were you to assign a new source URL to an image or even create a new image object the image will likely not appear in your page. (Depending on the size of the image and the browser.) The Document Object (DOM 2 ) has already been rendered by the browser. If you retrieve an image that was not loaded when the page was loaded, you must insert or append that image's binary stream into the existing page. Let's load a simple page with no image and try to put an image inside a place holder division."

And I thought this is the roo cause of my problem. I followed the approach explained here http://www.rodsdot.com/ee/scriptingRemoteImages.asp
thanks!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

That's out-and-out wrong. I do it all the time!

Any change to an image's src, or even any changes made to the DOM itself, happen instantly.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: creating image using AJAX and displaying on web page