Ir al contenido principal

Input Select Dinámico - JQuery y Ajax

En el siguiente apartado implementaremos 3 input select dinámicos - HTML, la data se alimentara desde servicios WCF.

Para llevar acabo este laboratorio haremos uso de Ajax, JQuery y tipo de dato JSON, independientemente que tenemos que considerar el Consumir servicios WCF - puedes consultar el link.

Iniciamos creando el primer archivo JavaScript (.js) de nombre AjaxMethods.js con los siguiente métodos. Primer método LoadFillDepartamento():

function LoadFillDepartamento(){
    $.ajax({//Inicializamos el Ajax que es parte del JQuery
            url: "Home/GetAllDepartamento",//Url que se encarga de linkear el método que trae la data
            type: "POST",",//Tipo POST - para obtener la lista de datos
            dataType: "json",//Dato tipo json - el método que nos trae la data es un JsonResult
            data: "{}",",//Pasar lo parámetros o filtros si es que existiera
            success: function (data) {//Ejecutamos la función para poder cargar la data al select

                if (data == null) {//Validación de datos nulos
                    alert('Disculpe, No hay departamentos que mostrar.');
                    return
                } else {
                    for (var i = 0; i < data.length; i++) {{//Recorremos y almacenamos la data en el select (SltDepartamento)
                        $("#SltDepartamento").append("<option value=" + data[i].CodDepartamento + ">" + data[i].DesDepartamento + "</option>");
                    }
                }
            },
            error: function (jqXHR, status, error) {//mensaje de error
                alert('Disculpe, existió un problema método LoadFillDepartamento');
            }
        });

}

Segundo método LoadFillProvincia() con el parámetro que captura el valor del código del select del departamento:


function LoadFillProvincia(jspCodDepartamento) {
    $.ajax({
        url: "Home/GetAllProvincia",
        type: "POST",
        dataType: "json",
        data: { pCodDepartamento: jspCodDepartamento },//parámetro que captura el valor del codigo de departamento
        success: function (data) {
            if (data != null) {
                $("#SltProvincia").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltProvincia").append("<option value=" + data[i].CodProvincia + ">" + data[i].DesProvincia + "</option>");

                    LoadDistrito();
                }
            } else {
                alert('Disculpe, El departamento seleccionado\nno cuenta con provincias.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillProvincia');
            return;
        }
    })

}

Tercer método LoadFillDistrito() con el parámetro que captura el valor del código del select de la provincia:


function LoadFillDistrito(jspCodProvincia) {
    $.ajax({
        url: "Home/GetAllDistrito",
        type: "POST",
        dataType: "json",
        data: { pCodProvincia: jspCodProvincia },},//parámetro que captura el valor del codigo de provincia

        success: function (data) {
            if (data != null) {
                $("#SltDistrito").find('option').remove();//Removemos los datos actuales para volver a cargar los datos según la selección que se realiza en el select de la provincia
                for (var i = 0; i < data.length; i++) {
                    $("#SltDistrito").append("<option value=" + data[i].CodDistrito + ">" + data[i].DesDistrito + "</option>");
                }
            } else {
                alert('Disculpe, La provincia seleccionado\nno cuenta con distritos.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillDistrito');
            return;
        }
    })

}

Cuarto método LoadProvincia() la que se encargara de de seleccionar valores iniciales por defecto y cargar los demás select:


function LoadProvincia() {
    //Seleccionar por defecto el departamento Lima 15
    $("<option value='15'>DEPARTAMENTO LIMA</option>").appendTo("#SltDepartamento");

    //Cargar las provincias dependientes del departamento 15
    vCodDepartamento = $('#SltDepartamento').val();
    if (vCodDepartamento = '15') {
        LoadFillProvincia(vCodDepartamento);
    }

    //Select's dependiente del departamento
    //Cargar las provincias según el departamento seleccionado
    $('#SltDepartamento').change(function () {
        var vCodDepartamento = $(this).val();
        LoadFillProvincia(vCodDepartamento);
    });

}

Quito método LoadDistrito() la que se encargara de de seleccionar valor iniciales por defecto y cargar los :
function LoadDistrito() {
    vCodProvincia = $('#SltProvincia').val();//captura el valor inicial - en primera instancia
    if (vCodProvincia != null && vCodProvincia != "") {
        LoadFillDistrito(vCodProvincia); //carga los datos según el valor seleccionado

    } else {
        alert('Disculpe, existió un problema al cargar los distritos');
        return;
    }

    $('#SltProvincia').change(function () {//captura el valor seleccionado en segunda instancia
        var vCodProvincia = $(this).val();
        LoadFillDistrito(vCodProvincia); //carga los datos según el valor seleccionado
    });

}

Parar finalizar la creación de métodos en el arvhico AjaxMethods.js se crea el método de inicialización que invocara a los método principales que luego llamaran a los demás métodos.


function IniciazaMetodos() {
    LoadFillDepartamento();
    LoadProvincia();

}

De esta manera quedaría el primer archivo AjaxMethods.js creado:

function IniciazaMetodos() {
    LoadFillDepartamento();
    LoadProvincia();
}

function LoadFillDepartamento(){
    $.ajax({
            url: "Home/GetAllDepartamento",
            type: "POST",
            dataType: "json",
            data: "{}",
            success: function (data) {

                if (data == null) {
                    alert('Disculpe, No hay departamentos que mostrar.');
                    return
                } else {
                    for (var i = 0; i < data.length; i++) {
                        $("#SltDepartamento").append("<option value=" + data[i].CodDepartamento + ">" + data[i].DesDepartamento + "</option>");
                    }
                }
            },
            error: function (jqXHR, status, error) {
                alert('Disculpe, existió un problema método LoadFillDepartamento');
            }
        });
}

function LoadProvincia() {
    //Seleccionar por defecto el departamento Lima 15
    $("<option value='15'>DEPARTAMENTO LIMA</option>").appendTo("#SltDepartamento");

    //Cargar las provincias dependientes del departamento 15
    vCodDepartamento = $('#SltDepartamento').val();
//    alert(vCodDepartamento);
    if (vCodDepartamento = '15') {
        LoadFillProvincia(vCodDepartamento);
    }

    //Select's dependiente del departamento
    //Cargar las provincias según el departamento seleccionado
    $('#SltDepartamento').change(function () {
        var vCodDepartamento = $(this).val();
//        alert(vCodDepartamento);
        LoadFillProvincia(vCodDepartamento);
    });
}

function LoadFillProvincia(jspCodDepartamento) {
    $.ajax({
        url: "Home/GetAllProvincia",
        type: "POST",
        dataType: "json",
        data: { pCodDepartamento: jspCodDepartamento },

        success: function (data) {
            if (data != null) {
                $("#SltProvincia").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltProvincia").append("<option value=" + data[i].CodProvincia + ">" + data[i].DesProvincia + "</option>");

                    LoadDistrito();
                }
            } else {
                alert('Disculpe, El departamento seleccionado\nno cuenta con provincias.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillProvincia');
            return;
        }
    })
}

function LoadDistrito() {
    vCodProvincia = $('#SltProvincia').val();
//    alert(vCodProvinci    a);
    if (vCodProvincia != null && vCodProvincia != "") {
        LoadFillDistrito(vCodProvincia);
    } else {
        alert('Disculpe, existió un problema al cargar los distritos');
        return;
    }

    $('#SltProvincia').change(function () {
        var vCodProvincia = $(this).val();
        LoadFillDistrito(vCodProvincia);
    });
}

function LoadFillDistrito(jspCodProvincia) {
    $.ajax({
        url: "Home/GetAllDistrito",
        type: "POST",
        dataType: "json",
        data: { pCodProvincia: jspCodProvincia },

        success: function (data) {
            if (data != null) {
                $("#SltDistrito").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltDistrito").append("<option value=" + data[i].CodDistrito + ">" + data[i].DesDistrito + "</option>");
                }
            } else {
                alert('Disculpe, La provincia seleccionado\nno cuenta con distritos.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillDistrito');
            return;
        }
    })
}

Luego creamos el segundo archivo JavaScript (.js) de nombre Principal.js que se encargara de llamar al método de IniciazaMetodos que está en el primer archivo. 

$(document).ready(function () {
    IniciazaMetodos();
});

De esta manera podemos realizar inputs de tipo select dinámicos.

Nos vemos en el siguiente apartado :)

Comentarios

Entradas más populares de este blog

Habilitar Usuario HR Oracle

Al realizar la primera instalación del Oracle, el usuario HR por defecto está bloqueado y por ende no podemos loguearnos como dicho usuario, lo que debe hacer son los siguiente pasos, aplicables para Linux o Windows.
1. Conectarse como usuario system o sysdba + contraseña haciendo uso del comando connect.
Usuario: system
Password: xxxx 


2. Hacer uso  del comando alter user hr account unlock desbloqueamos la cuenta.
alter user hr account unlock;

3. Escribimos el comando alter user HR identified by hr; con esto estamos diciendo que la contraseña será hr.

alter user HR identified by hr;

4. Ahora testeamos la conexión con el comando - conn hr/hr@xe. Si deseas después de conectarnos se puede realizar un select a la tabla employees del hr.


Resultado del select realizado
5. Con todos estos pasos realizados ya podemos logearnos desde cualquier IDE como el usuario hr  y la contraseña hr que definimos en el paso 3. 
Para finalizar nos loguearemos con el IDE Oracle SQL Developer.

Espero les sea de utilidad,…

Usuario SYS y SYSTEM - ORACLE

Usuario SYS y SYSTEM
Ambos usuario son creados de forma automática al crear la base de datos ORACLE y se otorga el rol de DBA.

SYS (password por defecto: CHANGE_ON_INSTALL).
SYSTEM (password por defecto: MANAGER).

Lo que se recomienda es cambiar el password de ambos usuarios por el tema de seguridad.

SYS:
Todas las tablas y vistas para el diccionario de datos de la base de datos están almacenados en el esquema SYS. Estas tablas y vistas son críticas para el funcionamiento de la base de datos ORACLE. Para mantener la integridad del diccionario de datos, las tablas del esquema SYS son manipulados solo por la base de datos. Nunca se debería modificar algo o crear tablas en el esquema del usuario SYS.

SYSTEM:
El usuario SYSTEM se utiliza para crear tablas y vistas adicionales que muestran información administrativa, tablas internas y vistas utilizado por varias opciones y herramientas de la base de datos ORACLE. No se recomienda utilizar el esquema SYSTEM para almacenar tablas de interés para usu…

Parámetro de entrada y salida – PL/SQL

Parámetro de entrada y salida – PL/SQL:
Los parámetros de entrada y salida no son los parámetros de inicialización de la base de datos ORACLE. Los parámetros de entra y salida son utilizados mayormente en implementaciones de funciones, procedimientos almacenados o bloques de código bajo el lenguaje del PL/SQL, se considera que ambos parámetros (entra y salida) puedan realizar operaciones en el mismo bloque PL/SQL, es decir, si enviamos un parámetro de entrada hará que cumpla cierta operación y retornara los valores de salida de dicha operación procesada de acuerdo al parámetro de ingresado. Es de acuerdo al caso que nos presenta en la implementación.
Algo importante al definir los parámetros, es saber y considerar cuántos tipos de parámetro existe si solo hablamos de entrada y salida, en realidad mi determinación seria 3 tipos:

Parámetros:

IN – entrada
OUT – salida
IN OUT – entrada salida

Parámetro IN – entrada:
El comportamiento común de estés tipos de parámetros es estar siempre pendiente d…