Yii - CJuiDialog Close on submit button click

问题:

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

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 ?

Thanks and Regards

Kiran

回答1:

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. 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).

2. 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.

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. Use ajaxSubmitButton() directly in the form:

   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. 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
   )
   

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

---

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

回答2:

Firstly, don't put js: in your onclick value. The right prefix is javascript: and it is unneeded in on* whose values are always scripts, by default in Javascript.

Secondly, you defined an anonymous JS function that is never called.

Then learn to use a JS console to see the errors, and a JS debugger to run your code step by step. In Firefox, you can use the firebug extension. In Chrome or Opera, press Ctrl-Shift-I to open the developer block that contains the JS tools. Then it will be easy to fix your JS code that is currently:

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

See the errors? There should be no function as noted above, and you forgot to quote a text.