CakePHP и свързани select-и с AJAX

at 09:10 by nofearinc
Category: CakePHP

Наложи се в CakePHP проект да свържа 2 <select> елемента, които да са свързани - при избор на елемент от първия лист, да се филтрират резултатите във втория.

Концепцията не е нова - прихваща се click на първия списък, взима се стойността, а на базата на нея се зареждат резултатите във втория лист. Въпреки това структурата на CakePHP не предполага функциите да извеждат чисто и просто резултат, а MVC подходът изисква връзка на controller-а с view, което да извежда резултат. Нещата стават малко по-усложнени - особено поради необходимостта от шаблон (layout). Така че се налага да се направят някои корекции по въпроса.

Първо, използвам jQuery Related (Dependent) Selects Plugin. Само с няколко реда код може да навържем няколко списъка като верига (chain).

След като добавим плъгина в webroot/js на проекта и го вмъкнем в шаблона (наред с jQuery скрипта, разбира се), трябва да добавим скрипта във view-то, в което са селектите, и да го навържем към дадена функция.

Тъй като трябва да попълваме списък, най-удобният вариант е да правим find() в таблица, в която филтрираме записите, и да връщаме 'list'. Сериализираме това към json и го подаваме на AJAX метода.

Има два лесни начина да накараме функцията да връща само това, което ни е необходимо - без да спазва структурата на CakePHP и да зарежда различни шаблони и да счупи връщания резултат.

1. Да използваме вградения layout "ajax":

$this->layout = 'ajax';

, след което върнатият резултат няма да има шаблон, а само json кода от нас.

Да използваме RequestHandler и да специфицираме, че ще връщаме json съдържание. Зареждаме RequestHandler компонента в контролера:

var $components = array('RequestHandler');

, а след това (в action метода) задаваме какво точно съдържание да се връща:

$this->RequestHandler->setContent('json', 'text/javascript');

И в двата случая по-горе трябва да направим празен view файл с името на метода, както е конвенцията на Cake. В противен случай системата ще изведе съобщение за грешка... вместо просто сериализираните данни.

Примерен код от view-то, което вика ajax-а:

echo $form->create('Order');
echo $form->input('account_id', array('empty' => true));
echo $form->input('location_id', array('empty' => true));
...
$('#OrderAddForm').relatedSelects({
	onChangeLoad: 'locbyaccount',
	selects: ['data[Order][account_id]', 'data[Order][location_id]']
});

Примерна функция, която handle-ва:

function locbyaccount($account_id = NULL) {
		$this->RequestHandler->setContent('json', 'text/javascript');
 
		$account_id = $_GET['data']['Order']['account_id'];
		$orders = $this->Order->Location->find('list', array('conditions' => array('Location.account_id' => $account_id), 'fields' => array('location_id', 'location_address'), 'order' => 'location_address'));
		echo json_encode($orders);
}