You are viewing revision #1 of this wiki article.
This is the latest version of this article.
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.