Z pomocą nam jednak przychodzi jak zwykle biblioteka Prototype i jej sprytne metody. Szczególnie przydatna w naszym przykładzie jest metoda bind owej biblioteki. Funkcja ta pozwala uwolnić metodę jakiegoś obiektu od zależności z jego polami poprzez parametr this.

Dzięki konstrukcji typu:

var function = myObj.myMethod.bindAsEventListener(this);

metoda myMethod obiektu myObj zostanie skonwertowana do zwykłej niezależnej funkcji. Jest to niezwykle przydatne przy listenerach i funkcjach obsługi zdarzeń. W naszym przypadku interesuje nas zdarzenie onclick przycisku wywołującego akcję typu Ajax.

A zatem chcemy mieć uniwersalną metodę, która pozwoli nam w dowolnym miejscu połączyć dowolne pola formularza z dowolną akcją Ajaksową, a do tego będzie w tych polach formularza wywoływała tą akcję zwykłym klawiszem enter (lub dowolnym innym).

Potrzebujemy po prostu takiego uniwersalnego helpera PHP (Symfony and whatever):

/* nazwy i ajdiki triggerów ajaksowych muszą być unikalne */ 
function bindFilter($ajaxElementName, $arrayName) { 
    echo javascript_tag("
         var ajax_button_name = '". $ajaxElementName ."';
         var input_array_name = '". $arrayName ."';
         $('sf_admin_edit_form').getInputs('text').each(function(element)
           {
              var ajax_button = $(ajax_button_name);
              if(element.name.startsWith(input_array_name))
              {
                 Event.observe(element, 'keypress', function(event)
                     {
                         var ajax_function = ajax_button.onclick.bindAsEventListener(ajax_button);
                         if(event.keyCode == Event.KEY_RETURN)
                         {
                              ajax_function();
                              Event.stop(event);
                         }
                      }
                  );
               }
            }
         )
     ");
}    

Parametry metody to:

• $ajaxElementName - nazwa id elementu pierwotnie wywołującego akcję ajaksową, czyli tzw. triggera (trudne słowo ;)
• $arrayName - nazwa lub wspólny fragment nazwy (tablicy) elementów formularza typu pole tekstowe

Zdjęcie pochodzi z systemu e-commerce LogiShop

Oczywiście korzystamy z najnowszej wersji biblioteki Prototype :)