dynamically updating dropdownlist via CJuiDatePicker [solved]

Hello,

I am having a bit of a problem with dynamically filling the dropDown List via CJuiDatePicker widget.

I have a dynamically filled dropdownList:


<?php echo $form->dropDownList($model, 'start', $model->freeSlots($date); ?>

I want to somehow get data from date picker to freeSlots method, i assume this could be accomplished with onSelect option in date picker to load value and reload page with ajax? however i do not find a way to use it.

Is there any better way of doing this?

here is current code for datepicker:


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

'name'=>'date[my_date]',

'model'=>$model,

'value'=>$model->my_date,

'options'=>array(

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

'showAnim'=>'fold',

'beforeShowDay' => 'js:$.datepicker.noWeekends',

'onSelect' => '',  // is this needeD?

),

'htmlOptions'=>array(

'style'=>'height:20px;width:80px;'

),

));

Thanks in advance!

You should use onChange.

Something like:


'onChange'=>CHtml::ajax(... 'data'=>'$(this).val()')

On the onChange you call a ajax function, and pass as data the value of the datepicker.

This function should return the proper dropdownlist so you can replace the old one with the filtered one.

ps: welcome to the forum! I wish you lot of success in developing with Yii!

what i got is u want to reload dropdown with new options as u change the date from the datepicker.

using $model->freeSlots($date) will populate the dropdown for the first time when u load the form.

so have to use the onSelect event of the CJuidatePicker.

U can do it like this, its tried & tested:


'onSelect'=> 'js: function(dateText, inst) {'.

	CHtml::ajax(array('type'=>'POST','datatype'=>'html','url'=>array('test'), // ur controller action

				'data'=>array('selDate'=>'js: dateText'),

				'success'=>'function(html){

					 var srvCombo ="'. CHtml::activeId($model, "start").'"; // replace 'start' to ur dropdown attribute

					 $(srvCombo).html(html);

					 return false; }',)

			).

	'}'



load the dropdown with default options or no options, as required, on form load.

hope this solves ur problem.

@ zaccaria, Hey Zac! i couldn’t find an onChange event for the CJuidatePicker. is that in some Yii update or what?

You got what i needed, however for some reason your ‘success’ function did not work for me.

It got the content it should display but somewhere dropped it in the process.

i changed the ‘success’ function to use update innerHTML content directly, dunno if there is a more yii way of doing this.

this is my whole ‘onSelect’ option now:




'onSelect'=> 'js: function(dateText, inst) {'.

                CHtml::ajax(array('type'=>'POST','datatype'=>'html','url'=>array('test'), 

                                        'data'=>array('selDate'=>'js: dateText'),

                                        'success'=>'function(html){

                                                 var srvCombo ="'. CHtml::activeId($model, "start").'";

                                                 document.getElementById(srvCombo).innerHTML = html;

                                                 return false; }',)

                                ).

                '}'



Thank you both for assistance!

I’AM trying something like




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

                          'attribute'=>'res_date',

                          'model'=>$model,

                          'options'=>array(

                          'showAnim'=>'fold',

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

                          'changeMonth' => 'true',

                          'changeYear' => 'true',

                          'duration'=>'fast',

                          'showButtonPanel' => 'true',

                          'onSelect'=> 'js: function(dateText, inst) {'.

                             CHtml::ajax(array('type'=>'POST','datatype'=>'html','url'=>array('reservatandem/horarios'),

                                        'data'=>array('selDate'=>'js: dateText'),

                                        'success'=>'function(html){

                                                 var srvCombo ="'. CHtml::activeId($model, "res_id_calendario_bloque").'";

                                                 $(srvCombo).html(html);

                                         return false; }',)


                                ).

                '}',

                               ),

                          

                          'htmlOptions'=>array(

                          'style'=>'height:15px;',

                             ),

                     ));

               ?>



my controller




public function actionHorarios()

{


         $dropzone = Yii::app()->user->dropzone;

         $bookdate_str = $_POST['ResReservacion']['res_date'];

	 $bookdate = date("Y/m/d", strtotime($bookdate_str));

	 $today = date("Y/m/d");

          //determinar el dia de la semana


	     $ndow = date("N", strtotime($bookdate_str) );


		  //obtener dia de la semana de la fecha

             switch ($ndow) {

              case 1:

                $dow="mon";

              break;

			  case 2:

                $dow="tue";

              break;

			  case 3:

                $dow="wen";

              break;

			  case 4:

                $dow="thu";

              break;

			  case 5:

                $dow="fri";

              break;

			  case 6:

                $dow="sat";

              break;

			  case 7:

                $dow="sun";

              break;




          }


  

         $sql2 ="SELECT  res_id_calendario FROM cuautla.res_calendario

                  where dropzone=:dropzone and

                        res_fecha_inicial <= :bookdate and  res_fecha_final >= :bookdate and ";


         $sql2 = $sql2 . $dow ."= true";


	 $params = array(  ':dropzone'=>$dropzone,

	                  ':bookdate'=>$bookdate,

                      )  ;


	 //buscar el id

         $calendario=ResCalendario::model()->findBySql($sql2,$params);

         $_res_id_calendario = $calendario->res_id_calendario;


  

         $data=CHtml::listData(ResCalendarioBloque::model()->findAll('res_id_calendario=:idcalendario',array(':idcalendario'=>$_res_id_calendario)) ,

                                'res_id_calendario_bloque', 'resbloques.res_hora_inicio' );


        

    foreach($data as $value=>$hora)

    {

        echo CHtml::tag('option',

                   array('value'=>$value),CHtml::encode($hora),true);

    }


    

}



but does not work.

I have an ajax buttom to test the controller and works fine




<?php 	echo CHtml::ajaxSubmitButton('Update Time',  array('reservatandem/horarios'),

	                array( 'update'=>'#'.CHtml::activeId($model,'res_id_calendario_bloque')));

	        ?>




Thanks

Let me clarify that the “onSelect” must be within the ‘options’ array. I had that confusion a while back :) Thanks

Hi guys.

I am also having a problem dynamically creating a dropdown after selecting the date. Here is a little background of the application. I am trying to make a booking systems for a car wash. Only one car can be booked per hour and booking for the next day should stop after 1800. I have a model with the trading hours:

<?php

[color="#C0C0C0"]/**

  • This is the model class for table "hours".

  • The followings are the available columns in table ‘hours’:

  • @property integer $id

  • @property string $times

*/[/color]

[color="#4169E1"]class[/color] Hours [color="#4169E1"]extends[/color] CActiveRecord

the only thing i added to this is a function to return the list of hours.

    public static function hoursList(){


        &#036;model = Hours::model()-&gt;findAll();


        &#036;items = array();


        foreach(&#036;model as &#036;hours){


                &#036;items[&#036;hours-&gt;times]=&#036;hours-&gt;times;


        }


        return &#036;items;


    }

I am storing all my bookings in the bookings table and the model looks like this.

<?php

/**

  • This is the model class for table "bookings".

  • The followings are the available columns in table ‘bookings’:

  • @property integer $id

  • @property string $time

  • @property string $date

  • @property integer $num_cars

  • @property string $treatment

  • @property integer $status

  • @property string $booking_ref

  • @property integer $user_id

*/

class Bookings extends CActiveRecord {

the view which is giving me a problem is like this:

        &lt;div class=&quot;form&quot;&gt;


            &lt;?php


            &#036;form = &#036;this-&gt;beginWidget('CActiveForm', array(


                        'id' =&gt; 'bookings-form',


                        'enableAjaxValidation' =&gt; false,


                    ));


            ?&gt;





            &lt;p class=&quot;note&quot;&gt;Fields with &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt; are required.&lt;/p&gt;





            &lt;?php echo &#036;form-&gt;errorSummary(&#036;model); ?&gt;





            &lt;table&gt;


                &lt;tr&gt;


                    &lt;td&gt;


                        &lt;?php echo &#036;form-&gt;labelEx(&#036;model, 'date'); ?&gt;


                       [color=&quot;#FF0000&quot;] &lt;?php


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


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


                            'attribute' =&gt; 'date',


                            // additional javascript options for the date picker plugin


                            'options' =&gt; array(


                                'showAnim' =&gt; 'fold',


                                'minDate' =&gt; Bookings::disableTomorrow(),


                                'onChange'=&gt;CHtml::ajax(


                                        array(


                                            'type'=&gt;'POST',


                                            'url'=&gt;CController::createUrl('bookings/dynamictime'),


                                            'update'=&gt;'#time',


                                            )


                                        )


                                ),


                            'htmlOptions' =&gt; array(


                                'style' =&gt; 'height:20px;'


                            ),


                        ));


                        ?&gt;[/color]


                        &lt;?php echo &#036;form-&gt;error(&#036;model, 'date'); ?&gt;


                    &lt;/td&gt;


                    &lt;td&gt;


                       [color=&quot;#FF0000&quot;] &lt;?php echo &#036;form-&gt;labelEx(&#036;model, 'time'); ?&gt;


                        &lt;?php echo &#036;form-&gt;dropDownList(&#036;model, 'time', array()); ?&gt;


                        &lt;?php echo &#036;form-&gt;error(&#036;model, 'time'); ?&gt;[/color]


                    &lt;/td&gt;


                &lt;/tr&gt;


                &lt;tr&gt;


                    &lt;td colspan=&quot;2&quot;&gt;


                        &lt;?php echo &#036;form-&gt;labelEx(&#036;model, 'num_cars'); ?&gt;


                        &lt;?php echo &#036;form-&gt;textField(&#036;model, 'num_cars'); ?&gt;


                        &lt;?php echo &#036;form-&gt;error(&#036;model, 'num_cars'); ?&gt;


                    &lt;/td&gt;


                &lt;/tr&gt;


                &lt;tr&gt;


                    &lt;td colspan=&quot;2&quot;&gt;


                        &lt;?php echo &#036;form-&gt;labelEx(&#036;model, 'treatment'); ?&gt;


                        &lt;?php echo &#036;form-&gt;dropDownList(&#036;model, 'treatment', Bookings::treatmentList()); ?&gt;


                        &lt;?php echo &#036;form-&gt;error(&#036;model, 'treatment'); ?&gt;


                    &lt;/td&gt;


                &lt;/tr&gt;


                &lt;tr&gt;


                    &lt;td colspan=&quot;2&quot;&gt;


                        &lt;?php echo CHtml::submitButton(&#036;model-&gt;isNewRecord ? 'Create' : 'Save'); ?&gt;


                    &lt;/td&gt;


                &lt;/tr&gt;


            &lt;/table&gt;


            &lt;?php &#036;this-&gt;endWidget(); ?&gt;





        &lt;/div&gt;&#60;&#33;-- form --&#62;

The highlighted sections in particular…

I have also attached the files that I think are relevant to my problem.

PLZ HELP -> this is what it looks like now.

username: user

password: user

Book Now

1697

BookingsController.php

Hi there,

You have a couple of errors on your page (jquery.tools.js throws one of them)

After, there is no ‘onChange’ event in CJuiDatePicker but ‘onSelect’ and that should be within the ‘options’ property.

Also, if you look at http://www.yiiframework.com/doc/api/1.1/CHtml#ajax-detail, you will see that this function writes the necessary javascript code to trigger the ajax request, therefore it should be ‘within’ a function. See the above comments of this threat carefully.

Best