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.
Demo
for demo try this url -
www.yiidemos.gopagoda.com
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.