MiniTutorial For Ajax

Hi Guys

I read the definitive guide, looked at CHTML:ajax, ajaxLink, etc, and searched the forum for anything ajax related, but still don't know how to implement ajax calls. I'm suffering from a bit of information overload after looking into about 10 php frameworks, and having simple ajax is a requirement for my next pet project and I really like what I see in Yii so far. I'm just unsure about the ajax calls.

Can someone just point me in the right direction please, as a basic example, I have 1 TextField, a submit button, and a feedback div. The step are: 1: User enters text, 2: User clicks submit, 3: Server receives ajax response, 4: Server responds and updates the feedback div. Pretty straight forward ajax stuff.

Before I dive in I'd like to know what the "best practices" are regarding AJAX requests. In other words - where must the code go that make these "mini-responses". In prado it was easy and you didn't have to worry about these things, but in Yii it seems to work a little bit different (or am I missing something here).

Any help would be greatly appreciated.

Thank you!

Here's an example:

View:



<?php echo CHtml::form(); ?>


<?php echo CHtml::textField('name'); ?>


<?php echo CHtml::ajaxLink('submit', array('echo'), array(


	'type'=>'POST',


	'update'=>'#result',


)); ?>


</form>


<div id="result" />


Controller class:



<?php


	public function actionEcho()


	{


		if(Yii::app()->request->isAjaxRequest)


		{


			if(isset($_POST['name']))


				echo "You entered: ".CHtml::encode($_POST['name']);


		}


	}


Thank you so much Qiang! Exactly what I needed.

I have one more question for the community regarding ajax: How would you recreate the hangman game to work with ajax, like it does in the Prado demo? The main challenge here is that more than one div field is updated.

Am I correct when I say you should have a piece of Javascript on the clientside that will be responsible for updating mutilple items on the DOM once the AJAX request returns data? Is this where the function registerScript comes in?

Thank you once again for your help!  :)

You are right. If you check the generated HTML code, you will see some js code at the end.

Regarding the hangman demo, maybe someone can try to convert it to an ajax version? That’ll be a very  good demo of using ajax in Yii. :D

If you don't use update and call a function at SUCCESS you could do that.

I do that for my app.



<?php


echo CHtml::dropDownList('category', '', $categories, array( //htmloptions


   'ajax' => array(


      'type'=>'POST',


      'url'=>$this->createUrl('showrooms'),


      'update'=>'#room_container',


	  'success'=>'updateAll',


	  


   ),


));


?> 


The complete, execute the javascript function updateAll.

Also you can get information here:

http://docs.jquery.c…ry.ajax#options

I can't do it right now, i'm full of work, but this is a starting point.

Quote

Controller class:


<?php


	public function actionEcho()


	{


		if(Yii::app()->request->isAjaxRequest)


		{


			if(isset($_POST['name']))


				echo "You entered: ".CHtml::encode($_POST['name']);


		}


	}


Hi, I use above sample and I can send an ajax request to server and show the server's response on screen. The whole function is ok, thanks.

But I have a question, the output is rendered in the controller and use "echo"? Is it a normal design or just because this is an example? I think all HTML should put in views, right? Or ajax is special, it need to generate HTML is controller ?

This is just an example I guess. Usually you would also have some html elements. To really stick to clean MVC one should put all this in the view.

Hi,

This is a very good example, show us how to use Yii ajax api, and it works properly in my Firefox. But I try to develop a web apps that can suite also to Nokia S60 Browser, I using my E71 to browse to the site, the jquery ajax just not working (nothing happen after type something and press submit).

I search through the web, found that S60’s Browser still not support JQuery (only WRT is supported). Is it true? :(

If it is true, then will be very sad for me, course if I use Yii’s built in ajax api, my web apps will not compatible with Nokia Browser.  :-[

My existing apps using XMLHttpRequest working fine on Nokia Browser, but need to code lots of JS  :cry:

Any idea and suggestion?

While Yii does integrate with jQuery, it doesn't mean it relies on jQuery. You have full freedom to pick up your favorite js libraries if they work with S60 browser. I couldn't offer much help here since I don't have experience in S60.

I got it, just add this in the Controller class and it will only render partial HTML by this view.

$this->renderPartial("anotherView");

I need to say, Yii is great… I have no experience for jQuery or other Ajax framework. Base on Yii, I don't need to know them and I can create an Ajax applications.

Thanks qiang and dennys. I got what your ideas. Will try to proceed.  :)

Hi,

I have tried the example , it work fines but when I tried to use jsQuery Dialog and I put Qiang's code into the dialog something like






$this->beginWidget('application.extensions.jui.EDialog',


   array(


      'name' => 'myDialog',


      'theme'=>'redmond', 


      'compression'=>'none', 


      'htmlOptions'=>array('title'=>'Hello dialog'),


      'options'=>array(


         'autoOpen'=>false, 


         'show'=>'scale',      


         'bgiframe'=>true,


         'width'=>400,


         'modal'=>true, /* this makes the dialog, appear on a overlay */


      ),


      'buttons' => array(


         "Ok" => 'function(){$(this).dialog("close");}',


      )       


   )


);





//here is Qiang's sample code that I moved! 


echo CHtml::form();


echo CHtml::textField('name');


echo CHtml::ajaxLink('submit', array('echo'), array(


   'type'=>'POST',


   'update'=>'#result',


));





//and changed a bit by echo ...


echo '</form>';


echo '<div id="result">';


echo 'Something have to be replace by actionEcho controller ...';


echo '</div>';





/** after successful test the AJAX CALL , WILL need to replace the result from


 *  actionEcho in controller class as a result


echo "<table class=dataGrid>" ;


echo "<tr>";


echo "<th>"; echo CHtml::activeLabelEx($model,'hostname'); echo"</th>";


echo "</tr>";


foreach($mymodels as $n=>$mymodel):


echo "<tr>";


echo "<td>"; echo CHtml::link($mymodel->hostname,array('create','myHostName'=>$mymodel->id)); echo"</td>";


echo "</tr>";


endforeach;


echo "</table>";


echo "<br/>";


**/


$this->endWidget('application.extensions.jui.EDialog');

From my code there , when I call the AjaxButton , it somehow did call to actionEcho and replace the text

"Something have to be replace by actionEcho controller …"

when it return with blank.

First Can I put ANOTHER DIV with the Dialog's <div id= "myDialog"> ?

Because it seems that I cannot find my <div id="result">.

How can I achive by Ajax calling and then return the result into the DIALOG's  <div id= "myDialog"> Area  ?

Please advise , Thanks.