Question

我有一个CJuiDialog，下面是代码

<?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,     
    ),

)); ?>

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

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

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

我试过的其他方法是，我在对话框中使用了按钮，并且能够使用

关闭对话框

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

但我无法在那里提交表格。所以采取了第一种方法。

任何人都可以帮我解决问题吗？

谢谢和问候

基兰

Answer 1

首先，您必须了解/记住，默认情况下，html提交按钮导航到或加载表单的操作网址。因此，只要正确指定了操作网址，默认按钮就会提交表单并导航到该网址。

如果发生这种情况并且操作网址和当前网页网址不相同，则无论如何都不会再次看到该对话框（由于导航）。
但是如果您的操作网址和当前网址相同^*，那么显然在默认提交后，将再次加载相同的网址，并且由于您的对话框为'autoOpen'=>true，它会再次打开。

因此，我能为您看到的最佳做法是使用jquery's ajax提交表单。这可以通过3种方式完成：

直接在表单中使用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()来序列化表单数据：

// 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：

'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'

Answer 2

首先，请勿将js:放入onclick值。正确的前缀是javascript:，在on*中不需要它，其值始终是脚本，默认情况下是Javascript。

其次，您定义了一个永远不会被调用的匿名JS函数。

然后学习使用JS控制台查看错误，并使用JS调试器逐步运行代码。在Firefox中，您可以使用firebug扩展。在Chrome或Opera中，按Ctrl-Shift-I打开包含JS工具的开发人员块。然后，很容易修复当前的JS代码：

function(){
    alert("test");
    $(#mymodal).dialog("close");
}

查看错误？应该没有上面提到的功能，你忘了引用文字。

Yii - CJuiDialog关闭提交按钮单击

2 个答案: