Search code examples
phpjqueryyiicgridviewcjuidialog

CJuiDialog will not re-open with CGridview inside


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 :)


Solution

  • 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
    );