dropdownlist with cjuiautocompleted

Hi all,

i have two selects, the second one is dependent of the first one. The first select has a lot of results and i would like to




$modelosMueble=CHtml::listData( ModeloMueble::model()->findAll(), 'IdModeloMueble', 'Modelo' );

					

echo CHtml::dropDownList('idModeloMueble','', $modelosMueble,

	array(

		'prompt'=>'Selecciona modelo...',

		'ajax' => array(

			'type'=>'POST',

			'url'=>CController::createUrl('mueble/cargamedidas'), 

			'dataType'=>'json',

			'data'=>array('idModelo'=>'js:this.value'),  

			'success'=>'function(data) {

				$("#idMedida").html(data.dropDownMedidas);

				$("#idColorFrontal").html(data.dropDownFrontal);

				$("#idColorEstructura").html(data.dropDownEstructura);

			}',

		))); 

 

	echo CHtml::dropDownList('idMedida','', array(),array('prompt'=>'Selecciona Medida...'));



I have seen some cjuiautocompleted code like in this post.

What i would like to do is in my first select to use the juiautocompleted widget with a select item, and once i select one of the items returned by autocompleted, i want to load the second select…




 <?php 

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

	...

				'options'=>array(

					  'delay'=>300,

					  'minLength'=>2,

					  'showAnim'=>'fold',

					  'select'=>"js:function(event, ui) { // how can force to load my second select once i click on one item here...

						  var terms = split(this.value);

						  // remove the current input

						  terms.pop();

						  // add the selected item

						  terms.push( ui.item.value );

						  // add placeholder to get the comma-and-space at the end

						  terms.push('');

						  this.value = terms.join(', ');

						  return false;

						}"

					),

					'htmlOptions'=>array(

					  'size'=>'40'

					),

				   ));?>

				 </div>



i dont know if i make myself clear explaining my problem :)

thanks in advance

Hello

I think you can achieve that by following this wiki: Creating a dependent dropdown

Actually i followed this post to do what i have that it works, but i want a little bit more.

I would like to have filter in my first select because i have too many results…

thanks anyway :)

Isn’t that what the autocomplete is for?

Yeah you are right,

depending autocompleted is working. I mean if a select an item in first select, automatically my second select is loaded with new values.

But what i need is in my first select to have an autocompleted or a filter because i have so many results.

excuse me if in that link that you gave me is an example of this but i dont think so…

thanks in advance,

If you take the dependent dropdown wiki, I guess you will be replacing the first


echo CHtml::dropDownList(…);

by


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

  …

  array(

    'ajax' => array(

      'type'=>'POST',

      'url'=>CController::createUrl('controllerName/actionName'),

      'update'=>'#dependentDropdown', // Don't forget to prepend with 'Model_' if $form->dropDownList

    )

  )

);

…

echo CHtml::dropDownList('dependentDropdown','', array());

Hi all,

this is my cjui code:




  <?php 

	$mueble = new Mueble;

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

	'model'=>$mueble,

	'attribute'=>'modelo',

	'source'=>'js: function(request, response) {

			$.ajax({

				url: "'.$this->createUrl('mueble/autocompletemodelo').'",

				dataType: "json",

				data: {	term: request.term,},

				success: function (data) {response(data);}

			})

		 }',

	 'options'=>array(

			  'delay'=>300,

			  'minLength'=>2,

			  'showAnim'=>'fold',

			  'select'=>"js:function(event, ui) {$('#idModeloMueble').val(ui.item.id);}",

	                  'htmlOptions'=>array(  'size'=>'40'),

			));

	   ?>

is working the autocomplete, but where should i put the code that loads the dependent dropdownlist?

i am making some tests now…but in case i dont get the solution…i write this post

thanks in advance,

Try by putting the ajax array item I posted in the previous post into your ‘options’ array:


         'options'=>array(

                          'delay'=>300,

                          'minLength'=>2,

                          'showAnim'=>'fold',

                          'ajax' => array(

                               'type'=>'POST',

                               'url'=>CController::createUrl('controllerName/actionName'),

                               'update'=>'#dependentDropdown', // Don't forget to prepend with 'Model_' if $form->dropDownList

                             ),

                          'select'=>"js:function(event, ui) {$('#idModeloMueble').val(ui.item.id);}",

                          'htmlOptions'=>array(  'size'=>'40'),

                        ));

Hi,

i tried before posting my last post…i does not work…i dont know why…




...

	'options'=>array(

			'delay'=>300,

			'minLength'=>2,

			'showAnim'=>'fold',

			'select'=>"js:function(event, ui) {

				$('#idModeloMueble').val(ui.item.id);

			}",

			'ajax' => array( // this is tested on my dropdownlist and it works but no for juiautocomplete

					'type'=>'POST',

					'url'=>CController::createUrl('mueble/cargamedidas'), 

					'dataType'=>'json',

				        'data'=>array('idModelo'=>'js:this.value'),  

					'success'=>'function(data) {

					     $("#idMedidaMueble").html(data.dropDownMedidas);

						   $("#idColorFrontal").html(data.dropDownFrontal);

						   $("#idColorEstructura").html(data.dropDownEstructura);

						   $("#addCartMueble").css({visibility: "hidden"});

						}',

                   ),

		),...



and my controller in case youu want to check anything:




	public function actionCargamedidas()

    {

		//Medidas

		$muebles = Mueble::model()->findAll('FKModeloMueble=:idModelo', array(':idModelo'=>(int) $_POST['idModelo']));

		$medidas = CHtml::listData($muebles,'FKMedidaMueble','medida.concatened');

		

		$dropDownMedidas = "<option value=''>Selecciona Medida...</option>"; 

		foreach($medidas as $value=>$name)

			$dropDownMedidas .= CHtml::tag('option', array('value'=>$value),CHtml::encode($name),true);

			

		//Colores Frontal

		$frontal = CHtml::listData($muebles,'IdMueble','colorFrontal');

		$dropDownFrontal = "<option value='null'>Selecciona Color Frontal...</option>";

		foreach($frontal as $value=>$name)

			$dropDownFrontal .= CHtml::tag('option', array('value'=>$value),CHtml::encode($name),true);

			

		$dropDownEstructura = "<option value='null'>Selecciona Color Estructura...</option>";


		// return data (JSON formatted)

		echo CJSON::encode(array(

		  'dropDownMedidas'=>$dropDownMedidas,

		  'dropDownFrontal'=>$dropDownFrontal,

		  'dropDownEstructura'=>$dropDownEstructura,

		));

	}



thanks in advance,

Hi all,

i have seen this example:





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

    //'model'=>$model,

    //'attribute'=>'name',

    'id'=>'country-chain',

    'name'=>'country_chain',

    'source'=>$this->createUrl('request/suggestCountry'),

    'options'=>array(

        'delay'=>300,

        'minLength'=>2,

        'showAnim'=>'fold',

        'select'=>"js:function(event, ui) {

            $('#label').val(ui.item.label);//here i would like to load some data from a controller and load my dropdownlists automatically...

            $('#code').val(ui.item.code);

            $('#call_code').val(ui.item.call_code);

        }"

    ),

    'htmlOptions'=>array(

        'size'=>'40'

    ),

));

but, how could i call a controller to get some data and load a dropdownlist??

i’m getting closer :)

thanks!

hi all,

next try is going to be something like this:

http://www.yiiframework.com/forum/index.php/topic/29139-insertar-variable-javascript-en-chtmlajax/page__view__findpost__p__140245




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

    //'model'=>$model,

    //'attribute'=>'name',

    'id'=>'country-chain',

    'name'=>'country_chain',

    'source'=>$this->createUrl('request/suggestCountry'),

    'options'=>array(

        'delay'=>300,

        'minLength'=>2,

        'showAnim'=>'fold',

        'select'=>"js:function(event, ui) {

           addDependentSelect(ui.item.code);

        }"

    ),

    'htmlOptions'=>array(

        'size'=>'40'

    ),

));







<script type="text/javascript">

 ...

 function addDependentSelect(idSelectedAutoComplete)

 {

   <?php

     echo CHtml::ajax(array(

       'url'=>array('controller/method),

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

       'type'=>'post',

       'dataType'=>'json',

       'success'=>"function(data)

       {

           ...

           $('#dependentSelect').html(data.div);

         }

       } ",

    ))

  ?>;

  return false; 

 }

...

</script>



once i select an item on the juiautocomplete, i’ll get the id and load the dependent dropdownlist with the values of the controller.

what do you think?

i’ll try this afternoon :)

thanks!

i have it!




$mueble = new Mueble;

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

					'model'=>$mueble,

					'attribute'=>'modelo',

					'source'=>'js: function(request, response) {

								$.ajax({

									url: "'.$this->createUrl('mueble/autocompletemodelo').'",

									dataType: "json",

									data: {

										term: request.term,

									},

									success: function (data) {

											response(data);

									}

								})

							 }',

					'options'=>array(

						'delay'=>300,

						'minLength'=>2,

						'showAnim'=>'fold',

						'select'=>"js:function(event, ui) {

							jQuery.ajax({

								'url':'/mueble/cargamedidas',

								'dataType':'json',

								'data':{'idModelo':ui.item.id},

								'type':'post',

								'success':function(data){

									$('#idMedidaMueble').html(data.dropDownMedidas);

									$('#idColorFrontal').html(data.dropDownFrontal); 

									$('#idColorEstructura').html(data.dropDownEstructura); 

									$('#addCartMueble').css({visibility: 'hidden'});

									$('#Mueble_modelo').val(ui.item.label);

								}

							}); 

						}",

					),

					'htmlOptions'=>array(

					  'size'=>'40',

					  'value' =>'Escribe modelo...',

					  'onFocus' => '$("#Mueble_modelo").val("");'

					),

				    ));



Congrats and +1. Thanx for sharing

Hi Hibernator!

This is exactly the solution I am searching. Could you please provide the content of "/mueble/cargamedidas"?

I am a Yii-Beginner and still learning a lot.

I implemented the autocomplete function, but dropdown with autocomplete would be the best solution. Thanks!

Regards,

Cy

long time ago…but still you have here the code :) enjoy it…

public function actionCargamedidas()

    {


        //var_dump(&#036;_POST);


        if (isset(&#036;_POST['idModelo']) &amp;&amp; isset(&#036;_POST['aux'])) {


	//Medidas


	&#036;muebles = Mueble::model()-&gt;findAll('FKModeloMueble=:idModelo and auxiliar=:aux', array(':idModelo'=&gt;(int) &#036;_POST['idModelo'], ':aux'=&gt;(int) &#036;_POST['aux']));


	//&#036;muebles = Mueble::model()-&gt;findAll('FKModeloMueble=:idModelo', array(':idModelo'=&gt;1));





	&#036;medidas = CHtml::listData(&#036;muebles,'FKMedidaMueble','medida.concatened');





            if(isset(&#036;_POST['noLabel']))


                &#036;dropDownMedidas = &quot;&quot;;


            else


                &#036;dropDownMedidas = &quot;&lt;option value=''&gt;Selecciona Medida...&lt;/option&gt;&quot;;


                


	foreach(&#036;medidas as &#036;value=&gt;&#036;name)


		&#036;dropDownMedidas .= CHtml::tag('option', array('value'=&gt;&#036;value),CHtml::encode(&#036;name),true);








	&#036;dropDownFrontal = &quot;&lt;option value='null'&gt;Selecciona Material Frontal...&lt;/option&gt;&quot;;


	&#036;dropDownEstructura = &quot;&lt;option value='null'&gt;Selecciona Material Estructura...&lt;/option&gt;&quot;;





	// return data (JSON formatted)


	echo CJSON::encode(array(


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


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


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


	));


        }


        else if (isset(&#036;_POST['idModelo'])) {


           //Medidas


	&#036;muebles = Mueble::model()-&gt;findAll('FKModeloMueble=:idModelo', array(':idModelo'=&gt;(int) &#036;_POST['idModelo']));


            //&#036;muebles = Mueble::model()-&gt;findAll('FKModeloMueble=:idModelo', array(':idModelo'=&gt;1));


	&#036;medidas = CHtml::listData(&#036;muebles,'FKMedidaMueble','medida.concatened');





	&#036;dropDownMedidas = &quot;&lt;option value=''&gt;Selecciona Medida...&lt;/option&gt;&quot;;


	foreach(&#036;medidas as &#036;value=&gt;&#036;name)


		&#036;dropDownMedidas .= CHtml::tag('option', array('value'=&gt;&#036;value),CHtml::encode(&#036;name),true);





	// return data (JSON formatted)


	echo CJSON::encode(array(


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


	));


        }


}