Pentru orice site modern, funcționalitatea folosind cererile AJAX nu este ceva nou. În plus, utilizarea solicitărilor AJAX în Joomla! simplifică foarte mult un număr mare de instrumente diferite, pe care le poți dedica unei povesti separate. În acest articol aș vrea să îmi împărtășesc gândurile în legătură cu modul în care nu se utilizează în mod standard parametrul tmpl = component atunci când se execută cereri AJAX și se actualizează blocul de conținut al site-ului. Și, de asemenea, să acorde atenție capcanelor care apar atunci când se utilizează această metodă.
Formularea problemei
În primul rând, este necesar să se formuleze problema pentru a înțelege în ce cazuri este posibilă utilizarea metodei descrise mai jos. Să presupunem că trebuie să actualizăm complet zona de conținut a site-ului. Unitatea principală fără capac, subsolul locului etc. În șablonul site-ului pe Joomla! acest bloc este afișat ca.
Știm, de asemenea, interogarea, cu care puteți obține un nou html. Nu trebuie să creați nici o metodă pentru a selecta datele din baza de date și a le pregăti pentru a fi afișate pe site. Acest lucru este util în special dacă nu suntem dezvoltatorul componentei pentru care dorim să adăugăm funcționalitatea AJAX. Condiția principală este că solicitarea este trimisă către AJAX iar html-ul primit este actualizat în blocul de conținut al site-ului fără a reîncărca pagina.
Exemplu cu Blogul materialelor din Joomla!
Ca rezultat, dorim ca solicitarea AJAX să fie trimisă atunci când sunt făcute clic pe link-uri în blocul de paginare și este actualizat blocul de conținut al paginii cu o listă de materiale noi și o nouă unitate de paginare. În același timp, cunoaștem cererea însăși, este prezentă în href-ul linkului din blocul de paginare. Componenta de management al materialelor din Joomla! este capabil să afișeze navigarea de la o pagină la alta și o listă de materiale de pe o anumită pagină. Aici nu trebuie să inventăm sau să adăugăm nimic. Este suficient să profitați de referința existentă, care este solicitarea noastră GET. Această solicitare va fi trimisă folosind AJAX. De exemplu
Exemplul cu paginarea AJAX în blogul materialelor este mai mult pentru a ilustra principiul și nu este o soluție optimă sau universală.
Despre parametrul tmpl = component
Utilizarea acestui parametru este menționată în documentația oficială pentru Joomla! în contextul creării de pagini pentru componenta funcției de imprimare în fereastra modală. Această funcție funcțională nu ne ajută acum, însă în detrimentul ferestrei modale merită luată în considerare mai detaliat. Particularitatea este că atunci când interogați la orice componentă folosind parametrul tmpl = componenta Joomla! returnează un html care conține o etichetă
cu conectarea tuturor etichetelor meta, css, js, etc. Și în etichetă Conține tot conținutul paginii fără antetul, subsolul și alte elemente suplimentare ale șablonului.
Acest comportament este determinat de prezența fișierului component.php din directorul rădăcină al șablonului site-ului curent. Oficial Joomla! spune că posibilitatea de a crea un astfel de fișier în șablon a apărut în Joomla! versiunea 1.5 și este concepută pentru a forma pagini de materiale imprimabile pe site.
De exemplu, pentru Joomla! 3.6.4 în șablonul protostar. care vine cu CMS, acest fișier are următoarea formă
Toate acestea funcționează bine dacă vrem să afișăm o pagină în fereastra modală, de exemplu pentru imprimare. Dar, odată cu solicitarea AJAX, va trebui să actualizăm conținutul paginii curente a site-ului, iar re-conectarea tuturor scripturilor poate sparge logica comportamentului lor. Desigur, știm deja în cazul în care se află foarte component.php și ar putea schimba după cum doriți, dar acest lucru la rândul său, poate afecta pagina de imprimare (sau într-o anumită parte, nu putem ști în avans modul în care această opțiune, dezvoltatorii care utilizează alte aplicații) . Continuând, vom rezolva sarcina setată fără a modifica acest fișier șablon.
Scriem codificarea paginii materiale AJAX
Să mergem direct la codul exemplului descris mai sus. Scopul nostru este de a face o paginare de la pagina de paginare obișnuită în blogul materialelor AJAX.
Joomla materiale de șabloane de blog!
Pentru a înlocui conținutul paginii curente un nou HTML, vom obține ca urmare a unei cereri AJAX, înfășurați fișier întregul conținut blog.php într-un bloc nou cu id = „blog_base_block“. În același fișier, trebuie să conectați viitorul script AJAX paginația, care este conceput ca un mic plug-in și css fișier jQuery cu stiluri suplimentare (există stiluri pentru a bloca pagina și afișează sarcina icoane pe durata unei cereri AJAX). Ca rezultat, fișierul blog.php va fi schematic după cum urmează
Este demn de remarcat faptul că fișierul jQuery al pluginului și fișierul stil CSS sunt încărcate din dosarul media. Calea către aceste fișiere va fi după cum urmează
În consecință, la conectarea fișierelor, sunt specificate doar calea către folderul component și numele fișierului com_content / jquery.ajax.pagination.js. iar al treilea parametru din funcția de conectare este $ relative = true.
pluginul jQuery pentru paginarea AJAX
Scriptul principal care este responsabil pentru trimiterea cererii AJAX și actualizarea blocului de conținut pe pagina de site este jquery.ajax.pagination.js. Acesta este conceput ca un plugin jQuery. JQuery în sine este deja conectat la Joomla. sau puteți să-l conectați singur în șablon cu următorul cod PHP: JHtml :: _ ('jquery.framework');
În această funcție, pe toate legăturile blocului de paginare, agitația evenimentului pentru clic pe această legătură este atârnată. În primul rând, acțiunea standard este anulată atunci când faceți clic pe ea - aceasta este o salt la adresa URL specificată în parametrul href. Apoi, scriptul preia parametrul href al link-ului și transmite controlul către funcția sendNextPageRequest.
În această funcție, prezența parametrului tmpl = component în legătura primită este mai întâi verificată și, dacă nu există nici un astfel de parametru, acesta este adăugat la acesta. Astfel, la cerere, vom primi conținutul paginii de interes pentru noi fără cod html excesiv. Apoi, funcția de afișare a pictogramelor se numește atunci când se execută interogarea AJAX. Cererea AJAX în sine este efectuată prin metode standard care sunt prezente în biblioteca jQuery.
Cererea AJAX este inițializată după cum urmează
url: nextPageUrl - definește adresa URL a solicitării, în care parametrul tmpl = component este deja adăugat. În acest caz, toți parametrii pentru trecerea la o anumită pagină (pagina 1, 2, 3 etc.) Joomla! adăugați independent când creați o pagină de blog a materialului cu paginare.
tip: 'GET' este un parametru care specifică tipul cererii, în acest caz GET
dataType: "html" este tipul de date primite ca urmare a cererii
La această funcție este necesar să se oprească separat. Se numește când cererea AJAX este executată cu succes și html este primit ca urmare a funcționării sale. Acest cod html este scris în parametrul rezultat și dorim să îl inserăm în locul conținutului existent al paginii. Dar, după cum am menționat deja mai sus, dacă inserați acest html ca atare, toate meta-tag-urile, conexiunile de fișiere js și orice altceva care se află în etichetă sunt duplicate pe pagină
șablonul curent Joomla. Pentru a evita această situație, trebuie să selectăm în acest cod doar blocul principal, care a fost inițial înfășurat într-o etichetăDar aici este o altă rocă subacvatică. Dacă pur și simplu vom transforma html rezultatul într-un obiect jQuery, vom obține o serie de obiecte în care va fi dificil să efectuați o căutare pentru eticheta dorită.
va afișa ceva similar cu ecranul următor
Pentru a face convenabil să căutați tag-ul dorit folosind metodele jQuery, putem crea un wrapper și plasăm html-ul rezultat în el.
Și deja în obiectul rezultat folosind metoda de căutare, găsim eticheta cu conținutul de care avem nevoie, plasându-l într-o variabilă separată. Rămâne doar să înlocuiți conținutul aceluiași bloc pe pagina curentă, care se face pur și simplu folosind metoda jQuery de înlocuit cu.
Această funcție se numește atunci când apare o eroare în timpul executării solicitării AJAX. În acesta, afișăm doar un mesaj de eroare consolei.
Această funcție se numește la sfârșitul solicitării AJAX, indiferent dacă au apărut erori în timpul executării acesteia. În acesta, eliminăm pictograma de boot, care a fost afișată în timp ce cererea AJAX se execută.
Inițializarea pluginului în șablonul de blog
După ce ați terminat lucrul la fișierul jQuery al pluginului, trebuie să îl inițializați în fișierul blog.php. De asemenea, trebuie să adăugați o etichetă care va fi responsabilă pentru afișarea pictogramei de executare AJAX a cererii.
În plus, blocul de paginare este, de asemenea, înfășurat cu o etichetă cu id = "category_blog_pagination_block". care se utilizează la inițializarea pluginului AJAX pentru plugin.
După aceasta, puteți verifica munca de paginare în materialele blogului.
Ca rezultat, am aflat că pentru orice interogare în Joomla! Puteți adăuga parametrul tmpl = component. care vă permite să obțineți numai acea parte a paginii pe care o generează componenta, fără elementele suplimentare ale șablonului. De asemenea, a dat seama cum să adaptați html-ul primit pentru actualizarea pe pagina curentă a site-ului, utilizând metode simple jQuery. Acest lucru înseamnă că, în unele cazuri, nu este necesar să vă scrieți propriile controlere pentru a obține date și pentru a le adapta special la un anumit șablon sau puteți utiliza motorul deja disponibil și universal al motorului Joomla.
Să ne dăm încă o dată atenție faptului că exemplul de paginare AJAX a blogului materialelor servește ca o ilustrare a lucrării abordării descrise. Implementați paginarea AJAX pentru Joomla! sau pentru o altă componentă, puteți utiliza abordări diferite și această metodă nu se pretinde a fi cea optimă.
De asemenea, am folosit un principiu similar în propriile noastre proiecte. De exemplu, în modulul de filtrare a produsului pentru JoomShopping. care este, de asemenea, o ilustrare a activității abordării descrise. Poți să te uiți la munca lui pe demo-site-ul nostru.
Descărcați arhiva cu toate fișierele de paginare AJAX pentru materialele de blog pe care le puteți da clic pe link. Pentru a le instala, copiați fișierele de arhivă în rădăcina folderului instalat cu Joomla.
Testarea a fost efectuată pe Joomla! versiunea 3.6.4 și șablonul standard - protostar. Dar, în același timp, puteți bloca fișierele din blogul de materiale în orice instalat pe Joomla! șablon.
Trimiteți-le prietenilor: