Open bootstrap modal and load content via Ajax

My goal here is to Open bootstrap modal and load ANY content using ajax response.

This instruction is exclusive only for those who are using yiistrap.

In view file,

<?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>

In controller (myController),

<?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.');
}

?>

In _loadContent.php,

<?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',
    )
);

?>

I hope this helps.

1 0
2 followers
Viewed: 49 239 times
Version: 1.1
Category: How-tos
Written by: JbalTero
Last updated by: JbalTero
Created on: May 2, 2014
Last updated: 4 years ago
Update Article

Revisions

View all history

Related Articles