Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Desplegable dinámico dependiente en CodeIgniter usando jQuery y Ajax

El cuadro de selección dependiente dinámico rellena automáticamente los datos dependientes en el menú desplegable en función de la selección. Desplegable dinámico dependiente comúnmente utilizado en la selección país-estado-ciudad y categoría-subcategoría. Cargar datos dinámicos en cuadros de selección sin actualizar la página hace que la aplicación web sea fácil de usar. Con jQuery y Ajax, puede implementar fácilmente la función desplegable dependiente dinámica sin actualizar la página.
En este tutorial, le mostraremos cómo crear el menú desplegable dinámico dependiente en CodeIgniter usando jQuery y Ajax. Para demostrar la función desplegable dependiente, implementaremos el desplegable relacional de la ciudad del estado del país en CodeIgniter. El estado estará relacionado con el país y la ciudad estará relacionada con el estado. En función de la selección de país y estado, el estado y la ciudad dependientes se buscarán en la base de datos sin volver a cargar la página utilizando jQuery y Ajax en CodeIgniter.
El código de ejemplo muestra inicialmente todos los países en el menú desplegable del país. Cuando se selecciona un país, los estados respectivos se buscarán en la base de datos MySQL y aparecerán en el menú desplegable del estado. Del mismo modo, cuando se selecciona un estado, las ciudades respectivas se buscarán en la base de datos MySQL y aparecerán en el menú desplegable de la ciudad.

Crear tablas de base de datos

Para almacenar los datos de país, estado y ciudad, se deben crear tres tablas en la base de datos. Además, habría una relación entre países, estados y tabla de ciudades. La tabla de estados tiene una relación con la tabla de países y la tabla de ciudades tiene una tabla de relación con los estados.
Tabla de países:
el siguiente SQL crea una countriestabla en la base de datos MySQL.
CREATE  TABLE ` countries` (
  `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
  ` name`  varchar ( 50 ) SET DE PERSONAJES utf8 NOT NULL ,
  `status` enum ( '1' , '0' ) COLLATE utf8_unicode_ci NOT NULL DEFAULT '1 ' COMENTARIO ' 0: Bloqueado, 1: Activo ' ,
  TECLA PRINCIPAL ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;
Tabla de estados:
El siguiente SQL crea una statestabla en la base de datos MySQL.
CREATE  TABLE ` estados ` (
  `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
  ` country_id`  int ( 11 ) NOT NULL ,
  `name`  varchar ( 50 ) COLLATE utf8_unicode_ci NOT NULL ,
  'Estado enum ( '1' , '0 ' ) COLLATE utf8_unicode_ci NO NULO POR DEFECTO ' 1 ' COMENTARIO ' 0: Bloqueado, 1: Activo ' ,
  CLAVE PRIMARIA ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;
Tabla de ciudades:
El siguiente SQL crea una citiestabla en la base de datos MySQL.
CREATE  TABLE ` ciudades ` (
  `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
  ` state_id`  int ( 11 ) NOT NULL ,
  `name`  varchar ( 50 ) compilar utf8_unicode_ci NO NULO ,
  'Estado` enum ( '1' , '0 ' ) COLLATE utf8_unicode_ci NO NULO POR DEFECTO ' 1 ' COMENTARIO ' 0: Bloqueado, 1: Activo ' ,
  CLAVE PRIMARIA ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Controlador (Dropdowns.php)

El controlador Dropdowns contiene 4 funciones, __construct (), index (), getStates () y getCities ().
  • __construct() - Carga el modelo desplegable.
  • index() - Todos los datos del país se recuperan de la base de datos utilizando el modelo desplegable y pasan los datos a la vista.
  • getStates() - Basándose en la ID del país, los datos del estado se recuperan de la base de datos utilizando el modelo desplegable y los datos de representación en formato JSON.
  • getCities() - Basándose en la ID del estado, los datos de la ciudad se recuperan de la base de datos utilizando el modelo desplegable y los datos de representación en formato JSON.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 

los menús desplegables de  clase  amplían el  controlador_CIN  { 
    
    función  __construct () { 
        parent :: __construct (); 
        $ this -> load -> model ( 'dropdown' ); 
    } 
    
índice de     función pública  () { 
        $ datos [ 'países' ] =  $ esto -> menú desplegable -> getCountryRows (); 
        $ esto-> load -> view ( 'dropdowns / index' $ data ); 
    } 
    
    función pública  getStates () { 
        $ states  = array (); 
        $ country_id  $ this -> input -> post ( 'country_id' ); 
        if ( $ country_id ) { 
            $ con [ 'conditions' ] = array ( 'country_id' => $ country_id ); 
            $ states  $ this -> dropdown -> getStateRows ( $ con); 
        } 
        echo  json_encode ( $ estados ); 
    } 
    
    función pública  getCities () { 
        $ cities  = array (); 
        $ state_id  $ this -> input -> post ( 'state_id' ); 
        if ( $ state_id ) { 
            $ con [ 'conditions' ] = array ( 'state_id' => $ state_id ); 
            $ cities  $ this -> dropdown -> getCityRows ( $ con ); 
        }
        echo  json_encode ( $ cities ); 
    } 

}

Modelo (Dropdown.php)

El modelo desplegable contiene 4 funciones, __construct (), getCountryRows (), getStateRows () y getCityRows ().
  • __construct() - Define las tablas de la base de datos para el país, el estado y la ciudad.
  • getCountryRows() - Obtenga datos de países de la base de datos y devuelva las filas según las condiciones proporcionadas por la matriz $ params.
  • getStateRows() - Obtenga datos de estado de la base de datos y devuelva las filas según las condiciones proporcionadas por la matriz $ params.
  • getCityRows() - Obtenga datos de la ciudad de la base de datos y devuelva las filas según las condiciones proporcionadas por la matriz $ params.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 

el menú desplegable de  clase  amplía  CI_Model { 
    function  __construct () { 
        $ this -> countryTbl  'countries' ; 
        $ this -> stateTbl  'states' ; 
        $ this -> cityTbl  'cities' ; 
    } 
    
    / * 
     * Obtener filas de países de la tabla de países 
     * / 
    function  getCountryRows ($ params  = array ()) { 
        $ this -> db -> select ( 'c.id, c.name' ); 
        $ this -> db -> from ( $ this -> countryTbl . 'as c' ); 
        
        // obtener datos por condiciones 
        si ( array_key_exists ( "conditions" , $ params )) { 
            foreach ( $ params [ 'conditions' ] como  $ key  =>  $ value ) { 
                if ( strpos ( $ key , '.')! ==  falso ) { 
                    $ esto -> db -> donde ( $ clave , $ valor ); 
                } else { 
                    $ this -> db -> where ( 'c.' . $ key , $ value ); 
                } 
            } 
        } 
        $ this -> db -> where ( 'c.status' , '1' ); 
        
        $ consulta  $ esto -> db -> get (); 
        $ resultado  = ($ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 

        // devolver los datos recuperados 
        devolver  $ resultado ; 
    } 
    
    / * 
     * Obtenga filas de estados de la tabla de países 
     * / 
    function  getStateRows ( $ params  = array ()) { 
        $ this -> db -> select ( 's.id, s.name' ); 
        $ this -> db -> from ( $ this -> stateTbl . 'as s' );
        
        // obtener datos por condiciones 
        si ( array_key_exists ( "conditions" , $ params )) { 
            foreach ( $ params [ 'conditions' ] as  $ key  =>  $ value ) { 
                if ( strpos ( $ key , '.' )! = =  falso ) { 
                    $ this -> db -> where ( $ key , $ value ); 
                } else { 
                    $ this -> db -> where ( 's.' . $ key, $ valor ); 
                } 
            } 
        } 
        
        $ query  $ this -> db -> get (); 
        $ resultado  = ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 

        // devolver los datos recuperados 
        devolver  $ resultado ; 
    } 
    
    / * 
     * Obtener filas de ciudades de la tabla de países 
     * / 
    function  getCityRows ( $ params  = array ()) { 
        $ this -> db-> seleccionar ( 'c.id, c.name' ); 
        $ this -> db -> from ( $ this -> cityTbl . 'as c' ); 
        
        // obtener datos por condiciones 
        si ( array_key_exists ( "conditions" , $ params )) { 
            foreach ( $ params [ 'conditions' ] as  $ key  =>  $ value ) { 
                if ( strpos ( $ key , '.' )! = =  falso ) { 
                    $ esto -> db-> donde ( $ clave , $ valor ); 
                } else { 
                    $ this -> db -> where ( 'c.' . $ key , $ value ); 
                } 
            } 
        } 
        
        $ query  $ this -> db -> get (); 
        $ resultado  = ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 

        // devuelve datos obtenidos 
        de retorno $ resultado ; 
    } 
}

Ver (menús desplegables /)

La carpeta de vista (menús desplegables /) contiene el index.php archivo.
index.php
En el index.phparchivo, se muestra el desplegable de país, estado y ciudad.
jQuery y Ajax
La funcionalidad de cuadros de selección dependiente dinámica utiliza jquery, incluida la biblioteca jQuery.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script >
El siguiente jQuery se usa para inicializar la solicitud de Ajax y obtener datos dinámicos del controlador Dropdowns.
  • Al cambiar el menú desplegable del país, se toma el ID del país seleccionado y se publica este ID en el getStates()método del controlador Dropdowns. En caso de éxito, los datos JSON devueltos se analizan y las opciones se agregan a la lista desplegable del estado.
  • Al cambiar el estado del menú desplegable, se toma la ID del estado seleccionado y se publica este ID en el getCities()método del controlador Dropdowns. En caso de éxito, los datos JSON devueltos se analizan y las opciones se agregan a la lista desplegable de la ciudad.
< script  type = "text / javascript" >
 $ ( document ) .ready ( function () {
     / * Rellene los datos para indicar el desplegable * / 
    $ (' #country ') .on ( 'change' , function () {
         var countryID =  $ ( this ) .val ();
         if (countryID) {
             $ .ajax ({
                tipo: 'POST' ,
                url: '<? php echo base_url (' dropdowns / getStates '); ?> ' ,
                data: 'country_id =' + countryID,
                 success : function (data) {
                     $ (' #state ') .html ( '<option value = ""> Select State </option>' ); 
                    var dataObj = jQuery.parseJSON (datos);
                    if (dataObj) {
                         $ (dataObj) .each ( function () {
                             var option =  $ ('< option />');
                            opción .attr ( 'valor' , este . id ) .text ( este . nombre );           
                            $ (' #estado ') .append (opción);
                        });
                    } else {
                         $ (' #state ') .html ( '<option value = ""> Estado no disponible </option>' );
                    }
                }
            }); 
        } else {
             $ (' #state ') .html ( '<option value = ""> Seleccione el país primero </option>' );
            $ (' #city ') .html ( '<option value = ""> Select state first </option>' );
        }
    });
    
    / * Rellenar datos en la lista desplegable de la ciudad * / 
    $ (' #state ') .on ( 'change' , function () {
         var stateID =  $ ( this ) .val ();
         if (stateID) {
             $ .ajax ({
                tipo: 'POST' ,
                url: '<? php echo base_url (' dropdowns / getCities '); ?> ' ,
                data: 'state_id =' + stateID,
                 success : function (data) {
                     $ (' #city ') .html ( '<option value = ""> Select City </option>' ); 
                    var dataObj = jQuery.parseJSON (datos);
                    if (dataObj) {
                         $ (dataObj) .each ( function () {
                             var option =  $ ('< option />');
                            opción .attr ( 'valor' , este . id ) .text ( este . nombre );           
                            $ (' #city ') .append (opción);
                        });
                    } else {
                         $ (' #city ') .html ( '<option value = ""> Ciudad no disponible </option>' );
                    }
                }
            }); 
        } else {
             $ (' #city ') .html ( '<option value = ""> Select state first </option>' );
        }
    });
});
</ script >
Desplegable dinámico dependiente
Inicialmente, todos los países se enumeran en el desplegable del país. Una vez que se elige un país, los estados que pertenecen al país seleccionado se rellenarán en el menú desplegable del estado. Del mismo modo, una vez que se elige un estado, las ciudades que pertenecen al estado seleccionado se rellenarán en el menú desplegable de la ciudad.
<! - Menú desplegable de país -> 
< select  id = "country" >
    < opción  valor = "" > Seleccione País </ opción >
     <? php 
    si (! vacío ( $ países )) {para cada 
        ( $ países  como  $ fila ) {  
            echo  '<opción valor = "' . $ fila [ 'id' ]. ""> ' . $ fila [ 'nombre' ]. '</option>' ; 
        } 
    } else else { 
        echo  '<option value = ""> País no disponible </option>' ; 
    } 
    ?>

<! - Menú desplegable de estado -> 
< select  id = "state" >
    < opción  valor = "" > Seleccionar país primero </ opción >
</ seleccionar >

<! - Menú desplegable de la ciudad -> 
< select  id = "city" >
    < opción  valor = "" > Seleccionar estado primero </ opción >
</ seleccionar >

Conclusión

Aquí mostramos cómo implementar el desplegable dinámico dependiente en CodeIgniter para el país, el estado y la ciudad. Utilizando este ejemplo, puede crear fácilmente un menú desplegable relacional para cualquier tipo de datos dinámicos. Además, puede ampliar la funcionalidad de cuadros de selección dependientes dinámica según el requisito en la aplicación CodeIgniter.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas