Yii 1.1: How to insert a Simple Dialog Box

11 followers

I build this simple PHP class (DialogBox.php at the bottom of this wiki) to help you in the dialog box usage on Yii applications. The goal is run any Yii actions into this dialog box and return the resulting value to the calling instance.

in the next image, i use this solution to open a Dialog Box that runs a sequence of 3 actions to perform a Zipcode search, when the zip code is found then the user press "Finish" button and the dialog box is automatically closed, and the selected zipcode is returned.

sample usage

How to Implement

To launch the dialog box.

this piece of code must be used to open the popup, the createDialogBox call creates a css-styled icon ready and configured to launch the jquery dialogbox.

<div id='dialogBoxLaunchIconPosition' style="margin-top: 10px;">
To start testing this dialog box sample, click this icon:
<?php DialogBox::createDialogBox(
    $this
   ,"myDialog1"
   ,"Type your name:"
   ,"site/sample"
   ,"testinput"
   ,"sampleIconCssStyle"
   ,320,300
); 
?>
 
 
When dialog is finished then your input will be shown in this Input element:<br/>
<input id='testinput'></input>
 
</div>

Closing dialog and returning the desired value.

this is the code included in any action to return the dialog response value, as follows:

public function actionSample()
    {
        $model=new SampleModel;
        if(isset($_POST['SampleModel']))
        {
            $model->attributes=$_POST['SampleModel'];
            if($model->validate())
            {
                // form inputs are valid, do something here
                DialogBox::closeDialogBox($model->name,"index.php?r=site/sample");
                return;
            }
        }
        $this->layout = "dialoglayout";
        $this->render('sample',array('model'=>$model));
    }

DialogBox.php

Create a file named DialogBox.php in your components folder. Copy this code into it:

/**
   author:  Christian Salazar, master@ascinformatix.com
*/
class DialogBox {
 
 
        public static function createDialogBox(
             $this_
            ,$dialogName
            ,$dialogTitle
            ,$dialogInitAction
            ,$idInputElement
            ,$iconClass
            ,$w=300
            ,$h=380
            )
        {
            $timer = "timer".$dialogName;
 
            echo "\t<div class='$iconClass' 
                onclick=\"{ $('#$dialogName').dialog('open');
                $timer(); // lanza el timer creado mas abajo
            }\"></div>\n";
 
            self::putDialog($this_
                ,$dialogName
                ,$dialogTitle
                ,$dialogInitAction
                ,true
                ,$w
                ,$h
            );
            self::defineTimerParaCierreDeDialogo($dialogName,$idInputElement);
        }
 
 
 
 
        public static function closeDialogBox($value,$actionResetTo)
        {
            echo "<script>
                if(window.frameElement != null)
                    window.frameElement.value='$value';
                document.location.href='$actionResetTo';
            </script>";
        }
 
 
 
        /* crea un dialogo jquery con un IFRAME dentro
         * el cual contendrá el action a ejecutar y que a su vez
         * servira como PUENTE para trasmitir el resultado
         * del dialogo mediante el atributo IFRAME.VALUE
         * el cual será establecido por el action mediante
         * DialoxBox::closeDialogBox.
         * 
         */
        private static function putDialog($this_,$dialogName,$title
            ,$iframeActionSource
            ,$modal=true,$w=400,$h=300)
        {
            $js='app'.$dialogName;
            $dialog = $dialogName;
            $iframeId = 'iframe'.$dialogName;
            $divForForm = "divForForm-$dialogName";
 
            $this_->beginWidget('zii.widgets.jui.CJuiDialog', array(
                'id'=>$dialog,
                'options'=>array(
                    'title'=>$title,
                    'autoOpen'=>false,
                    'modal'=>$modal,
                    'width'=>$w,
                    'height'=>$h,
                ),
            ));
 
            $src = Yii::app()->baseUrl."?r=".$iframeActionSource;
 
            /* .iframeDialogBg y .iframeDialog  esta en iframe.css
             * 
             */
 
            $iframe = "<iframe value='0' title='response' class='iframeDialog' id='$iframeId' frameborder='0' scrolling='no' src='$src'></iframe>";
 
            $extra="<div style='cursor:pointer;' onclick='closeDialogBox()'>close</div>";
 
            echo "\n\t<div class='iframeDialogBg'>\n\t\t$iframe\n\t</div>\n\t<!-- fin -->\n";
            $this_->endWidget();
        }
 
 
        /* es un timer que se ejecuta cuando se abre el dialogo jquery.
         * 
         * se mantiene revisando por cambios de valor en el iframe.value
         * este valor (iframe.value) es establecido por el script que usa
         * el iframe, en el caso de zipcodefinder es el boton Finish. 
         * 
         * cuando este valor pasa de null o undefined a tener un valor
         * distinto entonces cierra el dialogo jquery, establece
         * al INPUT con ID $idInputElement al valor devuelto.
         */
        private static function defineTimerParaCierreDeDialogo($dialogName,$idInputElement)
        {
            $timer = "timer".$dialogName;
            $iframe = "iframe".$dialogName;
 
            echo "\n";
            echo "<!-- timer de escucha de respuesta del dialogo '$dialogName'  -->";
            echo "\n";
            echo "<script>\n";
            echo "function $timer(){
                    var x = document.getElementById('$iframe');
                    var result = x.value;
                    if(!(result == null || result == 'undefined')){
                        // hay valor definido
                        document.getElementById('$idInputElement').value = result;
                        // cierra el dialogo
                        $('#$dialogName').dialog('close');
                        x.value = null;
                        return;                         
                    }
                    setTimeout($timer,100);
                }</script>\n\n";
        }
 
}

Total 6 comments

#17898 report it
jak007 at 2014/08/08 06:08am
Error

i was trying to use this method to create dialog box but it shows error "Call to a member function beginWidget() on a non-object". Please tell me what's wrong i am new in yii frmework pls help me.

#17897 report it
jak007 at 2014/08/08 06:08am
Error

i was trying to use this method to create dialog box but it shows error "Call to a member function beginWidget() on a non-object". Please tell me what's wrong i am new in yii frmework pls help me.

#14639 report it
Selvakumar at 2013/08/31 08:31am
This is very help ful..
#8198 report it
Peter JK at 2012/05/16 10:19pm
extension url..

hmm.. interesting wiki.. where is the link for extension?...

#5757 report it
bluyell at 2011/11/09 06:42pm
moving it to extensions

Sorry, i will move it to extensions.

#5754 report it
Asgaroth at 2011/11/09 05:40pm
why'

why is this a wiki and not an extension with instructions?

Leave a comment

Please to leave your comment.

Write new article