Generates a link that can initiate AJAX requests.
Syntax
public static string ajaxLink(string $text, mixed $url, array $ajaxOptions=array ( ), array $htmlOptions=array ( ))
Example
echo CHtml::ajaxLink(
$text = 'Click me',
$url = '/',
$ajaxOptions=array (
'type'=>'POST',
'dataType'=>'json',
'success'=>'function(html){ jQuery("#your_id").html(html); }'
),
$htmlOptions=array ()
);
Output:
<a href="#" id="yt0">Click me</a>
<script type="text/script">
jQuery('body').on('click', '#yt0', function () {
jQuery.ajax({
'type': 'POST',
'dataType': 'json',
'success': function (html) {
jQuery("#your_id").html(html);
},
'url': '/',
'cache': false,
'data': jQuery(this).parents("form").serialize()
});
return false;
});
});
</script>
Return values
string, the generated link
Examples
Example #1 : Ajax request using ajaxLink
//In view: echo CHtml::ajaxLink( 'Test request', // the link body (it will NOT be HTML-encoded.) array('ajax/reqTest01'), // the URL for the AJAX request. If empty, it is assumed to be the current URL. array( 'update'=>'#req_res' )); echo '<div id="req_res">...</div>'; //In controllerpublic function actionReqTest01() { echo date('H:i:s'); Yii::app()->end();}
Output:
<script type="text/javascript"> jQuery('body').on('click', '#yt0', function () { jQuery.ajax({ 'url': '/ajax/reqTest01', 'cache': false, 'success': function (html) { jQuery("#req_res").html(html) } }); return false; }); </script> <a href="#" id="yt0">Test request</a><div id="req_res">...</div>
Example #2 : Ajax request using ajaxLink with loading image
//In view:echo CHtml::ajaxLink( 'Test request', // the link body (it will NOT be HTML-encoded.) array('ajax/reqTest01Loading'), // the URL for the AJAX request. If empty, it is assumed to be the current URL. array( 'update'=>'#req_res_loading', 'beforeSend' => 'function() { $("#maindiv").addClass("loading"); }', 'complete' => 'function() { $("#maindiv").removeClass("loading"); }', )); echo '<div id="req_res_loading">...</div>'; //In controller:public function actionReqTest01Loading() { sleep(4); // Sleep for 4 seconds just to demonstrate the Loading Image can be seen, for learning purpose only echo date('H:i:s'); Yii::app()->end();}
Output:
<script type="text/javascript"> jQuery('body').on('click', '#yt0', function () { jQuery.ajax({ 'beforeSend': function () { $("#maindiv").addClass("loading"); }, 'complete': function () { $("#maindiv").removeClass("loading"); }, 'url': '/ajax/reqTest01Loading', 'cache': false, 'success': function (html) { jQuery("#req_res_loading").html(html) } }); return false; }); }); </script> <a href="#" id="yt0">Test request</a><div id="req_res_loading">...</div>
References
http://www.yiiframework.com/doc/api/1.1/CHtml#ajaxLink-detail
http://www.yiiplayground.com/index.php?r=AjaxModule/ajax/ajaxRequest#ajaxLink