0

Estoy realizando un proyecto web desde la vista administrador, tengo un table de clientes hecho con ajax, jquery y web method, en el cual me lista todos los clientes registrados con un botón actualizar. introducir la descripción de la imagen aquí

Al darle click tiene que llenar todos los campos del cliente, pero mi dificultad es llenar los DropDownList que tengo en cascada (Pais, departamento...). Solo me llena el país pero no lo demás. Todo lo llamo con WebMethod.

function addRowDT(obj) {
tabla = $("#tbl_Socio").DataTable();
for (var i = 0; i < obj.length; i++) {
    tabla.fnAddData([     obj[i].idpais,
        obj[i].iddepartamento,
        obj[i].idprovincia,
        obj[i].idditrito]);
}  }

Así lleno el formulario:

$("#cboPais").val(data[21]);
$("#cboDepartamento").val(data[22]);
$("#cboProvincia").val(data[23]);
$("#cboDistrito").val(data[24]);

Codigo Ajax Pais

$.ajax({
    type: "POST",
    url: "SociosRed.aspx/GetPais",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    success: function (result) {
        $("#cboPais").empty();
        $("#cboPais").append("<option value='0'>--Select--</option>");
        $.each(result.d, function (key, value) {
            $("#cboPais").append($("<option></option>").val(value.Codigo).html(value.Nombre));
        }); },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + ": " + XMLHttpRequest.responseText);
    }
});

Codigo Ajax de Departamento

$("#cboPais").change(function () {
    var params = new Object();
    params.pais = $("#cboPais").val();
    params = JSON.stringify(params);

    $.ajax({
        type: "POST",
        url: "SociosRed.aspx/GetDepartamentosByPais",
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (result) {
            $("#cboDepartamento").empty();
            $("#cboDepartamento").append("<option value='0'>--Select--</option>");
            $.each(result.d, function (key, value) {
                $("#cboDepartamento").append($("<option></option>").val(value.Codigo).html(value.Nombre));
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ": " + XMLHttpRequest.responseText);
        }
    });
});

1 respuesta 1

0

Si tienes combos dependientes que se asignan en cascada no puedes asignar el val() de todos a la vez porque no tendras las opciones que seleccionar.

Debes cargar la lista del primeros, asignar el valor, esto hara que se lance la carga del segundo (usando como filtro la seleccion del primero), entonces asignas el valor el segundo y asi con el resto.

AJAX Cascading DropDownList using jQuery in ASP.Net

En la edicion eres tu quien controla la carga y asignacion de los combos en cascada para que se vayan cargando y asignando


En el ready de la pagina defines la secuencia

$(function(){

    $("#cboPais").change(function () {
       CargarDepartamentos();
    });

    CargarPaises();

    //aqui recibes los datos de edicion
    var data = ....

    $("#cboPais").val(data[21]);

    CargarDepartamentos();

    $("#cboDepartamento").val(data[22]);

    //sigue la secuancia

});

por fuera defines las funciones que puedes invocar desde eventos o cuando lo necesites

function CargarPaises()
{

    $.ajax({
        type: "POST",
        url: "SociosRed.aspx/GetPais",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (result) {

            $("#cboPais").empty();
            $("#cboPais").append("<option value='0'>--Select--</option>");
            $.each(result.d, function (key, value) {
                $("#cboPais").append($("<option></option>").val(value.Codigo).html(value.Nombre));
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ": " + XMLHttpRequest.responseText);
        }
    });

}


function CargarDepartamentos()
{
    var params = new Object();
    params.pais = $("#cboPais").val();
    params = JSON.stringify(params);

    $.ajax({
        type: "POST",
        url: "SociosRed.aspx/GetDepartamentosByPais",
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (result) {
            $("#cboDepartamento").empty();
            $("#cboDepartamento").append("<option value='0'>--Select--</option>");
            $.each(result.d, function (key, value) {
                $("#cboDepartamento").append($("<option></option>").val(value.Codigo).html(value.Nombre));
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ": " + XMLHttpRequest.responseText);
        }
    });
}
5
  • Tiene algún ejemplo aparte de ese link? para saber como cargar la lista de departamentos y luego darle el valor? al inciar si me carga la lista de paises, pero como hago que me cargue automaticamente la de departamentos? Commented el 28 abr. 2019 a las 22:55
  • Pero no necesitas ningun ejemplo porque seguramente el codigo ya lo tienes si estas cargando los combos en base a las llamadas ajax. no hay ningun automaticamente, creo que ahi te confundes, tu debes ir invocando las llamadas de carga y asignacion de los combos. O sea cargas los paises, en el success asignas el val() para que se seleccione el pais, alli mismo invocas la carga de los departamentos, en el success asignas el val() de departamentos he invocas la carga de provincias, en el success asignas el val() de provincias y asi continua ... Commented el 28 abr. 2019 a las 23:20
  • Acabo de actualizar mi codigo, esa es la manera como lleno mis dropdownlist. dentro del success, como invoco a la carga de departamentos? Commented el 28 abr. 2019 a las 23:34
  • edite el codigo basandome en lo que publicaste Commented el 29 abr. 2019 a las 1:10
  • Muchas gracias! si me funcionó! Commented el 29 abr. 2019 a las 1:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.