CJuiDatePicker on Modal Window with colorbox

Hello everyone,

I have the following problem. I am using colorbox (jquery plugin for modal windows) to load my forms and update or insert records in my database. Inside the test form i use, i have a field which uses CJuiDatePicker widget to select the data. When the modal opens the first time, the widget works as it should the calendar plays right.

Then, when I submit the form, the popup reloads showing the validation errors of the form, but the Date picker widget does not play anymore…

I have gone crazy last days so I will give you my full implementation. If anyone can explain me why this happens I would be more than happy…!!

this is a simple form model for my test. only contains two fields. both are required.




class CTestFormModel extends CFormModel

{

	public $field1;

	public $field2;


	public function rules()

	{

		return array(array('field1, field2', 'required'));

	}	

}



This is my controller with two actions, the actionPopup() is the one that loads the form inside the popup. the actionIndex() display the link which opens the popup, registers some colorbox javascript code to open the popup. the renderPartialAjax functions uses a CustomClientScript that disables the loading of the core scripts when the popup reloads so that the colorbox scripts do not break.




class TestController extends Controller

{

	public function renderPartialAjax($view,$data=null,$return=false,$includeScriptFiles=false) {

		if(($viewFile=$this->getViewFile($view))!==false) {			

			$output=$this->renderFile($viewFile,$data,true);

			$cs = Yii::app()->clientScript;

			Yii::app()->setComponent('clientScript', new CustomClientScript);

			$output = $this->renderPartial($view,$data,true);

			$output .= Yii::app()->clientScript->renderOnRequest($includeScriptFiles);

			Yii::app()->setComponent('clientScript', $cs);		

			if($return)

				return $output;

			else

				echo $output;				

		} else {

			throw new CException(Yii::t('yii','{controller} cannot find the requested view "{view}".',

				array('{controller}'=>get_class($this), '{view}'=>$view)));

		}

	}


	public function actionIndex(){ $this->render('index'); }


	public function actionPopup()

	{

		$model = new CTestFormModel();

		if(isset($_POST['CTestFormModel']))

		{

			$model->attributes = $_POST['CTestFormModel'];

			if($model->validate()){

				echo 1;

				Yii::app()->end();	

			} 

		}

		echo $this->renderPartialAjax('popup', array('model' => $model), true, true);

	}

}



this is the index.php view:




<?php Yii::app()->clientScript->registerScriptFile('/js/colorbox/colorbox/jquery.colorbox-min.js'); ?>

<?php Yii::app()->clientScript->registerCssFile('/js/colorbox/example1/colorbox.css'); ?>

<?php YiI::app()->clientScript->registerCoreScript('jquery'); ?>

<?php echo CHtml::link('Click Me', CHtml::normalizeUrl(array('/test/popup')), array('id' => 'colorbox-link')); ?>

<script type="text/javascript">

$(document).ready(function(){

	$("#colorbox-link").colorbox({

		opacity: 0.6,

		width: 600,				

	});


	$("body").on("click", "#submit-button", function(){

		$.ajax({

			url: '<?php echo CHtml::normalizeUrl(array("/test/popup")); ?>',

			data: $("#popup-form").serialize(),

			type: 'post',

			success: function(data)

			{

				if(data == 1) $.colorbox.close();

				else

				{

					$.colorbox({

						html: data,

						width: 600,

					})

				}

			}

		});


	});

});

</script>



this is the popup.php view which renders a the form inside the popup




<div class="form">

<?php $form = $this->beginWidget('CActiveForm', array('id' => 'popup-form')); ?>

	

	<div class="row">

		<?php echo $form->labelEx($model, 'field1'); ?>

		<?php echo $form->textField($model, 'field1'); ?>

		<?php echo $form->error($model, 'field1'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model, 'field2'); ?>

		<?php 

			$this->widget('zii.widgets.jui.CJuiDatePicker', array(

			    'model' => $model,

			    'attribute' => 'field2'

			));

		?>

		<?php echo $form->error($model, 'field2'); ?>

	</div>


	<div class="row buttons">

		<?php echo CHtml::button('Submit', array('id' => 'submit-button')); ?>

	</div>	


<?php $this->endWidget(); ?>

</div>



and this is the custom ClientScript i use inside the controller which




<?php


class CustomClientScript extends CClientScript {

	

	public function renderOnRequest($includeScriptFiles = false) {

		$html='';

		if($includeScriptFiles) {

			foreach($this->scriptFiles as $scriptFiles) {

				foreach($scriptFiles as $scriptFile)

					$html.=CHtml::scriptFile($scriptFile)."\n";

			}

		}

		foreach($this->scripts as $script)	// the good stuff!

			$html.=CHtml::script(implode("\n",$script))."\n";


		if($html!=='')

			return $html;

	}	

}