Ajax functionality required

I have not done much on Ajax before and was wondering whether core Ajax functionality is available in Yii?

This is what I have at the moment:

  • Database table ‘airports’ - this contains id, name, town, postcode

  • Dropdown list with Airport names (the entries are generated from the database)

  • 3 form fields (name, town, post code)

I want to be able to select an airport from the drop down list and the address fields need to be populated with the corresponding data.

Can someone give me some guidance on how I go about doing this?

Anyone able to advise?

I notice there is a CHtml::ajax function but for now I’ve just manually added a $.ajax() function.

Now do I need to create another PHP file with the SQL query, or can I use my existing model?

What do I need to specify for the ‘data’ property in $.ajax() ?

Start with http://www.yiiframework.com/doc/cookbook/24 to get the dropdown and the ajax call working. I suggest you return JSON instead of html. So next step will be to specify datatype ‘json’ and use a ‘success’ handler instead of ‘update’. From the success handler you update the three fields. I have an example somewhere.

(from the top of my memory)

/Tommy

Cheers tri.

This is what I have got now:

LocationController:


public function actionDetails()

{

	$data=Location::model()->find('id=:id', array(':id'=>(int) $_POST['airport']));

}



View (‘ajax’ array in dropdownlist options):


'ajax' => array(

	'type'=>'POST',

	'url'=>CController::createUrl('location/details'),

	'success'=>'alert("Hello")',

	'dataType'=>'json'

))



As you can see I put in a JS alert to test if the success function is working, which it is. But now how do I reference the $data object?

tri? Anyone? I am almost there now, this looks like the last hurdle!

I actually managed to figure this out myself. In case anyone is interested:




public function actionDetails()

{

	$data=Location::model()->find('id=:id', array(':id'=>(int) $_POST['airport']));

	

	$return_arr = array($data->title, $data->town, $data->postcode);

	

	echo json_encode($return_arr);

}




'ajax' => array(

	'type'=>'POST',

	'url'=>CController::createUrl('location/details'),

	'dataType'=>'json',

	'success'=>'function(data) {

		$("#Enquiry_title").val(data[0]);

		$("#Enquiry_town").val(data[1]);

		$("#Enquiry_postcode").val(data[2]);

	}'

)

Sorry, I was away from the computer, had to do some other things. Your code looks similar to what I had in mind. I recall I also used CHtml::activeID($model, ‘someattribute’) instead of javascript id’s directly.

/Tommy

Thanks for the pointer on activeId.

Do you know how I can use the ‘data’ property of ajax to specify that I only want $_POST[‘airport’] to be posted to the script? By default it posts all fields and this is causing a problem because I have two more AJAX dropdown lists.

EDIT: got that sorted now as well lol:


'data'=>'js:({airport : $("#airport_select").val()})'

Next question: how can I prevent it from running the ajax call when the ‘empty’ dropdown option is selected? Otherwise I get a JS error “data is null”…

Not sure about all options available. I would try to add a test to beforeSend. The request will be cancelled if you return false.

http://api.jquery.com/jQuery.ajax/

/Tommy

This seems to work:




if(empty($_POST['airport']))

{

	echo json_encode(array('', '', '');

}



It’s probably not the most ideal solution but it works… could it cause any problems down the line at all?