Ir al contenido



Foto

cargar un combo con un item seleccionado


  • Por favor identifícate para responder
5 respuestas en este tema

#1 Delphius

Delphius

    Advanced Member

  • Administrador
  • 5.982 mensajes
  • LocationArgentina

Escrito 26 agosto 2017 - 05:34

Buenas, Tengo el cerebro un tanto quemado y quisiera saber si me pueden dar un norte.

Les explico: Tengo una página diseñada para emitir facturación, y como primer paso cuenta con un form en el que se presenta Info básica del cliente. Desde ésta página se invoca a un formulario modal que sirve de búsqueda y selección de cliente.

 

Este modal además de la capacidad de buscar tiene funciones para agregar y modificar cliente para hacer entradas rápidas y no tener que pasar por el propio módulo de ABM de clientes. En el caso de buscar y aceptar este cliente "seleccionado" se presenta en la página y listo para iniciar la facturación.

Cuando se trata de editar, habilita controles para hacer los cambios, y de forma similar para permitir el alta.

Todo funciona bien... hasta que nos han pedido que este formulario trabaje con más info. Para el caso que me complica, y yendo más al problema, se trata de información sobre el domicilio. Esta consiste en seleccionar de una serie de combos relacionados la provincia, ciudad y por último el barrio.

Inicialmente esto estaba planteado de modo tal que sólo tenía provincia y ciudad. El contenido de los combos se hace de forma dinámica por medio de AJAX.

De funcionar, funciona. Pero hay cosas que necesitan mejorarse.

 

Concretamente el problema es que una vez que se carga el contenido de los combos, cuando se está en una edición no encontré forma de hacer que esté pre-seleccionado los valores que tenie el cliente. Y a su vez, en un caso de alta, necesito indicarle que esté pre-seleccionado una privincia y una ciudad por defecto. El código inicial, y como fue planteado, es que se cargan los combos y chau. No había nada de item por defecto y ahora es una exigencia del cliente.

 

En un gran script .JS que contiene un buen par de rutinas para trabajar con el modal tengo esto:


javascript
  1. function cargar_ciudades() {
  2. var dataString = 'provincia_id=' + $('#f_clie_provincia').val();
  3.  
  4. $.ajax({
  5. type: "GET",
  6. url: "admin/cargar_provincia_ciudades.php",
  7. data: dataString,
  8. cache: false,
  9. beforeSend: function() {},
  10. complete: function() {
  11. },
  12. success: function(data) {
  13.  
  14. var newOptions = jQuery.parseJSON(data);
  15. var select = $('#f_clie_ciudad');
  16. if (select.prop) {
  17. var options = select.prop('options');
  18. } else {
  19. var options = select.attr('options');
  20. }
  21. $('option', select).remove();
  22.  
  23. $.each(newOptions, function(val, text) {
  24. options[options.length] = new Option(text, val);
  25. });
  26. }
  27. });
  28. };

Este cargar_ciudades() se invoca desde otras funciones/eventos.

 

Como pueden apreciar se invoca a una página. El script php contiene lo siguiente:


php
  1. if(isset($_GET['provincia_id'])&&is_numeric($_GET['provincia_id'])){
  2. if($_GET['provincia_id']!='0'){
  3. $recciudades="SELECT
  4. ciudad_id,
  5. ciudad_nombre
  6. FROM ciudades
  7. WHERE ciudad_estado='1'
  8. AND provincia_id='$_GET[provincia_id]'
  9. ORDER BY ciudad_orden ASC, ciudad_nombre";
  10. $qrecciudades=mysql_query($recciudades) or die(mysql_error());
  11.  
  12. while ($row_recciudades=mysql_fetch_array($qrecciudades)){
  13. $opciones[$row_recciudades['ciudad_id']]=utf8_encode(strtoupper($row_recciudades['ciudad_nombre']));
  14. }
  15. }
  16. else{
  17. $opciones['0']='Seleccione una...';
  18. }
  19. echo json_encode($opciones);
  20. }

Lo que he intentado hacer, es cuando se trata de una edición, intentar recuperar previamente el valor seleccionado de los combos, para volver a reasignarlos. Algo así:


javascript
  1. $('#formcliente #modal_editar_clie').click(function() {
  2. //limpiar_form_cliente();
  3.  
  4. // guardamos temporalmente los values (ids) de provincia, ciudad, y barrio
  5. var prov = $('#f_clie_provincia').val();
  6. var ciud = $('#f_clie_ciudad').val();
  7. var barr = $('#f_clie_barrio').val();
  8.  
  9. datos_editables();
  10.  
  11. $('#op_clie').val('editar');
  12. $('#f_cliente_lab').removeClass('inp-form-jac-error').addClass('inpsinborde');
  13. $('#f_cliente_lab').hide();
  14.  
  15. document.getElementById('div_nvo_clie').style.display = "";
  16. document.getElementById('div_buscar_clie').style.display = "";
  17. document.getElementById('div_editar_clie').style.display = "none";
  18.  
  19. //cargar las ciudades y barrios
  20. cargar_ciudades();
  21. cargar_barrios();
  22.  
  23. // volvemos a seleccionar por defecto ciudades y barrios establecidos antes de cargar los combos
  24. $('#f_clie_provincia option[value="' + prov + '"]').prop('selected', 'selected');
  25. $('#f_clie_ciudad option[value="' + ciud + '"]').prop('selected', 'selected');
  26. $('#f_clie_barrio option[value="' + barr + '"]').prop('selected', 'selected');
  27. });

Pero esto no funciona. Mi intento anterior fue hacer el típico:


javascript
  1. $('#Elcombo').val(elvalor);

Pero tampoco tuvo buenos resultados.

Datos_editables() simplemente se encarga de hacer visible los inputs y combos. Ya que por defecto la info se muestra sin posibilidad de edición.

 

Cargar_barrrios() es la versión análoga diseñada para trabajar con los barrios.

 

Para el caso de un alta vendría a ser algo así:


javascript
  1. $('#formcliente #modal_nuevo_clie').click(function() {
  2. limpiar_form_cliente();
  3. datos_editables();
  4.  
  5. $('#op_clie').val('nuevo');
  6. $('#f_cliente_lab').removeClass('inp-form-jac-error').addClass('inpsinborde');
  7. $('#f_cliente_lab').hide();
  8.  
  9. document.getElementById('div_nvo_clie').style.display = "none";
  10. document.getElementById('div_buscar_clie').style.display = "";
  11. document.getElementById('div_editar_clie').style.display = "none";
  12.  
  13. $('#f_clie_provincia').val(1834); // SALTA por defecto
  14. $('#f_clie_ciudad').val(571774); //SALTA CAPITAL por defecto
  15.  
  16. });

Gran parte del código lo he heredado. Yo simplemente estoy realizando los "ajustes".

 

Como resulta ser AJAX, y esto se ejecuta de forma asíncrona, me digo que quizá no es posible asingar un valor por defecto seleccionado desde el lado cliente mientras se está ejecutando en el server. Entonces me he preguntado si es posible desde ese script PHP devolver el contenido ya con el item que debe estar seleccionado en cuestión. Pero no doy con la tecla. ¿Es posible? ¿Cómo? Todavía no tengo bien firme mis conocimientos.

 

Naturalmente que debería pasar más parámetros al script. Mínimo para indicar el tipo de operación y otro para indicar cual item (por medio del value/id) debe estar seleccionado para el caso. Por eso no me preocupa, lo puedo hacer... Lo que no le capto es como introducir en ese $opciones[] que tal item va a ser el seleccionado.

 

Yo he cargado combos y establecido seleciones por defecto, pero de la forma cruda, dentro de un PHP "puro". Con el típico while y armado el option e indicando selected=selected cuando sea el caso. Algo como esto:


php
  1. <select id="f_provincia_id_1" name="f_provincia_id[]" class="inp-form-jac-error searchprovincia" style="width: 250px; " >
  2. <option value="0">SELECCIONE UNA..</option>
  3. <?
  4. $recprovincias="SELECT
  5. provincia_id,
  6. provincia_nombre
  7. FROM provincias
  8. WHERE provincia_estado='1'
  9. AND pais_id='5'
  10. ORDER BY provincia_orden ASC, provincia_nombre";
  11. $qrecprovincias=mysql_query($recprovincias);
  12. while ($row_recprovincias=mysql_fetch_array($qrecprovincias)){
  13. ?>
  14. <option value="<?echo$row_recprovincias['provincia_id'];?>" <?if($row_domfis['provincia_id']==$row_recprovincias['provincia_id']){?>selected="selected"<?}?>><?echo utf8_encode($row_recprovincias['provincia_nombre']);?></option>
  15. <?
  16. }
  17. ?>
  18. </select>

Ese código anterior, es de muestra que tenemos para el script de ABM de clientes.

 

 

Pero no de forma indirecta parseando por JSON, devolverlo a un JS, y demás pasos... Ahí ya me pierdo... :(

 

¿Alguien me podría dar un norte?

 

Desde ya muchas gracias. Espero que se me entienda.

 

Saludos,


  • 0

#2 giulichajari

giulichajari

    Advanced Member

  • Miembros
  • PipPipPip
  • 398 mensajes

Escrito 27 agosto 2017 - 04:47

Yo tengo un sistema de calificaciones de un colegio y abro el form con los cursos y divisiones cargados previamente:


javascript
  1. $(document).ready(function(){
  2. //cargo cursos y divisiones al carga pag
  3. $('#curso').load("getcursos.php");
  4. $('#division').load("getdivisiones.php");
  5.  
  6. $("#listar").click(function(){
  7. var form=$("#busqueda").serialize();
  8. var curso=$('#curso').val();
  9. var division=$('#division').val();

Luego en php (un archivo corto o script):


php
  1. <?php
  2.  
  3. include_once("../../PHP/Conexion.php");
  4. $conectar = conexionBD();
  5. $rsalumnos = array();
  6. //cargar datos en el form
  7. $sqlcursos = "SELECT * FROM tesis.curso;";
  8. $rscursos = select($conectar,$sqlcursos);
  9.  
  10. foreach ($rscursos as $curso){
  11. echo ('<option value="'.$curso['idcurso'].'" >'.$curso["curso"].'</option>');
  12. }
  13. ?>

Pero en tu caso: no estas filtrando en la consulta de provincias y ciudades por el cliente que se va a editar? Asi te apareceran todas las provincias y ciudades.

Deberias mostrar todas las provincias y ciudades pero si o si debes consultar el registro del cliente para saber en que ciudad y provincia vive. Entonces puedes hacerr:


delphi
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.   $('#ciudades > option[value="3"]').attr('selected', 'selected');
  4. });
  5. </script>


  • 0

#3 Delphius

Delphius

    Advanced Member

  • Administrador
  • 5.982 mensajes
  • LocationArgentina

Escrito 27 agosto 2017 - 07:15

 

Yo tengo un sistema de calificaciones de un colegio y abro el form con los cursos y divisiones cargados previamente:


javascript
  1. $(document).ready(function(){
  2. //cargo cursos y divisiones al carga pag
  3. $('#curso').load("getcursos.php");
  4. $('#division').load("getdivisiones.php");
  5.  
  6. $("#listar").click(function(){
  7. var form=$("#busqueda").serialize();
  8. var curso=$('#curso').val();
  9. var division=$('#division').val();

Luego en php (un archivo corto o script):


php
  1. <?php
  2.  
  3. include_once("../../PHP/Conexion.php");
  4. $conectar = conexionBD();
  5. $rsalumnos = array();
  6. //cargar datos en el form
  7. $sqlcursos = "SELECT * FROM tesis.curso;";
  8. $rscursos = select($conectar,$sqlcursos);
  9.  
  10. foreach ($rscursos as $curso){
  11. echo ('<option value="'.$curso['idcurso'].'" >'.$curso["curso"].'</option>');
  12. }
  13. ?>

Pero en tu caso: no estas filtrando en la consulta de provincias y ciudades por el cliente que se va a editar? Asi te apareceran todas las provincias y ciudades.

Deberias mostrar todas las provincias y ciudades pero si o si debes consultar el registro del cliente para saber en que ciudad y provincia vive. Entonces puedes hacerr:


delphi
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.   $('#ciudades > option[value="3"]').attr('selected', 'selected');
  4. });
  5. </script>

 

Si lo está filtrando por el cliente. Lo que pasa es que previamente, cuando se invoca a buscar_clie (no he mostrado ese código) se establecen las variables con la data que se obtiene de la consulta. Luego es que cuando se presiona en el botón Nuevo y/o Editar se llama a las functions cargar_ciudades() y cargar_barrios() y se pasan a sus respectivos script php como parámetro.

 

De lo que estoy entendiendo de tu código, tu propones hacer un atrr para seleccionar el item.


javascript
  1. $('#ciudades > option[value="3"]').attr('selected', 'selected');

Yo ya había intentado hacerlo, con prop() e indicarle concatenando una variable con el value a seleccionar, por ejemplo:


php
  1. $('#f_clie_barrio option[value="' + barr + '"]').prop('selected', 'selected');

Tengo que admitir que no recuerdo si también lo había intentado con attr().  Si había probado también hacerlo así:


php
  1. $('#f_clie_ciudad').val(571774);

Veo en tu código un >. Desconozco si fue una pifia de dedo o si es necesario.

 

Saludos,


  • 0

#4 Delphius

Delphius

    Advanced Member

  • Administrador
  • 5.982 mensajes
  • LocationArgentina

Escrito 27 agosto 2017 - 08:35

Pues ya he probado con attr() también y no funciona. :(

Parecería que todo pasa por hacerlo dentro de los script php "cargar_x" como estaba sospechando.

 

Saludos,


  • 0

#5 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.232 mensajes
  • LocationRepública Dominicana

Escrito 05 septiembre 2017 - 02:37

Si mal no recuerdo, en JQuery (si es lo que estás usando) debes refrescar el combo para que el atributo selected se refleje, si mal no recuerdo:


javascript
  1. $("#algo").selectmenu("refresh"); //Para el caso de los combos

Saludos.


  • 0

#6 Delphius

Delphius

    Advanced Member

  • Administrador
  • 5.982 mensajes
  • LocationArgentina

Escrito 05 septiembre 2017 - 04:43

Si mal no recuerdo, en JQuery (si es lo que estás usando) debes refrescar el combo para que el atributo selected se refleje, si mal no recuerdo:


javascript
  1. $("#algo").selectmenu("refresh"); //Para el caso de los combos

Saludos.

 

Efectivamente. Uso JQuery. Lo tendré en cuenta amigo.

Debido a estas dificultades, junto a otras que se acumularon en este gran JS y otros scripts relacionados nos vimos obligados a rediseñarlos. Por el momento tuvimos que dejar estas nuevas implementaciones en espera hasta que podamos liberarnos de otras actividades y volver a tomarnos el trabajo.

Con tantos scritps, y debido a que estar trabajando con diferentes versiones adaptadas a cada cliente llegamos a la conclusión que es necesario más pronto que tarde a rediseñar el sistema entero y volver al papel y pensar bien que se puede parametrizar, y que customizar y ver la forma de evitar un alto acoplamiento.

En esta empresa no se utiliza sistema de control de versiones automático, lo hacemos todo a mano. Asi que vaya a saber en cuanto tiempo tendremos oportunidad de volver a tocar esta parte.

 

Saludos,


  • 0