Cjuidatepicker Can't Open When Update Form [Solved]

Yii 1.1 General Discussion
1

Hello every body,

I have a problem with a CJuiDatePicker class.

When I’m on Create Form, I can open the calendar without problems.

When I’m on the Update Form, I can open the calendar only if the field is not empty. If it is empty (or it is “0000-00-00”) I can not open the calendar.

  • Exemple in Create Form :

  • Exemple in Update form (When the field is not empty) :

  • Exemple in update form (when field is empty) :

the calendar "refuse" to open …

My code is :



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


                        'model' => $model,


                        'attribute' => 'date_depart',


                        //'name' => 'Transport[date_depart]',


                        'name' => $model->date_depart,


                        'value' => $model->date_depart,


                        'options' => array(


                            'showButtonPanel' => true,


                            'changeYear' => true,


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


                            'changeMonth' => true,


                            'showAnim' => 'fold',


                            'showButtonPanel' => true,


                            'autoSize' => true,


                            'defaultDate' => '13-03-01',


                        //'showOn'=>'button',


                        //'buttonText'=>'Open calendar',


                        ),


                    ));

I try to use open button, but it does not work to:



$openButton = false;


                    if ($model->isNewRecord == false) {





                        if ($model->date_arrivee == "" || $model->date_arrivee == '0000-00-00') {


                            $openButton = true;





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


                                'model' => $model,


                                'attribute' => 'date_arrivee',


                                'name' => $model->date_arrivee,


                                'value' => $model->date_arrivee,


                                'options' => array(


                                    'showButtonPanel' => true,


                                    'changeYear' => true,


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


                                    'changeMonth' => true,


                                    'showAnim' => 'scale',


                                    'showButtonPanel' => true,


                                    'autoSize' => true,


                                    'defaultDate' => '13-03-01',


                                    'showOn' => 'button',


                                    'buttonText' => 'Open calendar',


                                ),


                            ));


                        }


                    }





                    if ($openButton == false) {


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


                            'model' => $model,


                            'attribute' => 'date_arrivee',


                            'name' => $model->date_arrivee,


                            'value' => $model->date_arrivee,


                            'options' => array(


                                'showButtonPanel' => true,


                                'changeYear' => true,


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


                                'changeMonth' => true,


                                'showAnim' => 'scale',


                                'showButtonPanel' => true,


                                'autoSize' => true,


                                'defaultDate' => '13-03-01',


                            ),


                        ));


                    }

open calendar button does not appear when I am in the condition

Do you know the solution?

2

Hi Co-k-ine

Issues with javascript is always hard to debug could you maybe check if you are using firefox can use the firebug debuging console (best for js debuging) or on chrome the developer tools js console.

But of the bat I did spot something wrong but not sure if it is the route issue:

is that your default date is not matching your date format

‘dateFormat’ => ‘yy-mm-dd’, //example 2012-09-17

‘defaultDate’ => ‘13-03-01’

also have a look at what your db is returning.

3

You’re right, I had not noticed the erro. I fixed it but the problem is still present.

In my controller I use :





$this->layout=false;

(for JUIDialog), Is that $this->layout=false can be the problem?

4

I think you have to use only ‘model’ and ‘attribute’, or only ‘name’ and ‘value’.

Just like you do in CHtml::activeTextField (specifying model and attribute) and CHtml::textField (specifying name and value).



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


                        'model' => $model,


                        'attribute' => 'date_depart',


                        'options' => array(


                            ...


                        ),


                    ));
5

In addition to softark’s recommendation, please also try removing all the ‘showAnim’ lines

6

I would still like to see the firebug console output as this is being done in an overlay so the chances of JavaScript interference is high

7

Hello,

When I use ‘falt’=>true, the calendar does not appear.

You’re right, there are great chances whether interference javascript, but I am unable to solve the problem (there are too many javascript function that I do not know).

How would you explain that the calendar appears when the field is filled and refuses to appear when the field is empty. It’s strange, is not it?

8

Hi Co-k-ine

On your firebug go to the console tab (Complete left on your image iets grayed out), activate it then refresh the page and open the overlay.

The console tab will show you any js errors and ajax calls very usefull in debugging js.

9

Hi Boontjie,

I did not know this feature of firebug. Thanks to you for sharing !

There is a problem javascript :

The line problem :

How to define "instActive"?

10

What version of Yii and jquery are you using, a quick search on google it seems to be a issue in a older version of jquery

11

Yii is updated (version 1.1.12)

Jquery too (version 1.8.1)

I tried to use the extension EJuiTimePicker rather than CJuiDatePicker.

EDIT : It’s don’t work

EDIT 2 : I realized that the error only occurs when my calender opens and I hover a date

12

When I use only model and attribute, the calandar not appear even though the field is not empty

13

Would you please post your latest view script code for the form?

Not all the lines, but only the relevant parts will be fine. :)

14 


<?php


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


                        'model' => $model,


                        'attribute' => 'date_depart',


                        'flat'=>true,


                        'options' => array(


                            //'showAnim' => 'fold',   


                        ),


                    ));


                    ;


                    ?>

When I am in update form i can’t see calandar

15
  1. ‘flat’?

As I understand, the date picker will be displayed as an inline calendar when ‘flat’ is true.

Is it your intention?

http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker#flat-detail

  1. Do you have any conditional code for updating?

In your previous code, you had different settings of date picker for creating and updating.

Do you still have that? If so, please show that part of the code.

  1. Dialog

You are using a date picker in a dialog. So, could you show us how you do it in your code?

16

  1. With ‘flat’=>true, I want to check if the calendar is displayed in update form, but it is not.

I have two field ( ‘date_arrivee’ and ‘date_depart’), I had different settings of date picker only for ‘date_arrivee’.

  1. Yes, I using a dialog.

controller/TransportFOController.php : 


public function actionAjaxUpdate() {

        $this->layout = false;

[...]

            $this->render('_ajaxForm', array(

            'model' => $model,

            'etape'=>$model->etape,

            'destination_form'=>$destination_form,

        ), false,true);

        

      

    }

/view/transportFO/ajax_form.php :



<?php





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


                'id'=>'UpdateForm',


                // additional javascript options for the dialog plugin


                'options'=>array(


                        'title'=>'Update form',


                        'autoOpen'=>true,


                        'modal'=>false,


                        'width'=>'auto',


                        'heigth'=>'auto',


                        'close'=> 'js: function(event, ui){ window.location = "'.Yii::app()->controller->createUrl('index',array('etape'=>$etape, 'type'=>CHtml::encode($_GET['type']))).'";}',


                ),


            ));


  


 echo $this->renderPartial('_form', array('model'=>$model,'type'=>CHtml::encode($_GET['type']), 'destination_form'=>$destination_form), false, true);


 $this->endWidget('zii.widgets.jui.CJuiDialog');


?>

/view/transportFO/_form.php :



  <?php


// I had different settings of date picker for creating and updating


                    $openButton = false;


                    if ($model->isNewRecord == false) {





                        if ($model->date_arrivee == "" || $model->date_arrivee == '0000-00-00') {


                            $openButton = true;





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


                                'model' => $model,


                                'attribute' => 'date_arrivee',


                                //'name' => $model->date_arrivee,


                                'options' => array(


                                    //'showAnim' => 'scale',


                                    'showOn' => 'button',


                                    'buttonText' => 'Open calendar',


                                ),


                            ));


                        }


                    }





                    if ($openButton == false) {


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


                            'model' => $model,


                            'attribute' => 'date_arrivee',


                            //'name' => $model->date_arrivee,


                            'options' => array(


                                //'showAnim' => 'scale',                            ),


                        ));


                    }





[...]





// For second date field


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


                        'model' => $model,


                        'attribute' => 'date_depart',


                        'flat'=>true,


                        'options' => array(


                            //'showAnim' => 'fold',   


                        ),


                    ));


                    ;

When I remove :


'name' => $model->date_arrivee,

The calendar does not appear in update Form (even when the field is not empty)

17

up

18

But setting $model->date_arrivee to ‘name’ doesn’t make sense.

You may be able to display the date picker by accident, but you will never be able to retrieve the field value in your controller with a name like that. It changes its field name according to its value. I don’t think you can get the value of the field that has not a fixed name.

Well, would you please post your code a little bit more?

I’d like to know what you do to show the dialog. Is there any difference when you open the dialog in creating and updating?

19

When I am in create form, $model->date_arrivee is empty.

the code generated by yii is :



<script type="text/javascript">


/*<![CDATA[*/


[...]


jQuery('#Transport_date_arrivee').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01'});


jQuery('#Transport_date_depart').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01'});


[...]


/*]]>*/


</script>

But you’re right, it’s doesn’t make sense, because when I have a empty field, the id field in the update form is the same as that of the field in create form. That create a conflict of id.

Then I did like this :

/view/transportFO/_form.php



<?php


[...]


if ($model->isNewRecord == false) {


                       


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


                                'model' => $model,


                                'attribute' => 'date_arrivee',


                                'options' => array(


                                   [...]


                                ),


                                'htmlOptions'=> array('id'=>'date_arrivee_edit')


                            ));


                        } else {


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


                            'model' => $model,


                            'attribute' => 'date_arrivee',


                            'options' => array(


                                 [...]


                            ),


                        ));


                    }


[...]





if ($model->isNewRecord == false) {


                           


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


                                    'model' => $model,


                                    'attribute' => 'date_depart',


                                    'options' => array(


                                             [...]


                                            ),


                                'htmlOptions'=> array('id'=>'date_depart_edit')


                                    ));


                        } else {


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


                                    'model' => $model,


                                    'attribute' => 'date_depart',


                                    'options' => array(


                                             [...]


                                            ),


                               


                                    ));


                    }


[...]


?>

but the calendar still does not appear when the field is empty.

Looking at the result of the ajax request, I noticed that yii Generais twice the same javascript code:



<script type="text/javascript">


/*<![CDATA[*/


jQuery('a[rel="tooltip"]').tooltip();


jQuery('a[rel="popover"]').popover();


jQuery('#UpdateForm').dialog({'title':'Update form','autoOpen':true,'modal':false,'width':'auto','heigth':'auto','close': function(event, ui){ window.location = "/inscriptjmm/index.php?r=transportFO/index&etape=3&type=Plane";}});


jQuery('#date_arrivee_edit').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01','showOn':'button','buttonText':'Open calendar'});


jQuery('#date_depart_edit').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01'});


/*]]>*/


</script>


[...]


<script type="text/javascript">


/*<![CDATA[*/


jQuery('a[rel="tooltip"]').tooltip();


jQuery('a[rel="popover"]').popover();


jQuery('#UpdateForm').dialog({'title':'Update form','autoOpen':true,'modal':false,'width':'auto','heigth':'auto','close': function(event, ui){ window.location = "/inscriptjmm/index.php?r=transportFO/index&etape=3&type=Plane";}});


jQuery('#date_arrivee_edit').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01','showOn':'button','buttonText':'Open calendar'});


jQuery('#date_depart_edit').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','changeMonth':true,'autoSize':true,'defaultDate':'2013-03-01'});


/*]]>*/


</script>

I can not understand how this happens. Monday I’d other tested with php-xdebugs.

/view/transportFO/Index.php (creating)



<?php


[...]


echo $this->renderPartial('_form', array('model'=>$model,'type'=>$type, 'destination_form'=>$destination_form));





[...]


    echo $this->renderPartial('_manage', array('model'=>$model, 'destination_form'=>$destination_form, 'etape'=>$etape, 'nation'=>$nation));


    


?>


<div id="req_res"></div>


</div>

In _manage.php, I create AjaxLink which opens dialog into : <div id="req_res"></div>

/view/transportFO/_ajaxForm.php (updating) :



&lt;?php





&#036;this-&gt;beginWidget('zii.widgets.jui.CJuiDialog', array(


                'id'=&gt;'UpdateForm',


                // additional javascript options for the dialog plugin


                'options'=&gt;array(


                        'title'=&gt;'Update form',


                        'autoOpen'=&gt;true,


                        'modal'=&gt;false,


                        'width'=&gt;'auto',


                        'heigth'=&gt;'auto',


                        'close'=&gt; 'js: function(event, ui){ window.location = &quot;'.Yii::app()-&gt;controller-&gt;createUrl('index',array('etape'=&gt;&#036;etape, 'type'=&gt;CHtml::encode(&#036;_GET['type']))).'&quot;;}',


                ),


            ));


  


 echo &#036;this-&gt;renderPartial('_form', array('model'=&gt;&#036;model,'type'=&gt;CHtml::encode(&#036;_GET['type']), 'destination_form'=&gt;&#036;destination_form), false, true);


 &#036;this-&gt;endWidget('zii.widgets.jui.CJuiDialog');


?&gt;

/view/transportFO/_manage.php (create ajaxLink)



  &#036;this-&gt;widget('bootstrap.widgets.BootGridView', array(


            'type' =&gt; 'striped bordered condensed',


            'dataProvider' =&gt; &#036;model-&gt;search(&#036;merge),        


            'template' =&gt; &quot;{items}&quot;,


            'columns' =&gt; array(


              [...]


                '' =&gt; array(


                    'type' =&gt; 'raw',


                    'value' =&gt; '


                                CHtml::ajaxLink(


            &#092;'&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt;&#092;',          


            array(&quot;ajaxUpdate&quot;, &quot;id&quot;=&gt;&#036;data-&gt;idtransport,&quot;type&quot;=&gt;&quot;' . CHtml::encode(&#036;type) . '&quot;, &quot;etape&quot;=&gt;&#036;data-&gt;etape),


            array(&#092;'update&#092;'=&gt;&#092;'#req_res&#092;'),


            array(&quot;data-original-title&quot;=&gt;&quot;Update&quot;, &quot;class&quot;=&gt;&quot;update&quot;, &quot;rel&quot;=&gt;&quot;tooltip&quot;)


            )


            ',


                    


             [...]


            ),


        ));
20

Ah, now I think I’ve got a hint. Duplicated ids …

You have 2 sets of dialog & form in the same page … one for creation and the other for updating, don’t you?

So I guess the duplicated IDs for the date fields might be the cause of the problem.

Would you please try the following?

/view/transportFO/_form.php



&lt;?php


...


&#036;id = &#036;model-&gt;isNewRecord ? 'date_arrivee' : 'date_arrivee_edit';


&#036;options = array(


	...


);


&#036;options['showOn'] = (&#036;model-&gt;date_arrivee == '' || &#036;model-&gt;date_arrivee == '0000-00-00') ? 'button' : 'focus';


&#036;form-&gt;widget('zii.widgets.jui.CJuiDatePicker', array(


	'id' =&gt; &#036;id,


	'name' =&gt; CHtml::activeName(&#036;model, 'date_arrivee'),


	'value' =&gt; &#036;model-&gt;date_arrivee,


	'options' =&gt; &#036;options,


));


...


&#036;id2 = &#036;model-&gt;isNewRecord ? 'date_depart' : 'date_depart_edit';


&#036;options['showOn'] = (&#036;model-&gt;date_depart == '' || &#036;model-&gt;date_depart == '0000-00-00') ? 'button' : 'focus';


&#036;form-&gt;widget('zii.widgets.jui.CJuiDatePicker', array(


	'id' =&gt; &#036;id2,


	'name' =&gt; CHtml::activeName(&#036;model, 'date_depart'),


	'value' =&gt; &#036;model-&gt;date_depart,


	'options' =&gt; &#036;options,


));


...


?&gt;

I think it’s better to use ‘name’ and ‘value’ pair, instead of ‘model’ and ‘attribute’, when your page has multiple forms for the same model.

And, ‘echo $this->renderPartial(…)’ is not correct when the 3rd parameter is false.