long process, wait in animation

[quickcur]

Hi, I am writing a page where user submits a request and waits for the
response. Since the process takes quite some time on the server side, I
would like to show a small animation immediately after user submitting
the request. The animation will be terminated once the response is back
from server.

You can find the same trick on maps.yahoo.com. When you go to that
site, it load a small wheels and says "Loading Yahoo Maps...".

Can anyone tell me how to implement this in javascript, ajax maybe?

Thanks,

qq

 

[zhonghua]

YES,
AJAX CAN HELP YOU SOLVE PROBLEM.

 

[quickcur]

How?

YES,
AJAX CAN HELP YOU SOLVE PROBLEM.

 

[Randy Webb]

zhonghua said the following on 7/7/2006 1:47 PM:

YES,
AJAX CAN HELP YOU SOLVE PROBLEM.

No it won't.

 

[Vincent van Beveren]

Randy Webb schreef:

zhonghua said the following on 7/7/2006 1:47 PM:

No it won't.

I think some people get fed up with ajax this ajax that... hehe... I can
image though. Ajax isn't a magic potion. Its juist what the acronym
says. All the thinking and planning still have to be done (though there
are some excellent frameworks out there).

 

[Vincent van Beveren]

There are a couple of options. Ajax is one of them, but I think its more
complecated then needed. I would sugest submitting into a hidden IFRAME.
You can use the TARGET attribute of the FORM tag for that. You can use
the IFRAME's onload handler (iFrameObject.contentWindow.onload) to
detect when the submit is completed. The current frame you replace with
a page showing the animation.

<form target="..iframe.." .. other attributes...>

... fields

<input type="button" value="send" onclick="sendRequest()"/>
</form>

Scritp:
function sendRequest() {
var theForm = .. get the form
theForm.submit();

location.href = 'waitpage.html';
}

function initIframe() {
var theFrame = ... get the iframe
theFrame.contentWindow.onload = function() {
this.parent.location.href = 'done.html';
}
}

Now I haven't tested this, but the theory should work. The example might
not, but its meant as a guide / example, not as a complete solution.

Vincent


(e-mail address removed) schreef: