CJuiDialog

Hi, friends

I have followed to CJuiDialog from wiki tutorial, and i have bind _form.php from view within it. In the _form.php view i have used CJuiDatePicker. when dialog opened, date field showed blank. But if i used CJuiDatePicker without CJuiDialog (not used CJuiDatePicker within CJuiDialog), the date field which contains CJuiDatePicker is work. what’s that problem? please some advice to me. sorry, if my bad English. thanks.

_form.php view




<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'order-form',

	'enableAjaxValidation'=>false,

)); ?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<?php echo $form->errorSummary($model); ?>


	<div class="row">

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

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

		<?php echo $form->dropDownList($model,'customer_id',CHtml::listData(Customers::model()->findAll(),'customer_id','fullname'),

	   array('empty' => '--- Choose---')); ?>

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

	</div>


	<div class="row">

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

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

<?php //echo $form->dropDownList($model,'order_id', array(1=>'Pending', 2=>'Processing',3=>'Completed'));?>


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

	</div>

	




	<div class="row">

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

		<?php echo $form->textField($model,'address',array('size'=>60,'maxlength'=>255,)); ?>

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

	</div>

	

	<label>Address: </label><input id="address"  type="text"/>

  <table>

    <tr><td><label>Latitude: </label></td><td><input id="latitude" type="text"/></td></tr>

    <tr><td><label>Longitude: </label></td><td><input id="longitude" type="text"/></td></tr>

    </table>

    

   

    <input type="hidden" name="location_id" id="location_id" value="" />   

	<div class="row">

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

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

		<?php echo $form->dropDownList($model,'staff_id',CHtml::listData(Staff::model()->findAll(),'staff_id','fullname'),

	   array('empty' => '--- Choose---')); ?>

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

	</div>


	<div class="row">

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

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

		<?php 

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

       'model'=>$model,

       'attribute'=>'received_date',

       'value'=>$model->received_date,

        // additional javascript options for the date picker plugin

      'options'=>array(

      'showAnim'=>'fold',

      //'showButtonPanel'=>true,

      'size'=>30,

      'dateFormat'=>'yy-mm-dd',

      'defaultDate'=>$model->received_date,

       ),

   ));


?>

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

	</div>

	

<script type="text/javascript">


	 

</script>


<div id="divProduct"> </div>    

<input type="button" name="service_photo" value="Add Product" class="Allbutton" onclick="addProduct();" />


<input type="hidden" value="0" id="countLastInput" name="countLastInput" />


	<div class="row buttons">

		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>

	</div>


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


</div><!-- form -->

 



main.php (layout)




<li>

                <?php echo CHtml::link('Create Order', "",  // the link for open the dialog

   					 array(

       					 'style'=>'cursor: pointer; text-decoration: underline;',

   					 'id'=>'menu_add_order',

       					 'onclick'=>"{addClassroom();$('#dialogClassroom').dialog('open'); }"

   					 	));

    ?>


                    </li>


<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

    'id'=>'dialogClassroom',

    'options'=>array(

        'title'=>'Create Order',

        'autoOpen'=>false,

        'modal'=>true,

        'width'=>750,

        'height'=>'auto',

    ),

));?>

<div class="divForForm"></div>

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

<script type="text/javascript">


		 function addClassroom()

		 {


		        $('#dialogClassroom').dialog('open');

		        <?php echo CHtml::ajax(array(

		             'url'=>array('/order/create'),

		             'data'=> "js:$(this).serialize()",

		             'type'=>'post',

		             'dataType'=>'json',

		             'success'=>"function(data)

		             {

		                 if (data.status == 'failure')

		                 {

		                     $('#dialogClassroom div.divForForm').html(data.div);

		                           // Here is the trick: on submit-> once again this function!

		                     $('#dialogClassroom div.divForForm form').submit(addClassroom);

		                 }

		                 else

		                 {

		                     $('#dialogClassroom div.divForForm').html(data.div);

		                     //setTimeout(\"$('#dialogClassroom').dialog('close') \",3000);

		                 }

		  

		             } ",

		             ));

		        ?> 

		     return false; 

		  

		 }


</script>




It seems a little difficult …

I had encountered the same kind of problem with a CJuiDatePikcer in a CJuiDialog.

Your dialogClassroom(CJuiDialog) opens with a content that is supplied with an ajax call, and the text field for the date is in the content, but it remains a normal text field and never becomes a CJuiDatePicker … do I understand your problem right?

In my case, I had to manually convert the textfield to CJuiDatePicker in the success function of the ajax call like




'success'=>"function(data)

{

	if (data.status == 'failure')

	{

		 $('#dialogClassroom div.divForForm').html(data.div);

		// Here is the trick: on submit-> once again this function!

		 $('#dialogClassroom div.divForForm form').submit(addClassroom);

	}

	else

	{

		$('#dialogClassroom div.divForForm').html(data.div);

		 //setTimeout(\"$('#dialogClassroom').dialog('close') \",3000);

		$('#dialogClassroom #Modelname_received_date').datepicker(

			... datepicker options here ...

		);

	}

}



In short, I could not use CJuiDatePicker widget in the dialog and had to call the jQuery UI datepicker manually.

I really don’t know if I had missed something and if there was a much more clever solution to it. I’d like to hear 2nd opinions to it myself. :rolleyes:

Thanks for your sharing. right, the problem as you mentioned. it remains only the normal text field, not CJuiDatePikcer.