I've got a number of links containing parameters which will open a dialog which is populated with an ajax call.
sample link:
<a href="javascript:void(0)" id="attach_file_project_454" class="attach_timesheet_file" data-id="454" data-week-start="2017-08-18" data-week-end="2017-08-24">Attach File</a>
Here's the trigger for the modal:
$(".attach_timesheet_file").on("click", function(e) {
e.preventDefault();
var url = "<?=Yii::app()->createUrl('admin/timesheetNew/attachTimesheet')?>";
var id = $(this).data("id");
var weekStart = $(this).data("week-start");
var weekEnd = $(this).data("week-end");
$.ajax({
type: 'POST',
url:url,
data: {
id: id,
week_start: weekStart,
week_end: weekEnd
},
success: function(data) {
var modal = $("#attachFileModal");
try{
modal.html(data);
}
catch(error)
{
console.log(error);
}
modal.dialog('open');
return true;
}
})
});
The basic action called by the ajax:
public function actionAttachTimesheet(){
$projectId = Yii::app()->request->getPost('id', null);
$reportedWeekStart = Yii::app()->request->getPost('week_start', null);
$reportedWeekEnd = Yii::app()->request->getPost('week_end', null);
$this->renderPartial("_attachTimesheet", [
'projectId' => $projectId,
'reportedWeekStart' => $reportedWeekStart,
'reportedWeekEnd' => $reportedWeekEnd,
'dataProvider' => TimesheetAdditionalFile::additionalFilesDataProvider($projectId, $reportedWeekStart, $reportedWeekEnd)
], false, true);
}
And finally the CGridView widget inside the dialog:
$this->widget('zii.widgets.grid.CGridView', [
'id' => 'files-grid',
'dataProvider' => $dataProvider,
'columns' => [
[
'name' => 'filename',
'header' => 'File Name',
'value' => 'CHtml::link($data["filename"], Yii::app()->baseUrl . TimesheetNew::FILES_FOLDER . $data["filename"], ["class" => ($data["filetype"] == "pdf")?"fancybox_pdf":"fancybox_picture"])',
'type'=>'raw',
'headerHtmlOptions'=>array('style'=>'width: 250px'),
],
[
'class' => 'CButtonColumn',
'template' => '{delete}',
'buttons' => [
'delete' => [
'label' => 'Delete',
'imageUrl' => null,
'url' => 'Yii::app()->createUrl("admin/timesheetNew/deleteFile", ["id" => $data["id"]])'
]
],
'deleteConfirmation'=>'Are you sure you want to delete this file?',
]
]
]);
I've also used qq.FileUploader as well as fancybox inside the modal, but these do not seem to interfere with anything.
When I try to click any such "attach file" link, the dialog opens just fine and everything works as intended. I'm seeing my gridview, and I can add and delete files. However, when I close the dialog, it won't open this link or any other "attach file" links.
The error I'm getting in the console is this after re-clicking a link:
Uncaught TypeError: modal.dialog is not a function
I'm only experiencing this when using the gridview, when I comment out this widget code, I can freely open and close these dialogs at will.
Any help would be greatly appreciated :)
The solution was rather easy. By adding these lines at the top of the view file, dialogs can once again be opened and closed indefinitely.
Yii::app()->getClientScript()
->scriptMap = array(
'jquery.js' => false,
'jquery-ui.min.js' => false
);