jQuery Plugins: Livequery & htmlClean

Публикувано на 13 февруари 2009 от Ицката в Интернет и уеб
Етикети: , ,

От два месеца работя по един частен проект, няма да казвам за кого е сайта за да ви е интересно да поглеждате отвреме-навреме и без това скучния ми блог :-)

Та, във въпросния сайт използвам доста сериозно любимата ми библиотека jQuery. В процеса на работа се натъкнах на два проблема, единият от които, разбира се, пряко свързан с "любимия" на всички девелъпъри Internet Explorer.

За какво иде реч? Ако ползвате jQuery би следвало да знаете, че библиотеката работи с Document Object Model (DOM). Функциите се зареждат при зареждането на DOM-a. Т.е., когато DOM-a е "готов" ( $(document).ready() ), скрипта обхожда документа, и assign-ва функциите на обектите, включени в селектора. Но какво става, когато вкараме нови елементи в DOM-a? Ето ви проблем. Те не изпълняват функциите, защото не са им зададени от скрипта.

Тук на помощ ни идва Livequery плъгина. За разлика от стандартните events, Livequery обхожда DOM-a всеки път при настъпването на event-a. Така вече и нововмъкнатите елементи могат да изпълнят функцията, която искаме (ако отговарят на изискванията на селектора, разбира се). Доста полезно.

Вторият проблем, на който се натъкнах. jQuery има фунцкия html(), която връща HTML кода на елемент, или му вмъква такъв, ако е зададен параметър. При браузърите фунцкията работи коректно. Не и при Експлорера. При него функцията връща невалиден код – тагове само на главни букви, атрибути със стойности без кавички, и разни атрибути от сорта на done=9 , jQuery=2323423432454325 и др. Това не е проблем на jQuery – това просто е проблем на Интернет Експлорер. Незнам на Microsoft не им ли омръзна браузерите да не поддържат никакви стандарти.

Доста рових из Гугъл, но така и не намерих адекватно решение. Навсякъде само се говореше за проблема, без решение. В едно от търсенията попаднах на innerXHTML() – функция, подобна на innerHTML, само че връща валидиран код. Работи добре и с Internet Explorer. За момент си помислих, че съм намерил решение. Но това не беше съвсем така. Въпросната функция връща чист кода, когато не му е правена манипулация с jQuery. Когато обаче имаме анимация, или DOM insert/remove, това нещо не върши работа.

Търсенето продължи и попаднах на плъгин за jQuery, казва се jQuery Clean и представлява функциика, която ни изчиства кода от грешки и ненужни неща. Работи добре и под Експлорера. Но има няколко ограничения. Няма възможност за задаване на повече опции (какво да трие, какво да оставя), изтрива класовете на повечето елементи, което не ме устройва, и също преобразува някои такова в други, примерно <b> и <span style="font-weight:bold"> в <strong>. Което само по себе си не е лошо, но мен лично малко ме дразни. Видяло се беше, че ще трябва намеса от моя страна в кода на плъгина.

И така, с малко редакция от моя страна заработи идеално и вече ми върши перфектна работа. На мен ми отне почти цял работен ден да се боря с това, надявам се да съм поспестил малко време за някой девелъпър, който чете това.

Изключително напрегната и уморителна седмица беше, страшно се радвам, че утре е събота, и ще почивам.

А, днес е петък 13-ти. Всъщност, след 10 минути вече няма да е. Нищо лошо не ми се случи днес, което е хубаво. Не, че се връзвам на тия неща де.. :-) Ето ви и един поздрав по случай датата :-)

Лягам да спя.

  1. jQuery, JavaScript библиотеката. И един нов сайт. От доста време се каня да споделя впечатленията си от jQuery. jQuery е JavaScript библиотека от ново поколение. Идеята е...
  2. Upgrade! Ето че най-после ъпгрейда е факт! Най-новата версия на WordPress – 2.6, замени старата (1.52). Имаше лек проблем с базата...