CHtml::ajaxLink()

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


你可能感兴趣的:(yii,ajaxLink)