In this wiki I explain how to show a default popup dialogbox (like Gii does) using an existing module.
You can use any module or component or library that includes fancybox jquery library.
In this example we will use the Gii generated jquery and css but you can use any other that includes the jquery.fancybox-1.3.1.pack.js and jquery.fancybox-1.3.1.css files.
So, In your view add this (for example in views/controllerA/testPopup.php)
$cs = Yii::app()->clientScript;
$cs->coreScriptPosition = CClientScript::POS_HEAD;
$cs->scriptMap = array();
$baseUrl = Yii::app()->getModule('gii')->assetsUrl; //the assets of existing module
$cs->registerCoreScript('jquery');
$cs->registerCoreScript('jquery.ui');
$cs->registerScriptFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.pack.js');
$cs->registerCssFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.css');
$cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js');
echo "<div id='your-form-block-id'>";
echo CHtml::beginForm();
echo CHtml::link('an ajax test', array('controllerA/textA'), array('class' => 'class-link'));
echo CHtml::endForm();
echo "</div>";
In protected folder , create (if it is not exists) js folder and a file with name popup.js
$(document).ready(function() {
$('.class-link').click(function() {
var title = $(this).attr('rel');
$.fancybox.showActivity();
$.ajax({
type: 'POST',
cache: false,
url: $(this).attr('href'),
data: $('#your-form-block-id form').serializeArray(),
success: function(data) {
$.fancybox(data, {
'title': title,
'titlePosition': 'inside',
'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();">close</a></span>' + (title && title.length ? '<b>' + title + '</b>' : '') + '</div>';
},
'showCloseButton': false,
'autoDimensions': false,
'width': 900,
'height': 'auto',
'onComplete': function() {
$('#fancybox-inner').scrollTop(0);
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.fancybox('<div class="error">' + XMLHttpRequest.responseText + '</div>');
}
});
return false;
});
$(document).on('click', '#fancybox-inner .close-code', function() {
$.fancybox.close();
return false;
});
});
In your controllerA create the actions textA and TestPopUp
public function actionTextA() {
if (!Yii::app()->request->isAjaxRequest)
$this->render('yourView');
else {
$this->renderPartial('yourView');
Yii::app()->end();
}
}
public function actionTestPopUp() {
$this->render('testPopup.php');
}
It is done! Now you have the desired functionality
Note: Parts of code already been written in Gii Yii module
Make your-form-block-id a parameter
Hi,
I'm not that familiar with js;
Is there a way to pass the 'your-form-block-id' to the popup.js as a parameter (otherwise I guess I need a different popup.js for each form)?
Thanks
your-form-block-id as parameter
Yes,
You could generate the js code by php,
So
Insead of $cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js'); you could use $cs->registerScript("entire javascript code... with parameter from php");
the text could be generated by php, so you can do anything you want!
Also there is a better way to do that
replacing $('#your-form-block-id form') with $(myvar1)
add also $cs->registerScript('globalvariable','var myvar1='.$phpcodevar);
If you want multiple selectors at once please post me a message to make an extension :)
About CGridview
If you want this functionality for each row of specified column you have to just add this code
'columns'=>array( ... array('class'=>'CLinkColumn', 'urlExpression'=>'Yii::app()->createUrl("controllerA/actionA",array("var"=>$data->var))', 'htmlOptions' => array('class' => 'class-link')), ...
Bug using Gii module
Note:
in this line
$baseUrl = Yii::app()->getModule('gii')->assetsUrl;
Gii will be loaded and the assetsUrl will be returned in $baseUrl
Unfortunately, there are cases that gii may modify attributes of Yii:app()->user.
So it is not preferable to use the above line to get the url foreach user request
The solution is:
Executing the line at the first request, store the baseurl in database (with or not caching system) and use the stored variable on the second or above request
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.