[Wiki] Open bootstrap modal and load content via Ajax

<?php
$this->widget('bootstrap.widgets.TbModal', array(
    'id' => 'myModal',
    'footer' => implode(' ', array(
        TbHtml::button('Close', array('data-dismiss' => 'modal')),
    )),
));
 
// ajax button to open the modal
echo TbHtml::ajaxButton(
    'Open Modal', // $label
    $this->createUrl('myController/myAction'),  // $url
    array( // $ajaxOptions - https://api.jquery.com/jQuery.ajax/
        // The type of data that you're expecting back from the server.
        'dataType' => 'json', 
 
        // The type of request to make ("POST" or "GET")
        'type' => 'POST',
 
        // Data to be sent to the server.
        'data' => array(
            // you data to be passed
            //'key' => 'value',
        ),
        'beforeSend' => 'function(){
            // Should you want to have a loading widget onClick
            // http://www.yiiframework.com/extension/loading/
            // Loading.show();
        }',
        'success' => 'function(data){
            openModal( "myModal", data.header, data.body);
        }',
        'error' => 'function(xhr, status, error) {
            // this will display the error callback in the modal.
            openModal( "myModal", xhr.status + ' ' +xhr.statusText, xhr.responseText);
        }',
        'complete' => 'function(){
            // hide the loading widget when complete
            // Loading.hide();
        }',
    ),
    array( // $htmlOptions
        // to avoid multiple ajax request
        // http://www.yiiframework.com/wiki/178/how-to-avoid-multiple-ajax-request/
        'id' => 'open-modal-'.uniqid(),
    )
);
?>
 
<script type="text/javascript">
 
    // this will open the Modal with the given id
    function openModal( id, header, body){
        var closeButton = '<button data-dismiss="modal" class="close" type="button">×</button>';
 
        $("#" + id + " .modal-header").html( closeButton + '<h3>'+ header + '</h3>');
        $("#" + id + " .modal-body").html(body);
     // $("#" + id + " .modal-footer").html(footer data); // you can also change the footer
        $("#" + id).modal("show");
    }
 
</script>

<?php
 
public function actionMyAction() {
    if (Yii::app()->request->isAjaxRequest) {
 
        // to avoid jQuery and other core scripts from loading when the fourth parameter of renderPartial() is TRUE.
        // this is useful if you want another ajaxButton in the modal or anything with scripts.
        // http://www.yiiframework.com/forum/index.php/topic/5455-creating-ajax-elements-from-inside-ajax-request/page__p__30114#entry30114
        Yii::app()->clientscript->scriptMap['jquery.js'] = false;
 
        $body = $this->renderPartial('_loadContent', array(
            'label' => 'Success!',
        ), true, true); // processOutput
 
        echo CJSON::encode(array(
            // this will be used in the Modal header
            'header' => 'Success! Modal was opened',
 
            // this will be used in the Modal body
            'body' => $body,
        ));
        exit;
    }
    else
        throw new CHttpException('403', 'Forbidden access.');
}
 
?>

<?php
// You can put your code here
// as for now,
// just another ajax button to demonstrate the 
// Yii::app()->clientscript->scriptMap['jquery.js'] = false;
// and when the fourth parameter of renderPartial()
echo TbHtml::ajaxButton(
    $label, // $label
    $this->createUrl('myAnotherController/myAnotherAction'),  // $url
    array( // $ajaxOptions - https://api.jquery.com/jQuery.ajax/
        'beforeSend' => 'function(){
            alert("Success! - beforeSend!");
        }',
    ),
    array( // $htmlOptions
        'id' => 'just-another-button',
    )
);
 
?>