在yii中提交表单时如何关闭fancybox

Question

我在yii中使用fancybox作为表单，问题是当我提交表单时，动作被加载到fancy box中，我想要的是关闭fancy box并在正常页面中打开动作，怎么能我这样做是我的 yii 代码

调用fancybox

<?php
        $this->widget('application.extensions.fancybox.EFancyBox', array(
        'target' => 'a#update',
        'id' => 'referrallink',
        'config' => array(
            'type' => 'iframe',
            'width' => 500,
            'height' => 500,
            'titleShow'=>true,
            'hideOnContentClick'=>true,
            'autoScale'=>true,
        ),));
    ?>

查看

`

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'merchant-form',
    'enableAjaxValidation'=>true,
    'clientOptions'=>array('validateOnSubmit'=>true), 
    'htmlOptions' => array('enctype' => 'multipart/form-data')

)); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php //echo $form->errorSummary($model); 
    ?>

    <div class="row">
        <?php echo $form->labelEx($model,'name'); ?>
        <?php echo $form->textField($model,'name',array('class'=>'signupField','autofocus'=>true),array('size'=>40,'maxlength'=>40))."  ".$form->error($model,'name',array('style'=>'display:inline')); ?>


<div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save',array('class'=>'submitbutton'/* ,'onclick'=>'parent.$.fancybox.close();' */)); ?>
    </div>

<?php $this->endWidget(); ?>

</div>

控制器

    public function actionUpdate($id)
{
    $model=$this->loadModel($id);

        // Uncomment the following line if AJAX validation is needed
        $this->performAjaxValidation($model);

        if(isset($_POST['Merchant']))
        {
            $model->attributes=$_POST['Merchant'];
            $dir='images/merchant';
            if($model->save())
            {
                unlink($model->logo);
                $id=$model->id;
                $file=CUploadedFile::getInstance($model,'logo');
                $fname="$dir/$id.{$file->getExtensionName()}";
                $file->saveAs($fname);
                $model->saveAttributes(array('logo'=>$fname));
                //die($model->password);
            $this->redirect(array('view','id'=>$model->id));
            }
        }

        $this->render('update',array(
            'model'=>$model,
        ));
}

Answer 1

希望对你有帮助：

使用 JS 或 JQuery，表单提交后，您可以关闭 Fancybox 实例，例如 Ajax 提交（使用 JQuery）：

    $("#idForm").submit(function(event) {
            event.preventDefault(); // avoid default form submit
            var url = "path/to/your/server/post/script.any";

            $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#idForm").serialize(), // read and prepare all form fields
                    success: function(data) {
                            // trigger fancybox close on same modal window 
                            $.fancybox.close(); 
                            // trigger fancybox close from parent window
                            // parent.$.fancybox.close()
                    }   
            });
    });

Fancybox 回调设置：

    $("#fancyboxElement").fancybox({
        onClosed : function() {
                    location.href = 'my/target/url/after/close';
            }
});

编辑： Yii Fancybox 扩展设置示例（旧的 fancybox 版本，不是版本 >= 2）(Fancybox page reference) 和 Yii Fancybox plugin reference：

    <?php 
            $config = array(
                    'width' => '100%',
                    'height' => '100%',
                    'autoScale' => true,
                    'scrolling' => 'yes',
                    'transitionIn' => 'none',
                    'transitionOut' => 'none',
                    'type' => 'iframe',
                    'showNavArrows' => false,
                    'enableKeyboardNav' => false,
                    'onStart' => 'js:function(){            
                        window.confirm("Continue?");                 
                    }',
                    'onCancel' => 'js:function(){            
                        alert("Cancel");                 
                    }',
                    'onComplete' => 'js:function(){            
                        alert("Completed!");                 
                    }',
                    'onCleanup' => 'js:function(){            
                        return window.confirm("Close?");                 
                    }',
                    'onClosed' => 'js:function(){            
                        alert("Closed");                 
                    }'
                );

            $this->widget('application.extensions.fancybox.EFancyBox', 
            array( 
               'target' => 'a[rel=selection_list]',
               'config' => $config,
            ));
    ?>