Multimodelform dropdown con Ajax

ricaurteg · June 14, 2012, 6:19pm

Hola

Quisiera saber si alguien a intentando hacer esto con esta extension "Multimodelform".

Necesito que al realizar la captura del detalle utilizando esta extensión, al seleccionar de un dropdown, este pueda traer un valor a otro campo, si es posible al ejecutar una acción del controller.

Encontre este articulo utilizando AJAX- JSON, pero no funciona tampoco y no brinda muchas esperanzas:

http://www.yiiframework.com/forum/index.php/topic/20289-extension-multimodelformjqrelcopy/page__st__40

Lo he intentado hace con Java-Sript, pero al final no se como ejecutar la accion(URL), pero si controlo que registro se esta modificando, ya que el hace es un arreglo de los campos adicionados en el detalle.

A continuación aparece el código del _form.php

$memberFormConfig = array(

          'elements'=&gt;array(


            


              'svi_id'=&gt;array(


              'type'=&gt;'dropdownlist',


                'items'=&gt;CHtml::listData(Signosvitales::model()-&gt;empresa()-&gt;orderbynombre()-&gt;findAll(), 'id', 'svi_nombre'),


                'prompt' =&gt; Yii::t('dic', '...'),


                'onchange'=&gt;'


                    var valorid = this.value;


                    var nomobj_texto = this.id;


                    var indexid = nomobj_texto.substring(nomobj_texto.length - 1,nomobj_texto.length);


                    if (indexid == &quot;d&quot; ) { 


                        var nombre = &quot;#Revisionsignosvitales_rsv_comentario1&quot;;


                        indexid=1;


                    }


                    else {


                        var nombre = &quot;#Revisionsignosvitales_rsv_comentario1&quot;+indexid; 


                    }


                    // La accion dinamicsignovital consulta en la base de datos segun la selección, incluso no se como mandarle el id seleccionado


                    // NO ejecuta la acción


                    var url1 = &quot;'.&#036;this-&gt;createUrl(&quot;Revisionsignosvitales/dinamicsignovital&quot;).'&quot;;


                    // Tampoco ejecuta la accion


                    var url1 = &quot;/Revisionsignosvitales/dinamicsignovital&quot;;





                    // En este momento coloco un texto para probar que si lo este asignando al campo que debe pero no traigo nada de la acción.





                    var texto = &quot;Valor de referencia para:(&quot;+indexid+&quot;)&quot;;


                    &#036;(nombre).val(texto);


                    


                    &#036;.post(url1,function (data) {


                            &#036;(nombre).val(indexid);


                        }


                    );


                    '),  


                    


            


              'rsv_comentario1'=&gt;array(


                'type'=&gt;'textarea',


                'maxlength'=&gt;255,

…

En los comentarios del código esta como intento hacer el llamado a la acción del controller, pero no funciona, entonces pues de forma muy rebuscada identifico el id del arreglo de campos, pero funciona.

Tampoco estoy enviando el parametro del id del dropdown ya que no se como.

Me funciona bien la extensión para lo que deseo esta funcionalidad adicional.

Poder seleccionar de un Dropdown y que de acuerdo a lo seleccionado traer un dato de la base de datos en uno de los campos del mismo registro.

Alguna idea, ayuda, luz, guía … lo que sea.

Gracias

JCS · June 14, 2012, 9:10pm

hola,primero procura poner el codigo dentro de ls etiquetas code, asi se verá mejor.

Ahora con respecto a tu problema (voy a usar jQuery para la solución)

asumamos que el archivo JSON que nos pasa el controlador es bastnte sencillo




{

	"texto": "texto"

}

ahora vamos a verificar cuando el dropdown cambia de valor y entonces buscamos lo que encesitamos en l base de datos usando AJAX




// Primero vamos a detectar cuando cambia el valor del 

$('#selectId').change(function() {

	// Ejecutar función para obtener los datos via GET

	var targetUrl = 'Revisionsignosvitales/dinamicsignovital';

	$.getJSON(targetUrl, { id: $(this).val() }, function(data) {

		// Ubicamos el valor de 'texto' que estaba en el JSON en el input 

		$('#inputId').val(data.texto);

	});

});

creo que eso es lo que queres hacer, igual con jQuery puedes hacer peticiones tipo POST, solo debes buscar un poco ^^, si no sire entocnes avisas y alguien, si no yo, te ayuda

ricaurteg · June 15, 2012, 1:13am

Buenas noches

Gracias por su pronta respuesta.

Intente implementarlo así, peor no funciono.

No estoy muy seguro si esta bien como lo implemente, ademas que por el tema de que el maneja los campos del detalle como un arreglo, adicionándoles un consecutivo, no se si no les asigna o no el valor que se recupera.




       $memberFormConfig = array(

          'elements'=>array(

             'svi_id'=>array(

                    'type'=>'dropdownlist',

                    'items'=>CHtml::listData(Signosvitales::model()->empresa()->orderbynombre()->findAll(), 'id', 'svi_nombre'),

                    'prompt' => Yii::t('dic', '...'),

                    'onchange'=>'$("#Revisionsignosvitales_svi_id").change(function() {

                        // Ejecutar función para obtener los datos via GET

                        var targetUrl = "Revisionsignosvitales/dinamicsignovital";

                        $.getJSON(targetUrl, { id: $(this).val() }, function(data) {

                        // Ubicamos el valor de texto que estaba en el JSON en el input 

                        $("#Revisionsignosvitales_rsv_comentario1").val(data.texto);

                        });

                    });'),


             'rsv_comentario1'=>array(

                    'type'=>'textarea',

                    'maxlength'=>255,

                  ),

.......

La acción del controller esta retornando lo siguiente(aunque solo uso el valor de uno):




echo CJSON::encode(array(

   'texto' => 'Valor recuperado accion',

   'texto2' =>'Valor recuperado accion 2'));

Agradezco sus comentarios.

JCS · June 15, 2012, 11:37am

yo puse


$('#selectId').change(function() {});

esto era para ejecutar el javascript aparte, estas usando el evento ‘onchange’ en la definicion de tu dropdownlist, asi que esa parte sobra, creo que el obtener los datos del JSON no esta fallando.

ricaurteg · June 15, 2012, 7:57pm

Ok listo Ya funciono

Tenia 2 problemas, uno el nombre de la acción , la cual tenia tenia mal… y lo otro era la URL, utilice la función createUrl y funciono! Trajo los datos perfectos.

Lo que le adicione, fue para identificar a que lugar del arreglo de campos debe retornar los datos. Como no se como obtener el Index de ese arreglo, lo obtengo del nombre del campo. Al adicionar varios registros es necesario identificar el campo para retornar el texto, sino, solo cambia el primero, que tiene el nombre normal.




$memberFormConfig = array(

    'elements'=>array(

             'svi_id'=>array(

                    'type'=>'dropdownlist',

                    'items'=>CHtml::listData(Signosvitales::model()->empresa()->orderbynombre()->findAll(), 'id', 'svi_nombre'),

                    'prompt' => Yii::t('dic', '...'),

                    'onchange'=>'

                        var nomobj_texto = this.id;

                        //28->Tamaño del nombre del campo sin numeración -> #Revisionsignosvitales_svi_id Enumera los campos desde el 2do.

                        var indexid = nomobj_texto.substring(28,nomobj_texto.length); 

                        var nombre1 = "#Revisionsignosvitales_rsv_comentario1"+indexid; 

                        var nombre2 = "#Revisionsignosvitales_rsv_comentario2"+indexid; 

                        // Ejecutar función para obtener los datos via GET

                        var targetUrl ="'.$this->createUrl("Revisionsignosvitales/dynamicsignovital").'";    

                        $.getJSON(targetUrl, { id: $(this).val() }, function(data) {

                        // Ubicamos los valor que estaban en el JSON en los campos 

                            $(nombre1).val(data.A);

                            $(nombre2).val(data.<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='B)' />;

                        });'),

......

Muchas gracias por toda su colaboración.

JCS · June 15, 2012, 11:40pm

que bueno que hay funcionado, no me di cuenta de lo de createUrl, normalmente dejo en un archivo JavaScript aparte todas mis funciones y defino eso sin ayuda del framework ^^

gri · August 4, 2015, 2:37pm

Gracias por el aporte, pude entender y resolver un problema que tenía al utilizar autocomplete, en el cual siempre me llenaba los datos de la primera fila. Aquí coloco el código para que otros se ayuden.

CompraController.php




public function actionAutocomplete($term) 

        {

            $criteria = new CDbCriteria;

            $criteria->compare('LOWER(Descripcion)', strtolower($_GET['term']), true);

            $criteria->order = 'Descripcion';

            $criteria->limit = 30; 

            $data = Productos::model()->findAll($criteria);

  

            if (!empty($data))

            {

             $arr = array();

             foreach ($data as $item) {

              $arr[] = array(

                  'id' => $item->CodProducto,

                  'value' => $item->Descripcion,

                  'label' => $item->Descripcion,

                  'Precio' => $item->PreCompra,

                  'UniMedida'=>$item->UniMedida,

                  'Saldo'=>$item->CanExistencia,

                  

              );

             }

            }

            else

            {

             $arr = array();

             $arr[] = array(

              'id' => '',

              'value' => 'No se han encontrado resultados para su búsqueda',

              'label' => 'No se han encontrado resultados para su búsqueda',

             );

         }

  

         echo CJSON::encode($arr);

        }

_form.php




    

    $memberFormConfig = array(

          'elements'=>array(

            'CodProducto'=>array(

                'type'=>'text',

                 'size'=>'10',

                'maxlength'=>10,

                'style'=>'WIDTH:100px',

            ),

              

             'Descripcion'=>array(

                'type'=>'zii.widgets.jui.CJuiAutoComplete',   

                'source'=>$this->createUrl('compra/autocomplete'),

                'options'=>array(

                    'showAnim'=>'fold',

                    'common_id_string'=>'Descripcion',

                         'size'=>'120',

                         'minLength'=>'2', // Minimo de caracteres que hay que digitar antes de relizar la busqueda

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

                          var nomobj_texto = this.id; //El identificador del campo en mi caso #Detallecompra_Descripcion 

                          var indexid = nomobj_texto.substring(25,nomobj_texto.length); 

                          $('#Detallecompra_CodProducto'+indexid).val(ui.item.id); 

                          $('#Detallecompra_Precio'+indexid).val(ui.item.Precio); 

                          $('#Detallecompra_UniMedida'+indexid).val(ui.item.UniMedida);

                          $('#Detallecompra_Descuento'+indexid).val(0);

                          $('#Detallecompra_Exento'+indexid).val(0);

                         }",

                ),

                'htmlOptions'=> array(

                        'size'=>30,

                   'onFocus'=>"init(this.id)",

                        'placeholder'=>'Buscar ...',

                        'title'=>'Indique el producto.'

                ),

            ),

                    

            'Cantidad'=>array(

                'type'=>'text',

                //it is important to add an empty item because of new records

                'maxlength'=>8,

                'size'=>8,

               'style'=>'WIDTH:80px',

               'onchage'=>'calcularPrecioIVA()',

                

            ),

            'Precio'=>array(

                'type'=>'text',

                'maxlength'=>8,

                'size'=>8,

                'style'=>'WIDTH:80px',

            ),

            'UniMedida'=>array(

                'type'=>'text',

                'maxlength'=>8,

                'size'=>8,

                'style'=>'WIDTH:80px',

            ),

            'Descuento'=>array(

                'type'=>'text',

                'maxlength'=>8,

                'size'=>8,

                'style'=>'WIDTH:80px',

            ),

            'Exento'=>array(

                'type'=>'text',

                'maxlength'=>10,

                'size'=>8,

                'style'=>'WIDTH:80px',

            ),

            'SubTotal'=>array(

                'type'=>'text',

                'maxlength'=>10,

                'size'=>8,

                'style'=>'WIDTH:80px',

                'onchage'=>'calcularPrecioIVA()',

            ),

              'Saldo'=>array(

                'type'=>'text',

                'maxlength'=>10,

                'size'=>8,

                'style'=>'WIDTH:80px',

            ),

        ));

    

            $this->widget('ext.multimodelform.MultiModelForm',array(

            'id' => 'id_member', //the unique widget id

            'formConfig' => $memberFormConfig, //the form configuration array

            'model' => $member, //instance of the form model

            'tableView'=>true,

            //if submitted not empty from the controller,

            //the form will be rendered with validation errors

            'validatedItems' => $validatedMembers,

            

//            'clearInputs'=>true,

//             'jsBeforeNewId' => "alert(this.attr('id'));",   

            'jsAfterNewId' => MultiModelForm::afterNewIdAutoComplete($memberFormConfig['elements']['Descripcion']),

            //array of member instances loaded from db

//            'jsBeforeNewId' => "alert(this.attr('id'));",

//              'jsAfterCloneCallback'=>'alertIds',

                

                

//                'jsAfterNewId' => "alert(this.attr('id'));",


                

                

            'data' => $member->findAll('NumCompra=:groupId', array(':groupId'=>$model->NumCompra)),

            'showAddItemOnError' => false,

            'addItemText' => 'Agregar',

            'removeText' => 'Eliminar',

            'removeConfirm' => '¿ Eliminar el producto seleccionado ?', 

        ));