Znacznik base i nowa wersja tabs w jQueryUI

Wczoraj na jednej ze swoich stron zdecydowałem się zaktualizować wersję jQuery UI z 1.8.23 do 1.9.2. Zauważyłem kilka zmian w tabs, a ponieważ właśnie rozbudowywałem tabs na tej stronie stwierdziłem, że lepiej teraz zmienić wersję o 0.1 niż później o więcej. Sprawa wydawała się banalnie prosta, wrzucę nowe pliki, podmienię wpisy w head i będzie działać jak nic, w końcu, co to za aktualizacja o 0.1. Spędziłem nad tym pół dnia! 🙂

Używałem przykładowego banalnego kodu:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">Proin elit arcu, rutrum commodo...</div>
   <div id="tabs-2">Morbi tincidunt, dui sit amet facilisis feugiat...</div>
   <div id="tabs-3">Mauris eleifend est et turpis. Duis id erat...</div>
</div>

Co tu może pójść nie tak w czasie aktualizacji?!

Otóż może. Po aktualizacji w pierwszej zakładce zaczęła mi się ładować strona główna, tam znów zaczęła się ładować strona główna, potem znowu… potem znowu… jednym słowem przeglądarka wpadała w pętlę. Wracam do poprzedniej wersji – śmiga jak trzeba! What the hell!?

Po przewertowaniu internetu, wcale nie tak od razu znalazłem, że problem tkwi w znaczniku <base>, którego używam w nagłówku strony.

W starszej wersji nie miał on znaczenia – kod działa w banalny sposób, biblioteka rozpoznawała po prostu, że skoro href ma wpisane „#tabs-1″ odnosi się do zakładki o ustawionym id=”tabs-1”. Kliknięcie linku powodowało po prostu otwarcie zakładki o odpowiednim id. W nowej wersji została dodana obsługa zakładek pobieranych dynamicznie ajaxem, co komplikuje nieco problem. Nowa wersja (ze względu na wspomniany wcześniej ajax) musi rozróżnić czy dany link odnosi się do bieżącej strony, czy do innej, inaczej mówiąc czy ma załadować zawartość lokalnego div’a, czy pobrać dane za pomocą ajaxa.

Ponieważ używam Zend Framework, moje zakładki znajdują się na podstronie o adresie controller_x/action_y. W atrybucie href znacznika base miałem wpisany tylko slash, więc pierwszy link w tabsach wskazywał na adres /#tabs-1.  Nie jest to zatem lokalny link, bo lokalny wyglądałby: /controller_x/action_y#tabs-1. Dlatego właśnie do mojej zakładki ładowała się strona główna i stad to zapętlenie. Niestety dla mnie jedynym rozwiązaniem okazuje się modyfikacja linków w html’u. Zatem poprawnym kodem w tym przypadku jest:

<div id="tabs">
   <ul>
      <li><a href="controller_x/action_y#tabs-1">Nunc tincidunt</a></li>
      <li><a href="controller_x/action_y#tabs-2">Proin dolor</a></li>
      <li><a href="controller_x/action_y#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">Proin elit arcu, rutrum commodo...</div>
   <div id="tabs-2">Morbi tincidunt, dui sit amet facilisis feugiat...</div>
   <div id="tabs-3">Mauris eleifend est et turpis. Duis id erat...</div>
</div>

Poniżej link do dyskusji dlaczego nie można się spodziewać wprowadzenia do tabs parametru typu „forceLocal”, który sprawiłby, że kodu html nie trzeba by modyfikować. Nie chce powtarzać argumentów z dyskusji, ale wygląda na to, że wielu programistów spotka się z podobnym do mnie problemem, bo autorzy jquery ui chcą i właściwie powinni się trzymać standardów.

http://bugs.jqueryui.com/ticket/7822

  • Share post

Dodaj komentarz