搜索后预加载屏幕？

Question

i have a search box flight search in my home page (similar to http://www.travelpack.com/ )

When you search in http://www.travelpack.com/ you will see a "We are searching for flights that meet your requirements. Please wait... " screen i didn't have it and i want a similar screen in my site.

the problem is that when i click search from my home page i am using javascript to submit the form

document.flight_search.action = 'php/flt-show-availability.php?&s=1&Sort=P';
            document.flight_search.method = 'post';
            document.flight_search.submit();

how can i create a loading screen similar to that in the travel pack.

Answer 1

in jQuery one would show the screen, and forward after the ajax call (which tells the appilcation to generate a result) is completed, much like that:

$('.search').click(function(event){
  event.preventDefault();
  $('#loadAnimationWrapper').show();

  $.ajax({
    cache: false,
    async: false,
    type: 'GET',
    url: '/your/callback/url',
    success: function(data) {
      // your forwarding code
    }
 });
});

But in My Opinion, the example page you give has the Problem that the content shown does is not represented in the url, so, for example you can't give the url to somebody else to let him have a see at the results.

So, ajax magic - sure, but be careful.

Answer 2

You could redirect to the result page, hiding the list of results behind a div that contains the loading message. Then you receive the results via javascript (ajax or similar) and build up the list in background.

When the server is finished searching your request finishes and you can hide the div that contains the loading message (for example in the callback function).

Answer 3

well, you can send your form via ajax-request and wait for the answer. while waiting display the loader.

if the request succeeds you can react differently: - replace the content - goto the generated output page