1. How to Implement
2. DialogBox.php

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.

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