Question

我在yii中使用fancybox作为表单，问题是当我提交表单时将动作加载到花式框中，我想要的是关闭花式框并在正常页面中打开动作，怎么能我在这里做的是我的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版本，而非版本＆gt; = 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,
            ));
    ?>

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

1 个答案: