CakePHP Jquery Ajax indicateur de progression - Mise à jour DIV

Question

J'ai ce qui devrait être une exigence simple, cependant, je tiens à obtenir une opinion sur la meilleure solution. D'abord, j'utilise CakePHP et JQuery sur un serveur de développement LAMP.

Le site utilise un formulaire de recherche simple qui envoie des données via GET/search? Term = xxx

La logique de recherche met en œuvre un certain nombre de chronophage appels à plusieurs API de tiers, actuellement jusqu'à 5 secondes.

Ce dont j'ai besoin, c'est de charger la page le plus rapidement possible, puis de fournir à l'utilisateur final un retour d'information réactif. Je pense que l'implémentation d'un message 'please wait' ou d'un gif animé serait la meilleure approche. Lors de la soumission de la page/de la recherche, un appel Ajax est exécuté vers une URL GATPHP qui déclenche les requêtes intensives, transmet le terme de recherche et répond à un tableau de données pour la mise en page. Il devrait fonctionner de la même manière que les sites de comparaison d'assurance automobile, regroupant des données provenant de sources multiples et fournissant à l'utilisateur final un retour d'information réactif.

Est-ce-que cela semble correct? Quelqu'un peut-il fournir des exemples/URL de code pour consolider ma compréhension?

Merci, Paul

Answer 1

Eh bien, la chose image de chargement peut être fait comme ça:

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(''); 
    }