AJAX activity indicator

Ai avut vreodată nevoie să arăți un indicator al activității AJAX (cum este în gmail, de exemplu)? Sigur că ai avut nevoie, orice request spre un server trebuie să inștiințeze utilizatorul că se întâmplă ceva! Iată cum poți face acest lucru cu jQuery.

Mark-up

Aici e partea cool, că nu ai nevoie de niciun mark-up. Totul se întâmplă în JS și CSS. Dar de dragul exemplului…

	<body>
		<div id="ajaxIndicator">Loading...</div>
		....

JavaScript

Imediat după ce incluzi jQuery, bagi și bucățica asta de cod:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	$(document).ajaxStart(function() { $('html').addClass('ajax'); }).ajaxStop(function() {  $('html').removeClass('ajax'); });
</script>

Cum probabil îți dai seama, scriptul adaugă/șterge o clasă elementului body atunci când un request AJAX începe sau… se termină. Simplu, nu?

CSS

Păi dacă adăugăm o clasă elementului ce conține toate celelealte elemente, nu ne rămâne decât să afișăm/ascundem un indicator în funcție de acea clasă:

#indicator { background:#c00;color:#fff;display:none } /* se stilizează în funcție de necesități */
.ajax #indicator { display:block }

Enjoy!

4 Comentarii to “AJAX activity indicator”

  1. Nu cred ca e neaparat corecta abordarea..
    Daca iti incepe un request, apoi inca unul (si inca unul si inca unul etc. ca de-aia sunt asincrone) se va opri acel indicator desi mai sunt requesturi in spate care ruleaza..

  2. Staicu Ionuț-Bogdan

    Hmmm… ai dreptate. Înseamnă că se poate face așa:

    var ajaxActivity = 0;
    $(document).ajaxStart(function() {
    $(‘html’).addClass(‘ajax’);
    ajaxActivity++;
    }).ajaxStop(function() {
    ajaxActivity–;
    if( ajaxActivity < == 0 ) { $('html').removeClass('ajax'); } }); [/js] (dacă ai sugestii mai bune, share pls :D )

  3. Imi cer scuze, am vorbit inainte sa ma documentez.
    Era buna prima, dupa spusele jQuery API: http://api.jquery.com/ajaxStop

    Aparent ajaxStop asteapta *toate* requesturile sa se termine..

  4. Staicu Ionuț-Bogdan

    Well.. Na că mi-am luat-o și eu, tot fără să verific.

    Adevărul este că am folosit snippet-ul mai demult unde aveam vreo 5 request-uri simultane și nu am avut probleme.

    Daaar… Soluții sunt. Probleme să fie! :D

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter