Pseudo Ajax loading effect with Flash and JQuery

While working on a project where our app is communicating with an external API we had the following issue: form submission can take up to 30 seconds to get the response back from the external API. Basically we have a form that does availability check for hostel reservation to an hostel reservation API. Depending on the number of results returned, the API can take a long time to respond and this could potentially discourage user from staying on the site waiting for results.

We could have done the call using AJAX at first but we decided to go with standard PHP post method with the API. So we had to find a way to let the user know something is working back-end while waiting when it is loading. It is like when you are on the phone with a large corporation while waiting for the tech support to answer, if there is no music or message telling us to wait we will simply hang up.

Solutions: put an animated gif next to the form submit button to show an animation while user is waiting.

Problem: Well, animated gif can suck in some browser when a post request is submitted and waiting for the server response, the animated gif just stuck on one frame and it is no more an animated gif. This looks even worst as it appears to be broken. Animated gif are very good with Ajax call but for doing a pseudo ajax on post/get call, no go.

New Solutions: using flash loading animation to replace the animated gif.

So I just pick this package from Active Den: Loading Animation. Then I select the right one to show beside my submit button:

So just below the search button I added the following code:

<div id="loading-search" style="display:none;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="70" height="20">
<param name="allowFullScreen" value="false" />
<param name="movie" value="loading-search.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="loading-search.swf" quality="high" wmode="transparent" width="70" height="20" name="loading-search" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>

Make sure to set the wmode to transparent so it doesn’t have a solid background. Now we just need to have to display it when the form is submitted. In this case there is a javascript validation so we just put this after the validation with jquery function:

$("#loading-search").show();

Maybe in your case you can use this line in the .submit() from jquery.

Now we have a nice pseudo Ajax animation, looks like ajax but it’s not.