Yii Framework Forum: Ajax functionality required - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Ajax functionality required Rate Topic: -----

#1 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 05:29 AM

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?
0

#2 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 06:43 AM

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() ?
0

#3 User is offline   tri 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,651
  • Joined: 20-November 08
  • Location:Stockholm, Sweden

Posted 15 July 2010 - 07:09 AM

View PostGSTAR, on 15 July 2010 - 06:43 AM, said:

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.yiiframew...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
Don't forget to read The Definitive Guide to Yii (en) (sv) | The class reference has the details
1

#4 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 07:44 AM

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?
0

#5 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 09:11 AM

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

#6 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 12:24 PM

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]);
	}'
)

0

#7 User is offline   tri 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,651
  • Joined: 20-November 08
  • Location:Stockholm, Sweden

Posted 15 July 2010 - 01:18 PM

View PostGSTAR, on 15 July 2010 - 12:24 PM, said:

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
Don't forget to read The Definitive Guide to Yii (en) (sv) | The class reference has the details
0

#8 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 01:24 PM

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"...
0

#9 User is offline   tri 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,651
  • Joined: 20-November 08
  • Location:Stockholm, Sweden

Posted 15 July 2010 - 02:31 PM

View PostGSTAR, on 15 July 2010 - 01:24 PM, said:

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
Don't forget to read The Definitive Guide to Yii (en) (sv) | The class reference has the details
0

#10 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,035
  • Joined: 30-October 09
  • Location:UK

Posted 15 July 2010 - 03:33 PM

View Posttri, on 15 July 2010 - 02:31 PM, said:

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?
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users