Witam. Właśnie wpadłem na taki pomysł jak jednocześnie:
- aktualizować przez tzw. AJAX tylko wybrane części strony
- ograniczyć rozmiar przesyłanych danych z serwera
- zachować kompatybilność z przeglądarkami z wyłączonym JS
- a przy tym nie męczyć zbytnio klawiatury
Rozwiązanie opiera się na frameworkach jQuery i CodeIgniter. Do hiperłącz na stronie wystarczy dodać atrybut onclick z wywołaniem funkcji CiAl. Jej drugi argument to tablica zawierająca id elementów do odświeżenia. Po stronie serwera trzeba dodać jeden mały hook.
Client
/show/index.html
<script>
function CiAl(url, ids) {
$.post(url, { 'CiAl_ids' : ids.join(',') }, function(res) {
for (var v in ids) $('#' + ids[v]).html(res[ids[v]]);
}, 'json');
return false;
}
</script>
<h1 id="title">Tytuł</h1>
<a href="http://adres.pl/show/news.html"
onclick="return CiAl(this.href, ['title', 'content'])">Aktualności</a>
<div id="content">Treść</div>
Server
config/hooks.php
$hook['display_override'][] = array(
'class' => '',
'function' => 'main',
'filename' => 'CiAl.php',
'filepath' => 'hooks'
);
hooks/CiAl.php
function CiAl($content, $ids) {
$res = array();
$dom = new DomDocument;
$dom->validateOnParse = true;
@$dom->loadHTML($content);
foreach($ids as $id) {
if (($elm = $dom->getElementById($id)) === null) continue;
$tmp = new DOMDocument();
$children = $elm->childNodes;
foreach ($children as $child)
$tmp->appendChild($tmp->importNode($child, true));
$res[$id] = $tmp->saveHTML();
}
return json_encode($res);
}
function main() {
$CI = &get_instance();
echo isset($_POST['CiAl_ids']) ?
CiAl($CI->output->get_output(), split(',', $_POST['CiAl_ids'])) :
$CI->output->get_output();
}
Hook przy zapytaniu przez Ajax zwraca jedynie wybrane elementy ze strony w formacie JSON. Bez obsługi JavaScriptu zwróci cały dokument ze wszystkimi elementami.
No i teraz mam takie pytanie.
Czy ktoś już to wymyślił przede mną? Czy istnieje już w sieci takie rozwiązanie w formie pluginu czy biblioteki?