Question

We wish to trow a modal popup telling the user to “please wait” until the forms finishes submitting.

Here is part of my _form.php (just a snipped for readable proposes):

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'event-form',
        'enableClientValidation' => true,
        'clientOptions'=> 
              array('validateOnSubmit'=>true, 
                'afterValidate'=>'js:function() {     
                         $("#publishErrors").empty();
                         $("#event-form_es_").empty();
                         i = true;
                         if($("#EntityEvent_active").is(":checked"))
                         {
                          $("#publishErrors").show().append("<p>Please check:</p>")
                          if($("#Event_name").val()=="")
                          {
                            $("#Event_name").addClass("error"); 
                            ...
                            ...

I confess I’m a little lost on this process and I’m not sure if this will even work, still:

I’m thinking about placing this:

$this->beginWidget('zii.widgets.jui.CJuiDialog'
        , array('options'=>array(
            'title'=>'My Title'
            , 'modal'=>true
            ))
);

echo 'Please Wait While Your Form is Being Submitted';

$this->endWidget('zii.widgets.jui.CJuiDialog');

at the very end of ‘afterValidate’ –

Is there a better approach ?

Please advice

Answer 1

There is already a jquery plugin for this: jQuery BlockUI plugin.

But if you want to use CJuiDialog, just make sure that closeOnEscape is false, and modal is true, also autoOpen should be false.

You could also use a jQueryUI Progressbar inside a CJuiDialog to show progress if you wish.

Edit:

Sample code to hide x button of the dialog:

$this->beginWidget('zii.widgets.jui.CJuiDialog',
    array(
        'id'=>'mywaitdialog',
        'options'=>array(
            'title'=>'My Title',
            'modal'=>true,
            'autoOpen'=>false,// default is true
            'closeOnEscape'=>false,
            'open'=>// supply a callback function to handle the open event
                    'js:function(){ // in this function hide the close button
                         $(".class-of-closebutton").hide();
                    }'
         ))
);

To open the dialog: $("#mywaitdialog").dialog("open");.

You can open the dialog in afterValidate, as you had guessed. While the form data is passed to the server the dialog will show, and after completion url navigation will occur(new page will be loaded).