AJAX Kurs od podstaw - jQuery

Menu c.d., Wyszukiwarka

Ajaksowe menu działające po wyłączeniu JavaScriptu

Witryna z menu, które nie przeładowuje strony, wymaga przygotowania każdej podstrony w dwóch wersjach: pełnej i okrojonej. Strona w wersji okrojonej zawiera przedrostek fragment-. Jeśli na przykład witryna zawiera dwie opcje menu, które mają ładować pliki abba.html oraz ac_dc.html, to należy przygotować cztery pliki:

[+]

[-]

 

 

 

1. abba.html
2. fragment-abba.html
3. ac_dc.html
4. fragment-ac_dc.html

Listing zwinięty - 4 linii

W menu witryny, w atrybutach href stosujemy nazwy pełnych stron (tj. bez przedrostka fragment-):. Dzięki temu witryna będzie działała po wyłączeniu JavaScriptu:

[+]

[-]

 

 

HTML

1. <ol>
2.    <li><a href="abba.html">ABBA</a></li>
3.    <li><a href="a_dc.html">AC DC</a></li>
4.    ...
5. </ol>
6. <div id="content">

Listing zwinięty - 6 linii

W powyższym kodzie ujawnia się cały urok rozwiązania stosującego jQuery. Jest to bowiem zwykłe menu, jakie byśmy przygotowali wykonując statyczne pliki HTML.

Modyfikację hiperłączy menu w takie, które nie przeładowują strony zapewnia kod zawarty w pliku menu.js (plik ten należy oczywiście dołączyć do każdej pełnej podstrony):

[+]

[-]

 

 

JavaScript

1. $(document).ready(function(){
2.    $('a').click(function(){
3.    $('#content').load(
4.       'fragment-' + $(this).attr('href')
5.    );
6.    return false;
7.    });
8. });

Listing zwinięty - 8 linii

Kolejno:

• wybieramy wszystkie hiperłącza $('a'),
• ustalamy obsługę zdarzenia onclick,
• w obsłudze zdarzenia onclick do elementu posiadającego identyfikator #content ładujemy zewnętrzny plik,
• adres url pobieranego pliku zewnętrznego powstaje z adresu odczytanego z atrybutu href klikniętego hiperłącza this przez dodanie prefiksu fragment-,
• kliknięcie hiperłącza nie może powodować przeładowania strony (return false).

Wyszukiwarka

Wyszukiwarka ajaksowa, której użycie nie przeładowuje strony wykorzystuje formularz oraz element #wyniki:

[+]

[-]

 

 

HTML

1. <form action="index.php" method="get">
2.    <input id="sz" name="szukaj" />
3.    <input type="submit" value="szukaj" />
4. </form>
5. <div id="wyniki"></div>

Listing zwinięty - 5 linii

Działanie wyszukiwarki definiuje następujący kod JavaScript:

[+]

[-]

 

 

JavaScript

1. $(document).ready(function(){
2.    $('#wyniki').hide();
3.    $('form').submit(function(){
4.       $('#wyniki').load('server.php?co=' + $('#sz').attr('value'));
5.       $('#wyniki').show();
6.       return false;
7.    });
8. });

Listing zwinięty - 8 linii

Kolejno:

• zaraz po załadowaniu dokumentu ukrywamy element #wyniki (metoda hide()),
• ustalamy obsługę zdarzenia onsubmit elementu form,
• obsługa zdarzenia polega na załadowaniu zewnętrznego dokumentu do elementu #wyniki (metoda load()) i pokazaniu elementu #wyniki (metoda show()),
• adres URL pobieranego elementu powstaje przez dodanie na końcu adresu sever.php?co= tekstu wprowadzonego w formularzu do elementu o identyfikatorze #sz,
• instrukcja return false zakazuje przeładowania strony.

Wykorzystując odwołania kaskadowe, obsługę zdarzenia onsubmit można zakodować następująco:

 

 

JavaScript

$('#wyniki').load('server.php?co=' + $('#sz').attr('value')).show();

Podana wyszukiwarka, podobnie jak opisane wcześniej menu, działa także po wyłączeniu obsługi JavaScript.

1. Cechy jQuery, Podstawy
2. Podstawy c.d.
3. Selektory CSS
4. Zmiana treści i wyglądu, Zdarzenia
5. Zagadnienia dalsze
6. Menu
7. Menu c.d., Wyszukiwarka