[solved] Dudas con la extensión EChosen en combos dependientes (dropDownList)

Hola a todos les expongo este problema y agradezco mucho la ayuda que me puedan dar:

Tengo en mi base de datos varios combos dinamicos, en especial el de clientes donde hay muchos clientes, pasan de 2000 y se me hace engorroso seleccioar uno entre tantos, para eso utilizo la extensión EChosen-1.5.1, que realmente funciona bien las busqueda que hace, el problema es que al selecionar el cliente en el 1er dropDownList, no muestra los correspondientes en el segundo dropDownList, pero cuando doy F12 en el debug si los muestra, o sea, funciona, ya que antes de usar la extension si funcionaba bien, aqui muestro como trabajo los combos dependientes:

Tengo una tabla clientes y una firmantes relacionadas uno a muchos por CodCliente, que es llave primaria en la tabla clientes y en la tabla firmantes tengo el campo IdCliente para la relacion.

En el controlador pongo la funcion: Actualizar firmantes:




 public function actionActualizarFirmantes() {

    	$model = Clientes::model()->findByPk($_POST['idCodigo']);


    	//llenar firmantes

    	$data = CHtml::listData($model->firmantes, 'CI', 'Nombre');//aqui busco en la tabla firmantes los CI y los Nombres del Cliente seleccionado en la tabla clientes

    	$firmantes = "";

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

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


    	// return data (JSON formatted)

    	echo CJSON::encode(array(

        	'firmantes' => $firmantes

    	));

	}



en el form la extension EChosen la pongo de esta forma:




 <?php

                    	$this->widget('ext.EChosen.EChosen', array(

                        	'target' => 'select',

                        	'useJQuery' => true,

                        	'debug' => false,

                    	));

                    	?>



En el form:

Estos son los combos:

Primer combo, selecciono el cliente:




<td colspan="3" title="Selecione el cliente">

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

                    	<?php

                    	echo $form->dropDownList($model, 'CodCliente', CHtml::listData(Clientes::model()->findAll(array('order' => 'Descripcion')), 'CodCliente', 'Descripcion'), array(

                        	'ajax' => array(

                            	'type' => 'POST',

                            	'url' => CController::createUrl('datossal/actualizarFirmantes'),

                            	'dataType' => 'json',

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

                            	'success' => 'function(data) {

				$("#Datossal_CI").html(data.firmantes); 

			}')

                            	)

                    	);

                    	?>

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

  	</td>



Segundo combo, donde se debe mostrar los nombres de las personas relacionadas con ese cliente seleccionado

[code]

<td title="Al seleccionar el cliente se muestra los autorizados a firmar facturas">

<?php echo $form->

Saludos de nuevo, sobre este post, el problema es que cuando trato de usar la extension Echosen para hacer un filtro de busqueda en mi primer combo, me hace bien el filtro, pero no me muestra los resultado para el segundo combo dependiente del primero, estoy tratando de usar esta extensión, pero igual, necesito resolver esta situación, si no fuese con Echosen con otra que me puedan sugerir.

Mi primer combo con el filtro hecho por la extension:

La imagen sin actualizar segundo combo (Persona Autorizada):

Aqui dejo dos imagenes de mis combos, en el primero se observa como al hacer el filtro me hace la busqueda y en el segundo combo dependiente del primero, no me muestra los resultados, esto es lo que quiero resolver. Gracias por la ayuda que me puedan dar.

Esta tercera imagen es como aparecen los dos combos sin la extension Echosen, pero son muchos clientes, por lo que hago el filtro:

Por favor, es que esta extension no funciona con combos dinamicos?, o se que hay otra extension que me permita mejor lo que necesito, necesito ayuda

Buenas Rafael.

Perdona por tardar tanto en contestar pero los fines de semana intento desconectar un poco :).

No creo que tu problema sea utilizar EChosen o no. En mi opinión lo que pasa es que no estás cargando el resultado JSON de tu llamada AJAX en ningún control.

Tú tienes esto:




$("#Datossal_CI").html(data.firmantes);



Esto significa que tu lista desplegable dependiente tendría que tener como id el nombre "Datossal_CI", pero, has comprobado en el código HTML que realmente su ID sea ese?

Yo indicaría explícitamente el id para la lista desplegable dependiente. Si mal no entiendo, esta extensión cambia principalmente el estilo de las listas dependientes, no debería de implicar nada más (aunque podría ser que cambiase ids de listas desplegables).

Un saludo.

Gracias lagogz por responder voy a analizar lo que me dices, realmente, si no utilizo la extension si muestra los resultados, como habras podido ver en las imágenes.

Buenas, Rafael.

Entiendo lo que dices, pero te explico:

  • "Datossal_CI" es el identificador que Yii da al control de formulario que viene del nombre del modelo (Datossal) y del campo al que se refiere dentro del mismo (CI). Yii hace esto automáticamante.

  • Podría ser que por algún motivo ese nombre cambiase (no es lo normal), por eso cuando se nombran identificadores explícitamente (como cuando tú rellenas el combo dependiente) es conveniente utilizar identificadores o nombres que sepas seguro que son esos. De ahí que yo siempre establezca identificadores propios y no use los que Yii pone automáticamente.

Si no se soluciona comenta aquí y pruebo la extensión personalmente.

Un saludo.

Gracias lagogz, al debuguear y escoger en la tabla Cliente (1er combo), me muestra como identificador el Codigo del cliente, eso es correcto, ya que mi identificador es ese para clientes en datossal, en mi identificador de CI, me coge el primero que encuentra en la otra tabla, eso tambien es correcto, pero no la muestra

Datossal[CI]63100422761Datossal[CodCliente]7001

Rafael, estás seguro de que esos son los identificadores de los controles. Creo q no, esos serán los nombres.

Yii hace lo siguiente:

  • Modelo "MiModelo" y campo "MiCampo".

  • Añado un control en un formulario para mostrar este campo.

  • Yii añade las siguintes propiedades al control:

    • id="MiModelo_MiCampo"

    • name="MiModelo[Micampo]"

Podrías pegar el código HTMl de tu vista para estos 2 controles?

Ok, gracias aqui te pongo los codigos de la vista:

utilizo primero un script:




<script>

	$(function() {

    	$.ajax({

        	url: 'index.php?r=datossal/actualizarFirmantes',

        	type: 'POST',

        	dataType: 'json',

        	data: {

            	"idCodigo": $('#Datossal_CodCliente').val()

        	},

        	success: function(data) {

            	$("#Datossal_CI").html(data.firmantes);

        	}

    	});

.....

 $.ajax({

        	url: 'index.php?r=datossal/salvarFactura',

        	type: 'POST',

        	dataType: 'text',

        	data: {"detalle": tbl,

 		....

            	"cliente": $('#Datossal_CodCliente').val(),  	

            	"ci": $('#Datossal_CI').val(),

                 	....      	

        	},

        	success: function(data) {

            	if (data === 'fail')

                	alert('Ya existe un registro con ese número consecutivo');

            	else

                	window.location.href = 'index.php?r=datossal/admin';

        	}

    	});

    	return false;

	});

</script>



Mi primer combo




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


                    	<?php

                    	echo $form->dropDownList($model, 'CodCliente', CHtml::listData(Clientes::model()->findAll(array('order' => 'Descripcion ASC')), 'CodCliente', 'Descripcion'), array(

                        	'ajax' => array(array(

                                	'type' => 'POST',

                                	'url' => CController::createUrl('datossal/actualizarFirmantes'),

                                	'dataType' => 'json',

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

                                	'success' => 'function(data) {

                                	$("#Datossal_CI").html(data.firmantes);  

                                                            	

			}')

                        	))

                    	);

                    	?>

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



mi segundo combo dependiente:




  <?php echo $form->labelEx($model, 'CI'); ?> <?php echo $form->dropDownList($model, 'CI', array());

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



tambien te pongo la funcion del controlador:




public function actionActualizarFirmantes() {

    	$model = Clientes::model()->findByPk($_POST['idCodigo']);


    	//llenar firmantes

    	$data = CHtml::listData($model->firmantes, 'CI', 'Nombre');

    	$firmantes = "";

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

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


    	// return data (JSON formatted)

    	echo CJSON::encode(array(

        	'firmantes' => $firmantes

    	));

	}



las tablas clientes con firmantes estan relacionadas uno a muchos por CodCliente en ambas tablas, o sea, un cliente de la tabla clientes puede tener uno o muchos firmantes en la tabla firmantes, al igual que con la tabla datossal:

puede haber varios clientes y varios firmantes, pero cada cliente siempre le va a corresponder un firmante que se corresponda con la relacion anterior.

Pero esto es el código php, me refiero al HTML que se obtiene.

Una vez cargues la vista en un navegador, ver el código fuente. Copia y pega el HTML de las listas aquí.

Disculpa:

Esto es lo que muestra en envio al debuguera:




Datossal[CIFac]65021720896Datossal[CITra]1Datossal[CI]63031414423Datossal[CodCliente]12266Datossal[CodUEB]0161205Datossal[IdEstado]3Datossal[Idn]

Datossal[NConduce]

Datossal[bultos]

Datossal[entregar]

Datossal[fecha]

Datossal[norden]

ajaxdatossal-formincmay2incodigo

inprod1inrecargo1producto

text

text2

text2

FuenteDatossal%5BIdn%5D=&Datossal%5BCodUEB%5D=0161205&Datossal%5BCodCliente%5D=12266&Datossal%5Bfecha%5D=&Datossal%5BCIFac%5D=65021720896&Datossal%5BCI%5D=63031414423&Datossal%5Bbultos%5D=&Datossal%5BCITra%5D=1&Datossal%5BIdEstado%5D=3&Datossal%5Bnorden%5D=&Datossal%5BNConduce%5D=&Datossal%5Bentregar%5D=&incodigo=&text=&producto=&text2=&incmay=2&inrecargo=1&inprod=1&text2=&ajax=datossal-form

Aqui te pongo el codigo fuente de la parte de los clientes:




<td colspan="[url=""]3[/url]" title="[url=""]Selecione el cliente[/url]">                       <label for="[url=""]Datossal_Cliente[/url]">Cliente</label>                            <select name="[url=""]Datossal[CodCliente][/url]" id="[url=""]Datossal_CodCliente[/url]"> <option value="[url=""]1487[/url]">Asociación Culinaria de Granma</option> <option value="[url=""]86645[/url]">Centro Provincial de Medicina Deportiva</option> <option value="[url=""]89512[/url]">Comité Provincial UJC Granma</option> <option value="[url=""]93310[/url]">Conjunto Artístico de las FAR</option> <option value="[url=""]7009[/url]">Dirección Municipal de Educación Bartolomé Masó</option> <option value="[url=""]7001[/url]">Dirección Municipal de Educación Bayamo</option> <option value="[url=""]7011[/url]">Dirección Municipal de Educación Buey Arriba</option> <option value="[url=""]6999[/url]">Dirección Municipal de Educación Cauto Cristo</option> <option value="[url=""]7012[/url]">Dirección Municipal de Educación Guisa</option> <option value="[url=""]7000[/url]">Dirección Municipal de Educación Jiguaní</option> <option value="[url=""]6998[/url]">Dirección Municipal de Educación Río Cauto</option> <option value="[url=""]1119[/url]">Dirección Municipal de Salud Cauto Cristo</option> <option value="[url=""]8604[/url]">Dirección Municipal de Salud Pública B. Masó</option> <option value="[url=""]85940[/url]">Dirección Municipal de Salud Pública Bayamo</option> <option value="[url=""]8769[/url]">Dirección Municipal de Salud Pública Buey Arriba</option> <option value="[url=""]8605[/url]">Dirección Municipal de Salud Pública Guisa</option> <option value="[url=""]8593[/url]">Dirección Municipal de Salud Publica Jiguani</option> <option value="[url=""]8718[/url]">Dirección Municipal de Salud Pública Rí Cauto</option> <option value="[url=""]8597[/url]">Dirección Municipal de Salud Pública Yara</option> <option value="[url=""]86641[/url]">Dirección Provincial de Deportes Granma</option> <option value="[url=""]7130[/url]">Dirección Provincial De Educación Granma</option> <option value="[url=""]9385[/url]">Dirección Provincial de Planificación Física Granma</option> <option value="[url=""]5865[/url]">EMPA &quot;Empresa Mayorista de Productos Alimenticios&quot; Bayamo </option> <option value="[url=""]58652[/url]">EMPA &quot;Empresa Mayorista de Productos Alimenticios&quot; Cauto Cristo</option> <option value="[url=""]4687[/url]">EMPA &quot;Empresa Mayorista de Productos Alimenticios&quot; Rio Cauto</option> <option value="[url=""]38416[/url]">Empresa AgroIndustrial Granos Fdo Echenique (UEB Prestacion Serv. Tec. Cauto)</option> <option value="[url=""]3841[/url]">Empresa AgroIndustrial Granos Fernando Echenique</option> <option value="[url=""]2666[/url]">Empresa Agropecuaria MINIT</option> <option value="[url=""]11956[/url]">Empresa Campismo Popular Granma</option> <option value="[url=""]1592[/url]">Empresa Cárnica Granma</option> <option value="[url=""]3176[/url]">Empresa Constructora Militar # 2</option> <option value="[url=""]119891[/url]">Empresa Cubana del Pan Granma</option> <option value="[url=""]3549[/url]">Empresa Cultivos Varios y Acopio &quot;Mártires de Artemisa&quot;</option> <option value="[url=""]1667[/url]">Empresa de Bebidas y Refresco Granma</option> <option value="[url=""]14436[/url]">Empresa de Unidades de Administración Comercial MINIT</option> <option value="[url=""]12680[/url]">Empresa GEOCUBA OTE SUR Agencia Granma</option> <option value="[url=""]5342[/url]">Empresa Municipal De Comercio Bayamo</option> <option value="[url=""]5351[/url]">Empresa Municipal De Comercio Y Gastronomía B. Maso</option> <option value="[url=""]53520[/url]">Empresa Municipal De Comercio Y Gastronomía Buey Arriba</option> <option value="[url=""]5341[/url]">Empresa Municipal De Comercio Y Gastronomía Cauto Cristo</option> <option value="[url=""]12267[/url]">Empresa Municipal De Comercio Y Gastronomía Guisa</option> <option value="[url=""]12266[/url]">Empresa Municipal De Comercio Y Gastronomía Jaguaní</option> <option value="[url=""]5340[/url]">Empresa Municipal De Comercio Y Gastronomía Rio Cauto</option> <option value="[url=""]5638[/url]">Empresa Municipal de Gastronomía Bayamo</option> <option value="[url=""]11728[/url]">Empresa Pesquera Granma (UEB Incobay)</option> <option value="[url=""]3732[/url]">Empresa Porcina Granma UEB Aseguramiento</option> <option value="[url=""]14445[/url]">Empresa Provincial de Alojamiento y Recreación</option> <option value="[url=""]86642[/url]">Escuela de Iniciación Deportiva &quot;Pedro Batista&quot; (EIDE)</option> <option value="[url=""]86643[/url]">Escuela de Profesores de Educación Física &quot;Simón Bolivar&quot;</option> <option value="[url=""]272[/url]">Escuela Militar “Camilo Cienfuegos” Bayamo</option> <option value="[url=""]7505[/url]">Estado Mayor Jiguaní Unidad Militar 7505</option> <option value="[url=""]3757[/url]">Finca &quot;El ALCAZAR&quot;</option> <option value="[url=""]8717[/url]">Hospital Pediátrico &quot;General Milanes&quot;</option> <option value="[url=""]8596[/url]">Hospital Provincial &quot;Carlos Manuel de Céspedes&quot; </option> <option value="[url=""]652[/url]">Instituto Cubano Amistad Con Los Pueblos (ICAP)</option> <option value="[url=""]9331[/url]">Jefatura Territorial EJT Granma</option> <option value="[url=""]3006[/url]">Jefatura Territorial Ferrocarriles del Oriente </option> <option value="[url=""]94703[/url]">Operaciones Mercantiles Aseguramiento y Servicio MINIT</option> <option value="[url=""]94701[/url]">Organo Provincial de Prisiones Granma</option> <option value="[url=""]9913[/url]">PCC Comité Provincial GRANMA</option> <option value="[url=""]7500[/url]">Sector Militar B. Masó Unidad Militar 7500</option> <option value="[url=""]38435[/url]">Sector Militar Bayamo</option> <option value="[url=""]38443[/url]">Sector Militar Buey Arriba</option> <option value="[url=""]7503[/url]">Sector Militar Cauto Cristo</option> <option value="[url=""]38444[/url]">Sector Militar Guisa</option> <option value="[url=""]2088[/url]">Telemisora Granmense CNC Bayamo</option> <option value="[url=""]9569[/url]">Tribunal Provincial Popular Granma</option> <option value="[url=""]2311[/url]">UEB Desmonte y Construcción Granma</option> <option value="[url=""]271[/url]">UM 7509 Sector Militar Río Cauto</option> <option value="[url=""]13098[/url]">Unidad Administrativa Comercial Holguín UBC Granma</option> <option value="[url=""]1754[/url]">Unidad Militar 1754 Estado Mayor RMG</option> <option value="[url=""]2840[/url]">Unidad Militar 2840</option> <option value="[url=""]3335[/url]">Unidad Militar 3335</option> <option value="[url=""]3790[/url]">Unidad Militar 3790</option> <option value="[url=""]4140[/url]">Unidad Militar 4140</option> <option value="[url=""]37683[/url]">Unidad Parque Ferias Agropecuaria Bayamo</option> <option value="[url=""]9920[/url]">Unión de Periodistas de Cuba (UPEC) Granma</option> <option value="[url=""]9935[/url]">Unión Nacional De Juristas De Cuba</option> <option value="[url=""]6823[/url]">Universidad de Granma</option> <option value="[url=""]534[/url]">UP DI Poder Popular Municipal Bayamo</option> <option value="[url=""]543[/url]">UP DI Poder Popular Municipal Buey Arriba</option> <option value="[url=""]8084[/url]">UP Provincial Apoyo A La Actividad Cultural</option> </select>                        <div class="[url=""]errorMessage[/url]" id="[url=""]Datossal_CodCliente_em_[/url]" style="[url=""]display:none[/url]"></div>                    </td>



y la de los firmantes:




 <td>                         <label for="[url=""]Datossal_CI[/url]">Persona Autorizada</label> <select name="[url=""]Datossal[CI][/url]" id="[url=""]Datossal_CI[/url]"> </select><div class="[url=""]errorMessage[/url]" id="[url=""]Datossal_CI_em_[/url]" style="[url=""]display:none[/url]"></div>                    </td>



Buenas de nuevo Rafael.

Fíjate en el siguiente ejemplo.

Si creo una lista desplegable sin EChosen, el código php sería:




echo CHtml::dropDownList('name1', '', 

                        array('aaaaaaaaa', 'bbbbbbbbbbbbb'));



Que genera el siguiente código HTML:




<select name="name1" id="name1">

   <option value="0">aaaaaaaaa</option>

   <option value="1">bbbbbbbbbbbbb</option>

</select>



Ves que es un "select" de toda la vida.

Pero qué pasa si añado la extensión EChosen? Pues éste sería el código fuente php:




$this->widget( 'ext.EChosen.EChosen', 

                        array(

                            'target' => 'select',

                            'useJQuery' => true,

                            'debug' => true,

                          ));




echo CHtml::dropDownList('name1', '', 

                array('aaaaaaaaa', 'bbbbbbbbbbbbb'));



Que genera el siguiente código HTML:




<select name="name1" id="name1">

     <option value="0">aaaaaaaaa</option>

     <option value="1">bbbbbbbbbbbbb</option>

</select>


<div id="name1_chzn" class="chzn-container chzn-container-single" style="width: 119px;">

     <a href="javascript:void(0)" class="chzn-single">

          <span>aaaaaaaaa</span>

          <div><b></b></div>

     </a>


     <div class="chzn-drop" style="left: -9000px; width: 117px; top: 25px;">

          <div class="chzn-search">

               <input autocomplete="off" style="width: 82px;" type="text">

          </div>


          <ul class="chzn-results">

               <li id="name1_chzn_o_0" class="active-result result-selected" style="">aaaaaaaaa</li>

               <li id="name1_chzn_o_1" class="active-result" style="">bbbbbbbbbbbbb</li>

          </ul>

     </div>

</div>



También es un select de toda la vida, pero vés que hay algo más. Pues ese div de más es lo que te está jodiendo tu código.

Como tú bien dices, tu código funciona perfectamente y rellena la lista dependiente perfectamente. Por qué no lo vés? pues porque está tapado por el div generado por la extensión EChosen!!!!!! Ese div está estilado para que se vea bonito, pero se pinta por encima de la lista real.

Si tú revisas el código fuente de tu página (el HTML), verás que el select sí tiene los datos esperados, pero no los vés!!!!! Pq el div EChosen te los está tapando.

Opciones:

  • Recargar el EChosen en cada llamada AJAX (no sé si se puede) si dá opción a ello o hacerlo manualmente.

  • Utilizar otra extensión, por ejemplo la Select2.

Espero que te sea de ayuda.

Un saludo.

PD.: yo utilizo select2 de YiiBooster.

Gracias lagogz, utilice la extension select2, con ajax, quedo asi el primer combo, el segundo se mantiene igua:




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

                        <?php

                        $this->widget('ext.select2.ESelect2', array(

                                'name' => 'CodCliente',

                                'data' => CHtml::listData(Clientes::model()->findAll(), 'CodCliente', 'Descripcion'),

                                'htmlOptions' => array(

                                'style' => 'width: 200px;',

                                'ajax' => array(

                                'type' => 'POST',

                                'url' => CController::createUrl('datossal/actualizarFirmantes'),

                                'dataType' => 'json',

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

                                'success' => 'function(data) {

                                $("#Datossal_CI").html(data.firmantes); 

                        }')

                        )));

                        ?>

B)