přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (36) – interaktivita a AJAX v jQuery Mobile

Altair

jQuery (36) – interaktivita a AJAX v jQuery Mobile

jQuery

Do interaktivního chování mobilních aplikací lze s výhodou zapojit i AJAX a načítat data ze serveru v okamžiku, kdy jsou potřeba. 


reklama

Dynamické načítání stránek

Jednotlivé stránky v rámci aplikace nemusejí být definovány jen napevno. Lze je také načítat ze serveru technologií AJAX – koncepce jQuery Mobile s tím přímo počítá. Hodí se to hlavně v situacích, kdy obsah některých stránek závisí na uživatelské činnosti na jiných stránkách.

Existují v zásadě dva způsoby načítání stránek:

  1. při přepínání na stránku,

  2. načtení nové stránky a přidání do kontejneru.

Postupně se na oba způsoby podíváme.

Načtení stránky při přepínání

Přepínání mezi stránkami znáte už z minulého dílu seriálu. Tam se ale přepínalo jen mezi staticky načtenými stránkami (obsaženými přímo v základním souboru). Lze ale obsah stránky také načíst až v okamžiku, kdy se na ni přepíná.

V některých případech bývá vhodnější načítat jen nějaké jednoduché hodnoty, které se ve stránce změní. Tam je pak postup obdobný jako v běžném jQuery.

Údaje potřebné pro načtení stránky se jednoduše předají do metody change() objektu kontejneru stránek:

var opts = {
  dataUrl: '/page.php?p=1',
  reload: true,
  showLoadMsg: true
};

$(':mobile-pagecontainer').pagecontainer('change', '#page1', opts);

Parametry se – jako obvykle – definují v objektu. Položka dataUrl říká, odkud se stránka načte. Nastavením reload na hodnotu true (výchozí je false) se vynutí nové načtení i v případě, že už byla stránka dříve načtena (vhodné pro aktualizaci dat). A konečně showLoadMsg říká, že se má během načítání zobrazovat informace, že se data načítají.

Další použitelné parametry najdete v dokumentaci.

Načítání nové stránky

Kromě existujících stránek můžeme načítat i úplně nové a vkládat je do DOM (do kontejneru stránek). Je to velmi podobné jako při načítání existujících stránek, jen se použije jiná metoda a zároveň musíme říct, jak stránku vytvořit.

var opts = {
  type: 'post',
  showLoadMsg: true
};

$(':mobile-pagecontainer').pagecontainer('load', '/createpage.php?p=5', opts);

Tady se URL předává přímo jako argument metody. V objektu s parametry lze nastavit další vlastnosti, v tomto případě je to mj. typ požadavku (HTTP metoda). Identifikátor stránky je potřeba přenést v atributu hlavního elementu. Může být nastaven i atribut data-role, ten lze ale změnit i parametrem role v objektu předávaném metodě load() – toto platí i pro načítání při přepínání stránek.

Události při načítání a přepínání

Přestože si lze leckdy vystačit i s pouhým načtením stránky a případně vložením do kontejneru, mnohdy se nevyhneme dalším operacím, které s načítáním souvisejí – už proto, že je vhodné reagovat alespoň na chybové stavy a dát uživateli vědět, že se něco nepovedlo. Další události souvisejí s přepínáním stránek.

Asi nejlepší je, se na to podívat z hlediska časového – jak postupně události nastávají:

  • beforechange – před změnou (přepnutím) stránky včetně načítání,
  • beforeload – před načítáním stránky ze serveru,
  • load – po úspěšném načtení stránky,
  • loadfailed – po neúspěšném načtení stránky,
  • changefailed – po neúspěšném přepnutí stránky (pokud se načítala ze serveru a to selhalo),
  • beforetransition – před zahájením přepínací animace,
  • beforehide – před zahájením animace mizení stránky,
  • beforeshow – před zahájením animace zobrazení stránky,
  • transition – po dokončení přepínací animace,
  • hide – po dokončení animace mizení stránky,
  • show – po dokončení animace zobrazení stránky,
  • change – po úspěšném dokončení změny (přepnutí stránky).

Do obsluhy událostí se předává řada parametrů, které lze využívat. Takto se například obslouží událost loadfailed:

$(document).on('pageloadfailed', function(e, data) {
  switch (data.textStatus) {
    case 'timeout':
      …
      break;
    case 'parseerror':
      …
      break;
    default:
      …
  }
};

V tomto příkladu se obsluha nastavuje přímo celému dokumentu, šla by ale samozřejmě nastavit i kontejneru stránek (který je zatím vždy jen jeden, i když se do budoucna počítá s tím, že jich bude moci být více). Selže-li načtení stránky, podle druhu chyby se na událost různým způsobem zareaguje.

Odstranění stránky

Pokud už stránku nepotřebujeme, můžeme ji odstranit – a to úplně stejně jako jiný objekt z DOM:

$('#page9').remove();

Specialitou je tu jen to, že lze kontejneru nastavit obsluhu události remove, která dostane i informaci o tom, na kterou stránku se po odstranění přejde.

Podrobněji o stránkách

Příště se na stránky podíváme podrobněji. Nemusejí totiž fungovat jen jako „nějaký obsah“, nýbrž podporují i určitou vlastní inteligenci.



Nahoru

(Jako ve škole)
Průměr: 1,00 | Hodnotilo: 1
 

Top články z OpenOffice.cz

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Lukáš Jelínek

Lukáš Jelínek

Šéfredaktor LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře a podniká v oblasti informačních technologií. Ve volném čase rád fotografuje, natáčí a stříhá video a také se věnuje (v Čechách poměrně málo známému) powerkitingu.


  • Distribuce: Debian, Kubuntu
  • Grafické prostředí: KDE
  • Hodnocení autora: ***

| proč linux | blog



Public Relations

SUSECON 2017, světová konference o open source, poprvé v Praze!

Přihlaste se na globální akci zaměřenou na Linux, OpenStack, CEPH, Cloud Foundry, kontejnerová řešení Docker, NFV a další open source technologie.

Pokračování ...



Public Relations

Využijte letní akce na předplatné časopisu IT Systems!

Nenechte si ujít příležitost dostávat pravidelně informace ze světa podnikové informatiky a předplaťte si časopis IT Systems. Udržujte si přehled v oboru a získejte inspiraci, jak využít informační technologie pro vaši firmu nebo organizaci. K pořízení nebo obnovení předplatného IT Systems je nyní ideální příležitost. Právě totiž probíhá letní akce, v rámci níž je možno získat roční předplatné jen za 599 Kč.

Pokračování ...


Redakční blog

Pavel Fric

Pavel Fric, 28. únor

Lollypop


Pavel Fric

Pavel Fric, 29. listopad

Palapeli


Pavel Fric

Pavel Fric, 19. listopad

Amarok


Všechny blogy »