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

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.