Yii - CJuiDialog关闭提交按钮单击

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提交按钮导航到或加载表单的操作URL.因此,如果您的操作网址已正确指定,则默认按钮将只提交表单并导航到该网址.

1. 如果发生这种情况并且操作URL和当前页面URL不相同,则无论如何都不会再次看到该对话框(由于导航).

2. 但是你的动作url和当前url是相同的^*,然后显然在默认提交后,将再次加载相同的url,并且由于你的对话框是'autoOpen'=>true,它将再次打开.

因此,我能为您看到的最佳行动方案是使用jquery的ajax来提交表单.这可以通过3种方式完成:

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");}'
       )
   );
   

2. 使用对话框的按钮提交表单.下面的示例使用$.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
   )
   

3. 您也可以使用常规提交按钮,但您必须再次使用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'默认情况下会发生这种情况