javascript - How to hide an animated gif after the file has been downloaded ? -
is there way make animated gif image disappear after server side java code executed , client gets http response webserver without using ajax?
i´m using following struts2 submit button:
<s:submit value="show data" onclick="myjsfunction()" /> method appear animated gif image:
function myjsfunction(){ $("#containerwithgifimage").fadein("fast"); } method disappear animated gif image (but have no idea, how can call without ajax):
function myjsfunction2(){ $("#containerwithgifimage").fadeout("fast"); } now gif appears not disappeared after java code on webserver executed.
both questions (this , the other one) examples of xy problem.
before looking specific technologies, techniques or hacks, start defining goal:
the goal
- download file without moving other pages;
- meanwhile, showing indicator (progress bar, animated gif, overlay, etc...);
- when file has been downloaded, hide indicator.
the solution
bound trigger javascript function as described here:
<a href="javascript:myjsfunction();"> download </a> in javascript function: show indicator, start timer check if download on (and hide indicator), , download file:
function myjsfunction(){ $("#containerwithgifimage").fadein("fast"); // show indicator setinterval(function(){ $.ajax({ url : "/isdownloadfinished.action", type : "get", success : function(data,textstatus,jqxhr) { $("#containerwithgifimage").fadeout("fast"); // hide indicator },error : function(jqxhr, textstatus, errorthrown) { console.log("download still in progress, nothing..."); } }); }, 1000); // check every second if download has finished window.location='/download.action'; // start download } download.action must put in session attribute indicating download has started, updating when it's over.
since stream result you're consigning control of response browser (and hence can't run code when has finished), can write directly response , return none, as described here:
public class download extends actionsupport implements sessionaware, servletresponseaware { @setter private map session; @setter private httpservletresponse response; public string execute(){ servletoutputstream os = null; try { session.put("download_status","active"); response.setcontenttype("mycontenttype"); response.addheader("content-disposition", "attachment; filename=\"foo.bar\""); os = response.getoutputstream(); ioutils.copy(getmyfileinputstreamsomehow(), os); } { ioutils.closequietly(os); session.put("download_status","finished"); } return none; } } you can have browser drawing progressbar specifying content-length response header (response.setheader("content-length", 1337);) as described here, can see similar mechanism prevent concurrent downloads.
in isdownloadfinished.action, need check session attribute. doesn't exist or different finished, means download not started yet, or still in progress, hence nothing. otherwise, return succesfull httpheader make jquery $.ajax function run success: callback. can use either httpheader or json, as described here:
@results({ @result(name = actionsupport.success, type="httpheader", params = {"status", "200"}), @result(name = actionsupport.error, type="httpheader", params = {"error", "500"}) }) public class isdownloadfinished extends actionsupport implements sessionaware { @setter private map session; public string execute(){ if ("finished".equals(session.get("download_status")) { session.remove("dw_status"); return success; } return error; } } there different solutions problem, i've shown simplest one.
more elegant , complex solutions involve long-held requests , comet techniques (read: websocket), suppose can start polling-timer kick-off example, customizing needs, , evolving when more comfortable argument.
Comments
Post a Comment