spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Payter Gašparík 8.10.2012
Hodnoť článok:
8 0

Ako AJAXovo uložiť koncept a otvoriť náhľad v novej karte prehliadača

Ak ste niekedy písali článok tu na zajtra.sk alebo vo Wordpresse, určite ste si všimli zaujímavé riešenie náhľadu rozpísaného konceptu v novej karte. Dnes by som chcel v krátkom tipe ukázať, ako si takúto srandu vytvoriť.

A aký je vlastne problém?

Aby som vysvetlil v skratke základný princíp funkčnosti, musím najprv vysvetliť, v čom je háčik. Vytvoriť nejaký jQuery skript, ktorý jednoducho pošle AJAXovo dáta na uloženie na server a potom otvorí novú kartu, je v princípe jednoduché. Lenže takto to nefunguje. Tu práve vzniká problém, pretože prehliadače blokujú všetky nové okná, ktoré priamo nesúvisia s kliknutím na nejaký element. Callback funkcia, ktorá sa vykoná po ukončení AJAXového volania, ale nesúvisí s kliknutím, preto prehliadač takéto vytvorené okno zablokuje.

Ako s tým teda vybabrať?

Riešenie je v podstate jednoduché. Finta spočíva v tom otvoriť novú kartu hneď po kliknutí na element, uložiť si toto novootvorené okno do premennej a až potom, ako sa vykoná AJAXové volanie, zmeniť URL v otvorenom okne na požadovanú adresu s naším náhľadom.

A teraz ako to funguje v praxi...

Pre ukážku tohto princípu som pripravil demo. Kompletný zdroják nájdete na GitHub aj s komentármi. Poďme k tomu, ako to funguje v bodoch.

1. Formulár

Formulár sa nachádza v súbore index.php. Nie je ničím výnimočný. Nachádza sa v ňom iba textarea a submit. Tento formulár sa odosiela AJAXovo pomocou skriptu v /js/scripts.js. Vo <form> sú tiež zapísané data atribúty a action atribút, pre adresy potrebných súborov.

2. Otvorenie nového okna

Pri pohľadne do /js/scripts.js uvidíme event, ktorý bude spustený po submitnutí formulára. Na konci je samozrejme "return false", aby sa formulár nesubmitol štandardným spôsobom. Keď nastane táto udalosť, získame z <form> adresy skriptov, potom serializujeme dáta a otvoríme novú kartu a uložíme si ju do premennej.

var previewWindow = window.open(loadingUrl, "preview");

Ako prvý parameter sme vložili premennú loadingUrl (v tomto prípade obsahuje loading.php). To spôsobí, že sa otvorí v novej karte iba vágny dočasný text "Načítavam náhľad...".

Ako druhý parameter som vložil reťazec "preview" a toto je kľúčové. Tento parameter udáva "target", teda názov toho, kam otvoriť. Dôležité je to preto, lebo to zabezpečí, že ak sa už v prehliadači nachádza otvorená karta s názvom "preview", tak už neotvorí novú kartu, ale znovu načíta obsah v tejto karte. Vo svojom projekte môžete použíť reťazec, aký chcete.

3. Odoslanie dát

Dáta sú odoslané AJAXovo pomocou jQuery do php súboru na spracovanie, v tomto prípade ide o súbor ajax-save.php. V tomto skripte sa iba jednoducho uložia prijaté dáta do $_SESSION. V reálnej aplikácii by tu bola zrejme nejaká query pre aktualizáciu daného napr. článku.

Akonáhle sa vráti odpoveď zo skriptu, spustí sa callback funkcia, v ktorej sa najskôr skontrolujú chyby. Ak je všetko v poriadku, tak ideme do vetvy so zmenou URL adresy otvoreného okna.

4. Zmena adresy otvoreného okna

Keďže uloženie dát prebehlo v poriadku, môžeme zmeniť adresu otvoreného okna, ktoré máme uložené v premennej previewWindow:

previewWindow.open(previewUrl, "preview");

A to je celé! Do našej otvorenej karty sa načíta adresa z premennej previewUrl (tu je to preview.php). Daný skript obsahuje iba formátovaný výpis z $_SESSION premennej, do ktorej sme si predtým AJAXovo uložili dáta.

Druhý parameter je "preview". Takisto, ako sme to zadali pri otváraní karty, takže sa nám náš náhľad načítal do už otvorenej karty.

Na záver

Dúfam, že niekomu tento krátky tip pomôže ;) Tiež si pozrite aj manuál k window.open() , ak by ste o metóde chceli vedieť viac.

Aby som nezabudol na malý tip...

V deme mám použitý tiež spin.js, ktorý sa zobrazí pri odosielaní formulára. Tento malý plugin dokáže vytvoriť pekný animovaný spinner bez použitia animovaných gifov.

Peter Payter Gašparík Peter Payter Gašparík

Som freelancer na plný uväzok ;)


Hodnoť článok:
8 0

1 komentár k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 František Čaník 22.10.2012 01:25:31
No, takéto veci sú dá sa povedať bežné aj keď niekedy premýšlam na čo sú dobré napríklad veci ako "SPIN.js" a podobné. Ale mne osobne sa napríklad páči to, že Colorzilla aktualizovala svoj systém na tvorbu gradientových pozadí a pridali podporu pre IE9 (http://www.colorzilla.com/gradient-editor/). To mi príde použiteľnejšie ako nejaký spin.js, ktorý vytvára animáciu. Mimo to, existujú krajšie spôsoby ako animovať niečo ako loader http://www.padolsey.net/p/Sonic/repo/demo/demo.html
Zajtra.sk > Programovanie > JS/jQuery > Ako AJAXovo uložiť koncept a otvoriť náhľad v novej karte prehliadača


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama