CakePHP Jquery Ajax Progress Indicator - Update DIV

Question

Hi,

I have what should be a simple requirement, however, I am keen to get an opinion on the best solution.

Firstly, I am using CakePHP and JQuery on a LAMP dev server.

The site uses a simple search form that submits data via GET to /search?term=xxx

The search logic implements a number of time consuming calls to multiple third party APIs, currently up to 5 secs.

What I need is the page to load as quickly possible and then provide the end user with responsive feedback. I think implementing a to display a 'please wait' message or animated gif would be the best approach. On page load / search submission, an Ajax call is performed to a cakePHP URL that kicks off the intensive queries, passing the search term, and responds an array of data for layout.

It should work similar to car insurance comparison sites, aggregating data from multiple sources and providing the end user with responsive feedback.

Does this sound correct? Can anyone provide any code examples / URLs to solidify my understanding?

Thanks, Paul

Answer 1

Well, the loading image thing can be done like that:

function()
  {
  ajax_loading_image('.someDivId');
  $.ajax({
    type: "GET",
    url: 'yourUrl',
    data: 'yourGETSubmittedData',
    success: function(msg)
      {
      // do some stuff
      ajax_remove_loading_image('.someDivId');
      }
    });
  }

function ajax_loading_image(div)
  {
  $(div).html('<img src="ajax-loader.gif" alt="loading..."/>');
  }

function ajax_remove_loading_image(div)
  {
  $(div).html('');
  }