I am learning Yii, but realized some inter-disciplinary areas, such as Yii - javascript, Yii - jquery, Yii - ajax are hard to understand.
I feel like CHtml::clientChange() maybe important function in using Javascript at front-end level, but the class reference is too simple for a beginner to understand. Can you give me some code examples of clientChange()?
Thank you very much!
Here is the class reference:
http://www.yiiframew…ntChange-detail
I feel the same difficulty as you.
Here’s probably the simplest example.
<?php
echo CHtml::link('Delete',
array('#'),
array(
'class' => 'internal',
'title' => 'Delete the item',
'submit' => array('delete', 'id' => $model->id),
'confirm' => "Going to delete it.\nAre you sure?",
'csrf' => true,
)
);
?>
The third parameter for CHtml::link is “htmlOptions” which contains normal attributes(i.e. ‘class’ and ‘title’) and the “clientChange” attributes(i.e. ‘submit’, ‘confirm’ and ‘csrf’).
I learned this from the Gii generated "view.php" view script, and made some changes according to my needs.
The original codes were meant for a CMenu item:
$this->menu=array(
....
array(
'label'=>'Delete Foo',
'url'=>'#',
'linkOptions'=>array(
'submit'=>array('delete','id'=>$model->id),
'confirm'=>'Are you sure you want to delete this item?'
)
),
....
);
[P.S.]
Ah, you are referring to CHtml::clientChange() function!
I have to say sorry. I haven’t had a chance to use it yet. But using those “clientChange” attributes in various CHtml functions might be usually good enough, I guess.
I mean CHtml::clientChange() function, but also thanks a lot for your great example about link()
This question is still open. I couldn’t figure out what this function is for. Please help me with some sample code if you used clientChange() before. Thanks!
For the case if someone still needs info about this function, I share my findings. Actually, one can study its source code presented just inline the documentation. This is how I managed the case study below to work.
The purpose of this function is to alter normal javascript rendered automatically for you by Yii.
Suppose we have CActiveForm:
<?php $form = $this->beginWidget('CActiveForm', array(
'id' => 'login-form',
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
),
)); ?>
Also suppose we need additional submit button, performing and action which is different to normal submit (for example, this could be ‘Forgot your password?’ button in login form).
echo CHtml::submitButton(Yii::t('t', 'Send me a new password'), array('id' => 'forgotsbmt', 'submit' => CController::createUrl('user/forgot')));
This will produce the following javascript code on client-side:
$('body').on('click','#forgotsbmt',function(){jQuery.yii.submitForm(this,'/home/user/forgot',{});return false;});
It is ready to work for you, except for one important point: you would probably want to change validation rules on the client for this special case, because required password is apparently missing. Of course, you could do the same thing with server-side validation. But what if you want to do this on client?
Here clientChange comes in handy.
Before we can add it into the form, please note that clientChange is protected method, so you can’t use it straight away. Lets define a derived class helper:
class CustomCHtml extends CHtml
{
public static function clientChange($event, &$htmlOptions)
{
parent::clientChange($event, $htmlOptions);
}
}
Now we can add the following line into the form:
CustomCHtml::clientChange('click',
$a = array('onclick' => 'prepare();',
'id' => 'forgotsbmt',
'live' => true,
'submit' => CController::createUrl('user/forgot')));
Here we make changes to the ‘click’ event, which you see in standard Yii’s javascript snippet shown few lines above. It is not so important what the function prepare() does. The fact is that it will be included (prepend) into standard Yii’ javascript onclick handler.
We define our own element ID, because otherwise Yii will play with its own sequence of IDs, which may be unpredictable (for example, change depending from element position in a page). It’s essential to specify ‘live’, because it’s the option instructing Yii make use of ‘id’. Also it’s important to specify ‘submit’ parameter, because it “notifies” Yii about our intention to change form submission. As ‘submit’ is now bound to the required element, we should remove it from submitButton itself.
echo CHtml::submitButton(Yii::t('t', 'Send me a new password'), array('id' => 'forgotsbmt'));
Lets look at generated javascript now:
$('body').on('click','#forgotsbmt',function(){prepare();jQuery.yii.submitForm(this,'/home/user/forgot',{});return false;});
Please, note that prepare is invoked before standard code for form submission.
Finally you should register client script with prepare() function:
Yii::app()->clientScript->registerScript('forgot', "
function prepare()
{
alert('Hello from hooked Yii javascript');
// for example, validate unimportant form fields
}
");
That’s all. Hope this helps.