Z notatnika webmasterki

27 Cze, 2015

Yii: autouzupełnianie w dynamicznych obiektach formularza

Zamieszczony przez: Joanna w: Yii 1

Z podpowiedziami w polu tekstowym formularza uporałam się szybko. W Yii to naprawdę jest proste. Trudności zaczęły się gdy trzeba było zastosować autouzupełnianie do pól formularza, które są generowane automatycznie po załadowaniu strony za pomocą javascript. W tym wypadku widget nie pomoże i trzeba zadziałać inaczej.

Dołączanie skryptów JS

W pierwszej kolejności należy zadbać o to, żeby odpowiednie skrypty jQuery zostały dołączone do witryny. O dołączanie ich do projektu nie trzeba się w ogóle martwić. Pierwsze co przychodzi do głowy to dodać w nagłówku szablonu strony odpowiednie znaczniki HTML. Nie radze tego robić w ten sposób. Lepiej skorzystać z faktu, że w Yii jest dość sprawny autoloader i zasugerować mu dołączenie Dlaczego zasugerować? No bo gdyby się okazało, że jakiś widget albo inny element frameworka już zgłosił zapotrzebowanie na dany skrypt to autoloader nie dołączy go dwukrotnie.

Czego potrzebujemy, żeby mieć autouzupełnianie? Skryptu jquery, jquery.autocomplete i jquery-ui.min, Skrypty te można dołączyć na przykład w kontrolerze który przygotowuje nasz formularz z podpowiadaniem albo w widoku samego formularza. Wystarczy wpisać następujący kod:

Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('autocomplete');
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Ja zdecydowałam się wstawić ten kod do widoku formularza, gdyż widoku tego używam w kilku kontrolerach (dodawanie oraz aktualizacja danych) Więcej o dodawaniu niezbędnych skryptów można znaleźć na stronie wiki frameworka Yii.

Potrzebny jeszcze będzie niewielki skrypt w którym znajdzie się kod odpowiedzialny za dodawanie pól formularza na życzenie oraz obsługę autouzupełniania w tych polach. O ile skrypty o których mowa była wcześniej umieszczane są automatycznie w katalogu assets to już skrypty tworzone napotrzeby serwisu lepiej umieszczać gdzie indziej, na przykład w katalogu js. Katalogu assets lepiej nie modyfikować ręcznie. Aby dodać taki skrypt (o zawartości za chwilę) wystarczą dwie linie kodu:

$strBaseUrl = Yii::app()->request->baseUrl;
Yii::app()->clientScript->registerScriptFile($strBaseUrl.'/js/nazwa.js');

Pora zająć się teraz zawartością tego skryptu. Wpierw mało odkrywczy fragment, który pozwoli nam dodawać kolejne pola typu input po naciśnięciu buttona:

 var addInput = function() {
 var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
 $(inputHTML).appendTo("form#myForm");
 };

 $("input#addButton").click(addInput);

Druga część skryptu odpowiedzialna jest za autouzupełnianie. Najpierw definicja opcji a potem delegowanie zdarzenia do obiektów klasy ‚searchInput’. Proste, prawda?

 var options = {
 source: 'http://domena.pl/data/list',
 minLength: 2
 };

 $(document).delegate('.searchInput',"keydown.autocomplete", function() {
 $(this).autocomplete(options);
 });

Wygląd listy podpowiedzi trzeba jeszcze tylko ładnie ostylować według własnych preferencji. Można tez skorzystać z gotowego zestawu dołączonego do UI ale trzeba ten arkusz ręcznie dołączyć.

$cs = Yii::app()->getClientScript();
$cssCoreUrl = $cs->getCoreScriptUrl();
$cs->registerCssFile($cssCoreUrl . '/jui/css/base/jquery-ui.css'); 

I teraz to już naprawdę wszystko.

2 komentarze na "Yii: autouzupełnianie w dynamicznych obiektach formularza"

1 | Paweł

27. czerwca 2015 o 11:42 pm

Avatar

Autocomplete jest bardzo pomocną funkcjonalnością w systemach internetowych. Napewno komuś przyda się ten materiał opisujący jak to zrobić w bardzo popularnym frameworku jakim jest Yii

2 | Fabian

12. kwietnia 2016 o 4:04 pm

Avatar

Bardzo ciekawy tekst. Dzięki za niego :)

Formularz komentarza

Grudzień 2018
P W Ś C P S N
« Cze    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Archiwa

About

Moje notatki z pracy

Subskrypcja

Wprowadź swój adres email aby zaprenumerować ten blog i otrzymywać powiadomienia o nowych wpisach przez email.

Dołącz do 40 pozostałych subskrybentów

Tematy

%d bloggers like this: