Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

creating image using AJAX and displaying on web page

 
D kukreja
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64822
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
D kukreja
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My problem is solved using the above link.
Thanks you guys anyways !
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64822
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64822
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic