Yii - CJuiDialog关闭提交按钮点击 [英] Yii - CJuiDialog Close on submit button click

问题描述

我有一个CJuiDialog，下面是代码

I have a CJuiDialog and below is the code

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'mymodal',
    'options'=>array(
        'title'=>'Your 10 seconds take you into ....',
        'width'=>700,
        'height'=>400,
        'autoOpen'=>true,
        'resizable'=>false,
        'modal'=>true,
        'closeOnEscape' => false,     
    ),

)); ?>

在这个对话框中我有表单，并且以下面的形式提交按钮

In this dialog I have form and in the form I have below submit button

<?php echo CHtml::submitButton('Submit', array('onclick'=>'js:function(){ alert("test"); $(#mymodal).dialog("close");}',
        )); ?>

点击此按钮，我想关闭此对话框并提交表单。但是上面的代码我在Button中写的是不行的。任何语法错误？

on clicking on this button, I want to close this dialog and submit the form . But the above code what I wrote in Button is not working . any syntax errors ?

我尝试的其他方式是，我在对话框中使用按钮，并可以使用

Other way I tried is , I used buttons in the dialog box and able to close the dialog using

`js:function(){$(this).dialog("close")` 

但我无法在此提交表单。所以采取了第一种方法。

But I am not able to submit the form there . So took the first approach .

有没有人可以帮助我正确的解决方案？

Could any one help me the correct solution ?

感谢和问候

Kiran

推荐答案

首先，你必须明白/记住，默认情况下，html提交按钮导航到或加载表单的动作url。因此，如果您的动作网址被正确指定，则默认按钮将简单地提交表单并导航到该网址。

First of all you have to understand/remember that by default a html submit button navigates to or loads the action url of the form. So, provided your action url is correctly specified, the default button will simply submit the form and navigate to that url.

1. 如果发生这种情况，并且操作网址和当前页面的网址不一样，您将再也看不到对话框（由于导航）。

1. If this happens and the action url and the current page url are not the same, you'll not be seeing the dialog box again anyway(due to the navigation).

但是你的动作url和当前url是相同的 ^* ，那么显然默认提交后，相同的url将被再次加载因为你的对话框是'autoOpen'=> true ，它将再次打开。

But incase your action url and current url are the same^*, then obviously after default submission the same url will be loaded again, and since your dialog is 'autoOpen'=>true, it will open again.

所以我可以看到的最好的方法是使用 jquery的ajax 提交您的表单。这可以通过三种方式完成：

So the best course of action i can see for you is using jquery's ajax to submit your form. This can be done in 3 ways:

1. 使用 ajaxSubmitButton（）

echo CHtml::ajaxSubmitButton('SubmitThis',
    $url, // form's action url, you can use createUrl 
    array( // ajaxOptions, use success to close the dialog
       'success'=>'function(){$("#mymodal").dialog("close");}'
    )
);

使用对话框的按钮提交表单。以下示例使用 $。post（） 发布速记ajax请求和 .serialize（） 序列化表单数据：

Use a button of the dialog to submit the form. The sample below uses $.post() shorthand to post an ajax request, and .serialize() to serialize the form data:

// other cjuidialog options
// ...
'buttons'=>array(
    'Submit'=>'js:function(){
                $.post(
                    $("#form-id").attr("action"), // the url to submit to
                    $("#form-id").serialize(), // the data is serialized
                    function(){$("#mymodal").dialog("close");} // in the success the dialog is closed
                );
           }',
    // other buttons
)

您也可以使用正常的提交按钮，但您必须再次使用ajax：

You can also use the normal submit button but you'll have to use ajax again:

'onclick'=>'$.post(
              $("#form-id").attr("action"), // the url to submit to
              $("#form-id").serialize(), // the data is serialized
              function(){$("#mymodal").dialog("close");}
            );
           return false; // to prevent the navigation to the action url
           '

---

[*]如果您使用 CActiveForm ，并没有指定'action'这种情况发生在默认情况下

---

[*] if you are using CActiveForm and haven't specified the 'action' this happens by default

这篇关于Yii - CJuiDialog关闭提交按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！