Prototype – Closer to Code

Pracując dzisiaj nad Senpuu v5 - zauważyłem że Susanoo (autorski CMS pod Senpuu) nie pokazuje JSowych confirmów. Przykładowo coś takiego:

link_to "Usuń notkę", :confirm=>"Czy jesteś pewien?", :method=>"delete"

nie działało. JS ładował się prawidłowo, jednak po włączeniu Firebuga, natknąłem się na taki oto błąd:

document.on is not a function

A po kliknięciu, zamiast wysyłać żądanie usunięcia, realizowane było normalne "linkowe".

Firebug dokładnie wskazywał na tę metodę:

document.on("click", "a[data-method]", function(event, element) {
  if (event.stopped) return;
    handleMethod(element);
    event.stop();
  });

Okazało się, że Rails3 korzysta z nowego Prototype 1.7 - a ja przez przypadek wkleiłem stare. Komunikat zniknął po przywróceniu nowej wersji Prototype. Wziąć ją można z internetu lub generując sobie nowy projekt:

rails new givemeprototype

i kopiując odpowiednie pliki z /public/javascripts/.

Pracując dzisiaj nad Susanoo dla Senpuu, wyszło na jaw, że korzystanie z takiego selectora:

$$('tr[class = "parent_'+id+'"]')

kiedy klasa nie jest jedna ale jest ich kilka, jak np. w takim przypadku:

class="parent_252342 body status_2"

nic nie da.

Wyniki nie zostaną poprawnie wybrane ponieważ nie pasują "idealnie". Aby w takim wypadku wybrać elementy z klasą parent_ID ale także z innymi, musimy skorzystać z takiego selectora:

$$('tr[class ~= "parent_'+id+'"]')

Poniżej prezentuję jeszcze kilka innych przykładów selectorów:

$$('.class-a,.class-b');
$$('div[class~="class-a"]')
$$('td:not(.class-b)');
$(element).select('.class-a');

w zasadzie to co tutaj widać, to w dużej mierze wykorzystanie selectorów dostępnych w CSS3.

Tag: Prototype

Rails3, rails.js i document.on is not a function

Krótko i szybko o selectorach JS w Prototype