Ticker

6/recent/ticker-posts

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 :)

Publicar un comentario

0 Comentarios