jQuery: AJAX şi (alte) preloadere


Continuăm să vedem cât de uşor putem să implementăm comportamentul AJAX folosind jQuery. În exemplele de ieri încărcam nişte div-uri, folosind AJAX, deodată cu încărcarea paginii. Pentru o variaţie să încercăm acum încărcarea AJAX la click. După cum intuiţi, este foarte uşor dar apar nişte modificări la afişarea gif-ului animat. Deschideţi exemplul de aici (arhiva cu toate exemplele acestui articol se găseşte aici). Dacă vă uitaţi în sursă vedeţi că încărcarea se face acum la un click pe un link.

<a href="#" onClick=’$("div#dhtml").
load("fisier.php",{nume:"Ion Popescu",varsta:30});’>
CLICK AICI</a>

Trebuie însă ca acum să ascundem explicit div-ul cu animaţia (desigur, folosind funcţia hide) şi să îl afişăm când începe procesarea AJAX, respectiv să îl ascundem la finalul procesării. Deja codificarea acestui comportament în jQuery nu ne mai este străin. Vom scrie:

$(’#incarcare’).hide();
$(’#incarcare’).ajaxStart(function() {
  $(this).show();
}).ajaxStop(function() {
  $(this).hide();
});

Codul acesta nu este însă cel folosit în sursă! Da, pentru că am încercat să duc puţin mai departe aplicaţia demonstrativă. Cum ar fi ca animaţia să apară în mijlocul paginii? Pentru aceasta ne vom folosi de un cod din cartea Learning jQuery (după cum scrie Daniel), lucrare pe care am pomenit-o deja în materialele anterioare (probabil pe piaţa românească nu există, dar sunt metode şi metode de a o obţine 😉 ). Iată secvenţa jQuery, modificată însă pentru nevoile noastre:

$(document).ready(function() {
  $(’body’).prepend(’<div id="incarcare"></div>’);
  $(’#incarcare’).prepend(’<img src="animatie.gif" hspace="20" vspace="20" border="0" /$gt;’);
  $(’#incarcare’).css({ display : "none", position : "absolute", width: "200px" });
  $(’#incarcare’).css(’top’, ($(window).height()/2) + $(window).scrollTop() - ($("#incarcare").height()/2));
  $(’#incarcare’).css(’left’, ($(window).width()/2) - ($("#incarcare").width()/2) );
  $(’#incarcare’).ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $(this).hide();
  });
});

Ultimele linii nu au nevoie de explicare (cele cu ajaxStart şi ajaxStop – am vorbit în materialul trecut). Să vedem primele linii: mai întâi la tagul body al paginii adăugăm un div cu id-ul incarcare; în respectivul div adăugăm apoi animaţia; nu va fi vizibilă pentru că în următoarea linie prin css spunem să fie ascunsă şi poziţionată absolut în pagină; această poziţionare ne permite prin următoarele două linii să aşezăm div-ul (invizibil la început, nu uitaţi) chiar în mijlocul paginii. Aici apare însă o problemă: jQuery nu are instrumentele pentru a afla dimensiunea ferestrei. Codul de mai sus funcţionează doar apelând la un plugin numit Dimensions. Şi uite aşa păşim scurt pe tărâmul pluginurilor jQuery. Acestea sunt tot fişiere JavaScript, ca librăria jQuery, care extind funcţionalitatea. Partea bună este că în acest moment nu ne interesează nimic mai mult decât să nu uităm să includem şi fişierul Dimensions ca fişierul jQuery. Dacă vă uitaţi la sursa exemplului nostru veţi vedea că în head sunt incluse două fişiere acum:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dimensions.js"></script>

În arhivă aveţi inclus şi fişierul pluginului Dimensions. Pentru a nu ne abate de la ce am pornit să facem nu mai reţinem decât atât: datorită includerii acestui plugin div-ul cu animaţia va fi poziţionat pe mijlocul paginii. La început este ascuns, iar liniile de cod de mai sus ne arată că div-ul este afişat şi ascuns când începe, respectiv se termină procedura AJAX. Rezultatul îl puteţi vedea live (primul link, de sus de tot). Până se ia conţinutul de pe server central pe pagină apare o animaţie.

Cum deja stăpânim bine jQuery (nu???) ne permitem să ducem exemplul mai departe. Vedeţi aici. Dacă nu aţi observat diferenţele atunci permiteţi-mi să le subliniez:

– avem buton în loc de link, care dispare după încărcarea AJAX (păi ce nevoie mai avem de el? îl ascundem!)
– textul legendei ("Va trebui sa dati click pentru a se incarca prin AJAX") devine după încarcarea AJAX "Multumim pentru ca ati dat click!" (normal, nu? nu poate rămâne acelaşi text)
– în fine, animaţia nu mai este acum doar un gif animat: este un div cu fundal şi bordură, cu text, care apare cu fadeIn şi se dispare cu fadeOut (arată ceva mai bine).

Nu mai indic aici cum: dacă aţi urmărit lecţiile anterioare ştiţi exact, dacă nu puteţi lua arhiva unde se află întreg codul. Câteva observaţii însă: în timpul unei operaţiuni AJAX, aceasta ar putea fi compromisă dacă utilizatorul dă click pe butoane din pagină sau modifică ceva date. Nu este cazul "aplicaţiilor" noastre, dar problema teoretică există. Afişarea centrală a animaţiei ar trebui (ca să vorbim de ceva profesionist) să fie însoţită de o blocare a accesului la celelalte elemente ale paginii. Ups… cum să facem aşa ceva? Apelăm la un alt plugin 😉 !

jQuery BlockUI este tocmai ce ne trebuie. Îl vedeţi în acţiune aici. Putem renunţa la pluginul Dimensions şi includem în schimb fişierul de la BlockUI. Codul este extrem de banal. Având butonul

<input type=button id=clickarata value="Click aici">

codul jQuery arată astfel:

$(document).ready(function() {
  $(’#clickarata’).click(function() {
    $.blockUI("<h3><img src=animatie3.gif vspace=20 hspace=20 align=absmiddle /> Asteptati putin...</h3>");
    $("div#dhtml").load("fisier.php",{nume:"Ion Popescu",varsta:30});
  });
  $().ajaxStop(function() {
    $.unblockUI();
    $("#clickarata").hide();
    $("#legenda").html("Multumim pentru ca ati dat click!");
  });
});

După cum vedem, codul pentru blocarea paginii (care, punând un gif animat, slujeşte şi de preloader) este de exact două rânduri (blocare şi deblocare), în rest fiind alte operaţiuni. Se putea mai compactat? Nu. Mai simplu? Nu. Un click în pagină este acum imposibil. Chiar şi CTRL+R pentru reîncărcarea paginii este blocat. Excelent! Acum utilizatorul nu poate decât să vadă mesajul de invitare la aşteptare. Iar BlockUI este o componentă puternică: puteţi bloca fie întreaga pagină, fie doar o parte a ei (unde sunt controalele ce pot ameninţa procesul AJAX, de exemplu). Şi câte nu ar mai fi de spus…

Cum nici eu şi nici Dvs nu cred că intenţionăm să ne dăm doctoratul din preloadere pentru AJAX pun aici punct acestui material care a mai solidificat unele cunoştinţe dar mai ales ne-a arătat cât de simplu sunt de folosit pluginurile: se includ ca librăria mamă şi se folosesc funcţiile definite. Ar fi cazul să trecem la nişte probleme ceva mai avansate dar şi mai practice. Evident, în materialul următor…

Observaţie generică: nu copiaţi şi lipiţi codurile indicate în aceste articole dat fiind că uneori liniile sunt "frânte" ca să încapă în design, şi în plus includ simbolurile apostrof şi ghilimele diferite de cele standard. Fiecare articol vă oferă o arhivă pentru studiu (cu tot ce este dezbătut în articol). Dacă doriţi totuşi să folosiţi secvenţe de aici asiguraţi-vă că în loc de ’ puneţi ’, că mai faceţi orice modificări sunt necesare la cod. Dacă sunt probleme cu oricare din fişierele oferite ca suport prin aceste articole vă rog frumos să îmi daţi de ştire.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. Flo spune:

    Pentru ce atâta Dimensions? heehe

    #incarcare
    {
    width: 32px; height: 32px;
    position: absolute;
    top: 50%; left: 50%;
    margin: -16px 0px 0px -16px;
    z-index: 99999;
    background: url(loading.gif);
    display: none;
    }

  2. tudorel spune:

    Am cautat pe n site-uri exact chestia asta…
    Nu ma asteptam sa o gasesc exact pe un site romanesc…
    Bravo… mersi mult…


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *