Vyskakovacie okná na stránke
Poďme sa nateraz vrátiť k domovskej stránke nášho projektu, na ktorej sme v tomto semestri naprogramovali kompletnú obsluhu dát v databáze v tabuľke users. V tomto momente môžeme vykonávať všetky akcie, ktoré by sme si želali, čiže vkladať, mazať a meniť dáta. Chcelo by to ale popridávať ešte niečo navyše, aby to bolo aj nejako bezpečnejšie a prehľadnejšie. Zamyslite sa práve nad tým mazaním dát, ktoré vykonávame jedným kliknutím na odkaz Vymazať záznam. Toto riešenie je síce efektívne, nie je však úplne správne, resp. optimálne. Veľmi ľahko sa môže používateľovi stať, že klikne na zlý riadok alebo že len pri pohybe myšou ponad prvky stránky nechtiac klikne na tento odkaz. Následne je záznam nenávratne vymazaný.
V praxi sa zvykne práve kvôli takýmto situáciám najmä dôležité akcie, akou je napríklad vymazanie dát z databázy, nejako ošetriť, resp. pridať im viacnásobné potvrdenie. Najčastejšie sa asi stretávate s niečím takým, že po kliknutí na podobný odkaz vám v prehliadači vyskočí malé okienko s hláškou, že či ste si istý, že chcete naozaj daný záznam vymazať. Keď vám takéto okno vyskočí, akcia sa zbrzdí – presmerovanie na daný odkaz sa nevykoná, ale vykonávanie akokeby programu – kódu je pozastavené a čaká na vašu odpoveď. V tomto momente si každý používateľ ešte raz uvedomí, kde klikol a či to naozaj chce zmazať. Ak si uvedomí, že sa pomýlil, tak klikne na nie, okno sa stratí a akcia – presmerovanie na odkaz (čiže vymazanie), sa nevykoná. Nepotvrdenie okna akokeby zrušilo akciu – presmerovanie, resp. vykonanie odkazu. V prípade potvrdenia vyskakovacieho okna sa akcia normálne vykoná. Čiže načíta sa stránka, ktorá sa po kliknutí na odkaz má načítať a vykoná sa jej kód, takže sa odkaz vymaže.
Presne toto si ideme teraz pridať do našej stránky a práve toto sa robí pomocou jazyka JavaScript. Poďme si teda rozobrať náš problém, aby sme pochopili, čo nás čaká. V prvom rade musíme v kóde povedať, aby sa po kliknutí na tlačítko Vymazať záznam zobrazilo vyskakovacie okno. Potom musíme v kóde zadať, čo má byť vo vyskakovacom okne napísané, resp. zobrazené (aký text – hláška) a čo má byť zobrazené v možnostiach odpovede (áno alebo nie a podobne).
Ako sme si už skorej povedali, kód JS sa vo väčšine spúšťa na základe vykonania nejakej akcie – udalosti. Podľa toho sú pomenované aj špeciálne udalosti (event – udalosť), ktoré je možné pridať ako atribút do prvkov jazyka HTML. Takýchto udalostí je viacero, našemu odkazu musíme pridať event, ktorý popisuje kliknutie na daný prvok. Názov tohto eventu je prisluchájúci k jeho popisu – onclick (on click – na/po kliknutí). Hodnota týchto atribútov môže byť rovno kód v jazyku JS, toto ale nie je veľmi pekný spôsob, keďže to zaberie v kóde veľa miesta a kód sa stane neprehľadný. Lepšia varianta je použiť ako hodnotu týchto atribútov názov funkcie, ktorú máme niekde v časti jazyka JS definovanú (na aktuálnej stránke).
Takže naša úloha je jasná, musíme si napísať funkciu v jazyku JS (podobne ako v jazyku PHP) a jej zavolanie vyvoláme kliknutím na tento odkaz. Na odkaz neklikajte, aby ste si zbytočne nepovymazávali záznamy v databáze. Môžete si ale narýchlo vytvoriť niekoľko testovacích záznamov tým, že len vyplníte priezvisko hocičím z klávesnice a dáte uložiť. Potom si to na týchto záznamoch budeme testovať. Kód by mohol teda vyzerať takto:
index.php:
…
echo '<a href="index.php?id_user='.$data[$i]['id'].'" onclick="showConfirm()">Vymazať záznam</a>';
…
</div>
<script>
function showConfirm(){
//kod funkcie
}
</script>
</body>
</html>
Ako sme si povedali, do odkazu sme pridali atribút s názvom onclick, ktorého hodnota je zavolanie našej funkcie (názov funkcie a zátvorka s parametrami, podobne ako pri PHP). Následne sme v časti script, ktorý sme dali na koniec kódu – pred ukončenie body (toto je dobrý zvyk, aby to bolo na konci na jednom mieste) zadeklarovali našu funkciu, zatiaľ so žiadnym kódom. Všimnite si, že aj komenty sa zadávajú rovnako ako v PHP (cez dve lomítka). Teraz musíme do tejto funkcie vložiť kód, ktorý nám zobrazí vyskakovacie okno, ktoré budeme môcť potvrdiť alebo zrušiť.
Telo tejto funkcie musí pre odkaz vrátiť hodnotu false (pre zrušenie) alebo true (pre povolenie), aby sme ovplyvnili jeho fungovanie. Tým pádom musíme do hodnoty atribútu onclick zadať pred zavolanie funkciu aj slovo return, aby bolo jasné, že odkazu chceme vracať hodnotu, ktorú vráti daná funkcia. Ak si nateraz dáme len do funkcie natvrdo vrátenie false, odkaz nebude nikdy fungovať, pretože pridaním onclick a vrátením false sa akokeby deaktivoval:
index.php:
…
echo '<a href="index.php?id_user='.$data[$i]['id'].'" onclick="return showConfirm()">Vymazať záznam</a>';
...
function showConfirm(){
return false;
}
Keď si teraz skúsite klikať na odkaz, nič sa nestane. Naša funkcia vrátila false a táto hodnota bola vrátená aj odkazu vďaka slovu return pred zavolaním funkcie v hodnote atribútu onclick. Ako vidíte, práve sme jazykom JavaScript ovplyvnili fungovanie stránky, konkrétne prvku odkaz. To bol ale len medzikrok pre lepšie pochopenie, ako to funguje.
My ale potrebujeme vyvolať potvrdzovacie okno, podľa ktorého odpovedi sa náš odkaz vykoná (return true) alebo nevykoná (return false). Na to slúži vstavaná funkcia jazyka JS s názvom confirm (potvrdiť), ktorá zobrazí potvrdzovacie okno. Toto okno bude defaultne obsahovať dve tlačítka, jedno na potvrdenie (áno/ok) a jedno na zrušenie (zrušiť/cancel). Text týchto tlačítiek by sa mal zobrazovať podľa vášho prehliadača a jeho nastavení (jazykových). Podľa toho, na čo používateľ klikne, vracia táto funkcia true alebo false. Naša úloha je jasná, stačí iba vrátiť to, na čo používateľo klikol. Kód by mal teda vyzerať takto:
index.php:
function showConfirm(){
var answer = confirm("Naozaj chcete vymazať daný záznam?");
if(answer){
//vykonanie, ak pouzivatel potvrdi confirm okno - odkaz sa vykona
return true;
}else{
//vykonanie, ak pouzivatel zruzi confirm okno - odkaz sa nevykona
return false;
}
}
Ak si tento kód vyskúšate, tak naozaj po zrušení okna sa nič nevykoná, odkaz akokeby nefungoval. Po kliknutí na OK sa však akcia vykoná tak, ako predtým. Pekné nie? Práve ste veľmi prakticky použili jazyk JavaScript a nebolo to pritom ani také ťažké, iba ste sa naučili jednu funkciu, ktorá to spôsobí (confirm) a všetko ostatné už ovládate a chápete (princíp funkcií, parametre, return).
Táto funkcia sa v praxi používa veľmi často a v podstate všade, kde je pre istotu nutné pridať ešte medzikrok pred vykonaním nejakej akcie na stránke, skoro vždy najmä pri mazaní. Ak by sme to mali zhrnúť, tak ste sa naučili, ako je možné vykonať/spustiť kód jazyka JavaScript – pomocou jeho eventov, ktoré je možné pridať ako atribút elementu, na ktorý sa event bude vzťahovať. Taktiež ste sa naučili, kde a ako sa píše kód v JS a aj ste videli, že sa skutočne stránka nerefrešla pri jeho spustení, že sa spustil akokeby iba u nás - v prehliadači.