Using QDialog as wait icon

thread: 9 messages  |  last: a year ago  |  started: wednesday, october 21, 2009, 7:25 am pdt


#1  |  Ago Luberg (Tallinn) Estonia
Wednesday, October 21, 2009, 7:25 AM PDT

It's not really a bug nor an issue. But thought “feature request” could be somewhere here.

I wanted to use qdialog as a wait icon. That way I can disable user clicking something while ajax is loading. To do so, I had to change some of post.js code.


            // Display WaitIcon (if applicable)
            if (strWaitIconControlId) {
                this.objAjaxWaitIcon = this.getWrapper(strWaitIconControlId);
                if (this.objAjaxWaitIcon) {
                    // wait icon dialog
                    qc.regDB(strWaitIconControlId, '#000000', 10, false, false);
                    this.objAjaxWaitIcon.showDialogBox();
                    this.objAjaxWaitIcon.style.zIndex = '1002';
                    //this.objAjaxWaitIcon.style.display = 'inline';
                }
            };

and


                        // Hid the WaitIcon (if applicable)
                        if (qcodo.objAjaxWaitIcon) {
                            qcodo.objAjaxWaitIcon.hideDialogBox();
                            //qcodo.objAjaxWaitIcon.style.display = 'none';
                        }

Could core post.js be modified so that others could use a dialog as the wait icon? Or is there any better way to show qdialog while ajax is loading?

#2  |  Mike Ho (Sunnyvale, CA) United States of America Qcodo Administrator
Wednesday, October 21, 2009, 10:05 AM PDT

Thanks for the post -- yeah, there actually is probably a cleaner way of doing this...

If you just set up a QDialogBox with MatteClickable = false, and the content being a “Please Wait” icon or text... on any action that you have (e.g. when a user clicks a button), you can simply call a QShowDialogBox action on your event:

$this->dlgPleaseWait = new QDialogBox($this);
$this->dlgPleaseWait->MatteClickable = false;
$this->dlgPleaseWait->Text = "Please Wait...";

$this->btnSubmit->AddAction(new QClickEvent(), new QShowDialogBox($this->dlgPleaseWait));
$this->btnSubmit->AddAction(new QClickEvent(), new QAjaxAction('btnSubmit_Click'));

And then, of course, you want to make sure to hide your dialog box before you render anything.  The $thid->dlgPleaseWait->HideDialogBox() call can simply be in your Form_PreRender() method.

#3  |  Ago Luberg (Tallinn) Estonia
Wednesday, October 21, 2009, 11:36 AM PDT

Mike, thanks for the reply!

I already thought of something similar. The problem is, that I don't want to define those actions in about 100 places, where I use ajax (basically every event triggers ajax action). My goal was to have dialog for each ajax load on the page. I even thought of adding dialog opening functionality to AddAction, but I also use a lot of manual qc.pA from javascript. So, it was easier for me to change the core post.js.

But true, your offered solution is a clean way to implement a dialog. I'm not sure, whether it works when another dialog is already opened (can you open a new dialog when another is opened)? I added z-index 1002 for my wait-dialog to be on top of other dialogs.

Anyway, let it be. If there aren't other developers needing this kind of functionality, then I can easily live with my modification. Although updating qcodo is somewhat painful.

#4  |  Mike Ho (Sunnyvale, CA) United States of America Qcodo Administrator
Wednesday, October 21, 2009, 10:30 PM PDT

Good point -- QForms have a way of defining what the default “Wait Icon” is, and it automagically shows the wait icon on ANY action, and automagically hides the wait icon when the action completes...

But unfortunately, it only works right now with the assumption that the wait icon is just plain HTML.

I think this would be a great idea as a mod so that people can set a custom QDialogBox as a QForm's “Default Wait Icon” as well, and that the framework would automatically know that since it's an instance of a QDialogBox class, it should act slightly differently to display it...

The good news is that we won't lose binary compatibility and it adds some consistency in the way any sort of wait icon is defined on a QForm (image, html, dialogbox or otherwise).  The bad news is that the code changes go slightly beyond just the post.js changes you posted above...

If this is something you'd like to work on further, you can definitely post a QPM and I'd love to take a look.  If not, you could at least post it as a Feature Request in the Issues tracker and hopefully someone else (or myself if I get some time) can give it a try.

#5  |  Ago Luberg (Tallinn) Estonia
Wednesday, November 4, 2009, 7:29 AM PST

A quick question about something similar. Could we have a javascript function, which is executed before ajax callback is done?

The idea would be, that developer can override this function to do stuff. Like on php side we have Form_Load etc. I'm not sure though how you override javascript function, but I think it's doable.

If we had something like that, I could easily have my qdialogbox as a waiting icon. I just call for dialog box inside that overridden function. I also have had other stuff which I'd like to do just before ajax post.

Any thoughts?

#6  |  Mike Ho (Sunnyvale, CA) United States of America Qcodo Administrator
Monday, November 9, 2009, 4:36 PM PST

I believe you can override any javascript method by simply redefining the method.

E.g., if you wanted to override qcodo.postAjax() then you simply define a new method for that javascript method:

qcodo.postAjax = function() { ... }

I'm not sure if that would be the cleanest way though ... qcodo already has the ability to make “High Priority” javascript calls on the ajax return before processing any other javascript... you can simply call QApplication::ExecuteJavaScript(“the js to run”, true); -- and I believe this should execute your javascript first, before doing anything else.

#7  |  apselico (Trujillo, PE) Peru
Friday, August 13, 2010, 10:14 AM PDT

I'm using a QDialog as a wait icon, i have modied the file post.js and all is working fine, i have tested the changes with the default qwaiticon and my own qwaitdialog created for that, these are the changes ( using version 0.4.16 ):

on line 171:

// Hid the WaitIcon (if applicable)
if (qcodo.objAjaxWaitIcon){
    if(qcodo.objAjaxWaitIcon.hideDialogBox)
        qcodo.objAjaxWaitIcon.hideDialogBox();
    else
        qcodo.objAjaxWaitIcon.style.display = 'none';
}

and after that change go to line 193 and replace as follows:

// Display WaitIcon (if applicable)
if (strWaitIconControlId) {
    this.objAjaxWaitIcon = this.getWrapper(strWaitIconControlId);
    if (this.objAjaxWaitIcon){
        if(this.objAjaxWaitIcon.showDialogBox)
            this.objAjaxWaitIcon.showDialogBox();
        else
            this.objAjaxWaitIcon.style.display = 'inline';
    }
};

Maybe it could be integrated on the new realease...

Greetings

#8  |  Mike Ho (Sunnyvale, CA) United States of America Qcodo Administrator
Thursday, August 19, 2010, 9:46 AM PDT

How are you using this on the QForm side?  Could you provide a code snippet / example QForm showing all this together?

#9  |  apselico (Trujillo, PE) Peru
Friday, August 20, 2010, 7:14 AM PDT

Hi Mike, i wanted to avoid that any control would be used in the form while is processing something so i create a QWaitPanel which extends QDialogBox and this is shown in any ajax call (it shows a message with a wait image similar to the image used by QWaitIcon), the problem was that the javascript code which shows and hide the control dont do that in controls wich extends qdialogbox.
this is the code of the QWaitPanel:

<?php
class QWaitPanel extends QDialogBox {
    protected 
$blnMatteClickable false;
    public function 
__construct($objParentObject$strControlId null) {
        
//LLAMADA A CONSTRUCTOR DEL PADRE
        
parent::__construct($objParentObject$strControlId);

        
//DATOS DEL DIALOG BOX
        
$this->strText    '<div class="waitcontrol">Wait a momment please...<br /><br /></div>';

        
$this->blnDisplay  false;
        
$this->strFontSize '16px';
        
$this->strHeight "80px";
        
$this->strPadding "20px";
    }
}
?>

and this is the way how i use it (i create a form base for all my other forms like qcodo site):

<?php
class GeneralForm extends QForm {
    protected 
$strPageTitle;
    
    protected 
$intModulo;

    protected function 
Form_Create() {
        
QApplication::Authenticate();
        if(!empty(
$this->intModulo))
           if(!
Session::TieneAccesoProceso($this->intModulo)) die("NO TIENE ACCESO A ESTE MODULO");

        
//Wait Panel
        
$this->objDefaultWaitIcon = new QWaitPanel($this);
        
//Wait Icon
        //$this->objDefaultWaitIcon = new QWaitIcon($this);
    
}
}
?>

then i extend the base form like this:

<?php
require_once '../includes/prepend.inc.php';

class 
IngresoArticulo extends GeneralForm{
    protected function 
Form_Create() {
        
parent::Form_Create();
        ...
    }
    ....
}
?>

and in my template:

<?php 
require_once __INCLUDES__."/header.inc.php";
$this->RenderBegin();
//my own controls with custom html...
$this->objDefaultWaitIcon->Render();
$this->RenderEnd();
require_once 
__INCLUDES__."/footer.inc.php";
?>
.bc


Copyright © 2005 - 2012, Quasidea Development, LLC
This open-source framework for PHP is released under the terms of The MIT License.