##Features
- global response object in PHP -> YiiAjax::getResponse() // return object which implments ArrayAccess and Iterator interfaces
- with AjaxEvent you can send any event with any data from PHP and catch it in javascript
- AjaxJqueryReplaceWith automatically replace content in provided selector
- AjaxJqueryHtml similar to AjaxJqueryReplaceWith but use jquery html method
##Installation
- using git: go to the application.ext directory and clone project
$> git clone https://github.com/oncesk/yii-ajax.git
- using archive: download archive and unpack it into application.ext directory
##Yii configuration
Set as a component
return array(
'components' => array(
'yiiAjax' => array(
'class' => 'ext.yii-ajax.YiiAjax'
)
)
);
You can add extension into preload components in your config/main.php config file for auto initialization
return array(
'preload' => array(
'yiiAjax'
)
);
##Javascript
In javascript use YiiAjax object
##Before, After and Custom events
In any callback function will be pasted chain, second parameter
- before:apply will be invoked before apply response actions
YiiAjax.on('before:apply', function (response, chain) {
if (response['somekey']) {
chain.break = true; // and response parsing ends
}
});
- after:apply will be invoked after apply
YiiAjax.on('after:apply', function (response, chain) {
console.log('called after parsing and apply actions');
});
- catch custom events
new AjaxEvent('update.summary', array(
'totalPrice' => 500,
'deliveryPrice' => 30
));
// triggered before invoke update.summary
YiiAjax.on('before:update.summary', function (response, chain) {
// here you can break next execution or do some actions
console.log('before invoke update.summary');
});
YiiAjax.on('update.summary', function (response, chain) {
console.log('update.summary is invoked');
console.log('totalPrice is: ' + response.totalPrice);
// do any action
});
YiiAjax.on('after:update.summary', function (response) {
console.log('after update.summary');
});
####Bind event
js:
YiiAjax.on('error', function (errorObject) {
// will be called when server send error event
console.log(errorObject);
});
php (part of controller):
public function actionTest() {
$this->_test1();
$this->_test2();
Yii::app()->end();
}
protected function _test1() {
new AjaxEvent('error', array(
'message' => 'You can not run this test'
));
}
protected function _test2() {
new AjaxEvent('error', array(
'message' => 'Internal server error'
));
}
####Use YiiAjax.ajax
YiiAjax.ajax method proxying success and done callbacks for reformating server response
js:
YiiAjax.ajax({
url : '/test',
dataType : 'json',
success : function (response) {
console.log(response); // object {success : 0, reason : 'Some reason'}
}
});
YiiAjax.on('error', function (errorObject) {
// will be called when server send error event
console.log(errorObject);
});
php (part of controller):
public function actionTest() {
$this->_test1();
$this->_test2();
$response = YiiAjax::getResponse();
$response['success'] = false;
$response['reason'] = 'Some reason';
Yii::app()->end();
}
protected function _test1() {
new AjaxEvent('error', array(
'message' => 'You can not run this test'
));
}
protected function _test2() {
new AjaxEvent('error', array(
'message' => 'Internal server error'
));
}
####If you use Jquery.ajax
$.ajax({
url : '/test',
dataType : 'json',
success : function (response) {
YiiAjax.parse(response);
// your response in response.response
console.log(response);
}
});
##PHP
If you not add extension in preload section, you can initializa it manually!
Example:
public function actionIndex() {
Yii::app()->getComponent('yiiAjax');
...
}
You should use Yii::app()->end();
####Global response object
if request is ajax request you can use YiiAjax::getResponse() everywhere in you project
php (part of controller):
public function actionTest() {
$this->test1();
$this->test2();
Yii::app()->end();
}
protected function test1() {
$response = YiiAjax::getResponse();
$response['test1'] = 'success';
}
protected function test2() {
$response = YiiAjax::getResponse();
$response['test2'] = 'success';
}
Javascript:
YiiAjax.ajax({
url : '/test',
dataType : 'json',
success : function (response) {
console.log(response.test1);
console.log(response.test2);
console.log(response);
}
});