none
Llamar archivo js desde llamada AJAX. RRS feed

  • Pregunta

  • Buenas tardes.

    Estoy desarrollando una aplicación con C# y MVC. En una llamada AJAX lleno una tabla que luego muestro en mi vista:

    $.ajax({
                type: "GET",
                url: "/" + controlador + "/" + accion,
                contentType: "application/json; charset=utf-8",
                data: { "fechaDesde": fechaDesde, "fechaHasta": fechaHasta, "idDispositivo": idDispositivo },
                datatype: "json",
                success: function (data) {
                    $('#tabla tbody').empty();
                    $.each(data, function (i, item) {
    
                        var rows =
                            "<tr>"
                            + "<td>" + dateTimeFormat(item.Fecha) + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombreUsual + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombrePuesto + "</td>"
                            + "<td>" + evaluarDescripcion(item.TipoAsistencia) + "</td>"
                            + "<td>" + item.Hora + " " + mostrarBoton(item.IdTipoAsistencia, item.Hora)
                            + " " + mostrarBotonAusencia(item.Hora, item.IdEmpleado, dateTimeFormat(item.Fecha))
                            + "</td>"
                            + "</tr>";
    
                        $('#tabla tbody').append(rows);
                    });
    
                }
            });

    El método mostrarBotonAusencia() lo que hace es crear un hipervinculo que levanta un modal, he verificado y la etiqueta que me retorna éste es:

    <a href="javascript:void(0);" class="CargarModal" data-url="/Ausencia/Crear" data-id="109" data-parametro="11/1/2018 12:00:00 AM">[Justificar ausencia]</a>

    La cuestión es que esta etiqueta si la coloco directamente en la vista me funciona a la perfección, pero cuando uso ésta desde la llamada AJAX que muestro al principio, no funciona.

    La clase CargarModal la tengo referenciada en la vista pero no es así desde el script donde tengo mi llamada AJAX:

    <script src="~/Scripts/Periodo/CargarModal.js" type="text/javascript"></script>
    Lo que intento decir es que esa etiqueta no llega hasta el "CargarModal.js" desde la llamada AJAX.

    Saludos,


    Carlos Márquez
    San Pedro Sula
    Honduras



    viernes, 30 de noviembre de 2018 21:01

Respuestas

  • Buenos días, Leandro y Sergio.

    Finalmente lo resolví:

     $.ajax({
                type: "GET",
                url: "/" + controlador + "/" + accion,
                contentType: "application/json; charset=utf-8",
                data: { "fechaDesde": fechaDesde, "fechaHasta": fechaHasta, "idDispositivo": idDispositivo },
                datatype: "json",
                async:false,
                success: function (data) {
                    $('#tabla tbody').empty();
                    $.each(data, function (i, item) {
    
                        var rows =
                            "<tr>"
                            + "<td>" + dateTimeFormat(item.Fecha) + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombreUsual + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombrePuesto + "</td>"
                            + "<td>" + evaluarDescripcion(item.TipoAsistencia) + "</td>"
                            + "<td>" + item.Hora + " " + mostrarBoton(item.IdTipoAsistencia, item.Hora)
                            + " " + mostrarBotonAusencia(item.Hora, item.IdEmpleado, dateTimeFormat(item.Fecha))
                            + "</td>"
                            + "</tr>";
    
                        $('#tabla tbody').append(rows);
    
                        
                    });
    
                }
            });


    Como les comenté, mi llamada AJAX para llenar mi tabla funcionaba bien, en ese llenado, dinamicamente creo un botón que me levanta un modal y es en el método mostrarBotonAusencia() que se ve dentro de la llamada.

    function mostrarBotonAusencia(hora, idEmpleado, fecha) {
            debugger;
            if (hora === null) {
                return '<a href="javascript:void(0);" class="CargarModal" data-url="/Ausencia/Crear" data-id="' + idEmpleado + '" data-parametro="' + fecha + '">[Justificar ausencia]</a>';
            }
            else
                return "";
        }


    Pero no me funcionaba cuando quería levantar el modal y es que uso ahí una clase llamada CargarModal, esa clase Cargar modal se encuentra en otro archivo JS. para lo que tuve que también dinamicamente hacer referencia a ese archivo:

    function includeJs(jsFilePath) {
            var js = document.createElement("script");
    
            js.type = "text/javascript";
            js.src = jsFilePath;
    
            document.body.appendChild(js);
        }

    Por lo que mi llamada Ajax finalmente queda así:

    $.ajax({
                type: "GET",
                url: "/" + controlador + "/" + accion,
                contentType: "application/json; charset=utf-8",
                data: { "fechaDesde": fechaDesde, "fechaHasta": fechaHasta, "idDispositivo": idDispositivo },
                datatype: "json",
                async:false,
                success: function (data) {
                    $('#tabla tbody').empty();
                    $.each(data, function (i, item) {
    
                        var rows =
                            "<tr>"
                            + "<td>" + dateTimeFormat(item.Fecha) + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombreUsual + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombrePuesto + "</td>"
                            + "<td>" + evaluarDescripcion(item.TipoAsistencia) + "</td>"
                            + "<td>" + item.Hora + " " + mostrarBoton(item.IdTipoAsistencia, item.Hora)
                            + " " + mostrarBotonAusencia(item.Hora, item.IdEmpleado, dateTimeFormat(item.Fecha))
                            + "</td>"
                            + "</tr>";
    
                        $('#tabla tbody').append(rows);
    
                        includeJs("/Scripts/Periodo/CargarModal.js");
                    });
    
                }
            });

    Un detalle mas es que la opción async se colocó como false

    Y listo, funciona como lo esperaba.

    Saludos,


    Carlos Márquez
    San Pedro Sula
    Honduras


    lunes, 3 de diciembre de 2018 14:44

Todas las respuestas

  • hola

    esto tiene que ver con el jquery se adjunta a los evento, si defines un selector como ser

    $(".CargarModal").click(function() {..

    solo funciona si el html que usa esa clase ya estaba previamenten como parte del DOM, pero si lo pones dinamicamente despues no lo selecciona

    Los nuevos métodos jQuery on() y off()

    Ademas porque planteas este tema en el foro de c#? sino tiene nada que ver, deberias hacerlo quizas en


    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    viernes, 30 de noviembre de 2018 22:02
  • Hola, Tuttini.

    Gusto en saludarte nuevamente.

    Entonces como en mi vista tengo referenciado:

    <script src="~/Scripts/Periodo/CargarModal.js" type="text/javascript"></script>


    Y en la llamada Ajax creo dinamicamente mi hipervinculo:

    <a href="javascript:void(0);" class="CargarModal" data-url="/Ausencia/Crear" data-id="109" data-parametro="11/1/2018 12:00:00 AM">[Justificar ausencia]</a>

    Entonces éste no funciona porque se encuentra referenciado en el DOM de mi vista?

    Saludos,


    Carlos Márquez
    San Pedro Sula
    Honduras

    sábado, 1 de diciembre de 2018 0:38
  • >>Entonces éste no funciona porque se encuentra referenciado en el DOM de mi vista?

    No se que codigo tienes dentro del .js pero si estas adjuntando un evento de jquery y estas generando html dinamicamente entonces no funciona como se adjunta el evento al selector de jquery

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    sábado, 1 de diciembre de 2018 1:42
  • Hola Carlos. Has probado en poner un punto de interrupción en la función? O inclusive desde las herramientas de desarrollador de cualquier navegador puedes Depurar la función JS. 

    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    sábado, 1 de diciembre de 2018 20:34
    Moderador
  • Buenos días, Leandro y Sergio.

    Finalmente lo resolví:

     $.ajax({
                type: "GET",
                url: "/" + controlador + "/" + accion,
                contentType: "application/json; charset=utf-8",
                data: { "fechaDesde": fechaDesde, "fechaHasta": fechaHasta, "idDispositivo": idDispositivo },
                datatype: "json",
                async:false,
                success: function (data) {
                    $('#tabla tbody').empty();
                    $.each(data, function (i, item) {
    
                        var rows =
                            "<tr>"
                            + "<td>" + dateTimeFormat(item.Fecha) + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombreUsual + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombrePuesto + "</td>"
                            + "<td>" + evaluarDescripcion(item.TipoAsistencia) + "</td>"
                            + "<td>" + item.Hora + " " + mostrarBoton(item.IdTipoAsistencia, item.Hora)
                            + " " + mostrarBotonAusencia(item.Hora, item.IdEmpleado, dateTimeFormat(item.Fecha))
                            + "</td>"
                            + "</tr>";
    
                        $('#tabla tbody').append(rows);
    
                        
                    });
    
                }
            });


    Como les comenté, mi llamada AJAX para llenar mi tabla funcionaba bien, en ese llenado, dinamicamente creo un botón que me levanta un modal y es en el método mostrarBotonAusencia() que se ve dentro de la llamada.

    function mostrarBotonAusencia(hora, idEmpleado, fecha) {
            debugger;
            if (hora === null) {
                return '<a href="javascript:void(0);" class="CargarModal" data-url="/Ausencia/Crear" data-id="' + idEmpleado + '" data-parametro="' + fecha + '">[Justificar ausencia]</a>';
            }
            else
                return "";
        }


    Pero no me funcionaba cuando quería levantar el modal y es que uso ahí una clase llamada CargarModal, esa clase Cargar modal se encuentra en otro archivo JS. para lo que tuve que también dinamicamente hacer referencia a ese archivo:

    function includeJs(jsFilePath) {
            var js = document.createElement("script");
    
            js.type = "text/javascript";
            js.src = jsFilePath;
    
            document.body.appendChild(js);
        }

    Por lo que mi llamada Ajax finalmente queda así:

    $.ajax({
                type: "GET",
                url: "/" + controlador + "/" + accion,
                contentType: "application/json; charset=utf-8",
                data: { "fechaDesde": fechaDesde, "fechaHasta": fechaHasta, "idDispositivo": idDispositivo },
                datatype: "json",
                async:false,
                success: function (data) {
                    $('#tabla tbody').empty();
                    $.each(data, function (i, item) {
    
                        var rows =
                            "<tr>"
                            + "<td>" + dateTimeFormat(item.Fecha) + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombreUsual + "</td>"
                            + "<td>" + item.vwEmpleadoModelo.NombrePuesto + "</td>"
                            + "<td>" + evaluarDescripcion(item.TipoAsistencia) + "</td>"
                            + "<td>" + item.Hora + " " + mostrarBoton(item.IdTipoAsistencia, item.Hora)
                            + " " + mostrarBotonAusencia(item.Hora, item.IdEmpleado, dateTimeFormat(item.Fecha))
                            + "</td>"
                            + "</tr>";
    
                        $('#tabla tbody').append(rows);
    
                        includeJs("/Scripts/Periodo/CargarModal.js");
                    });
    
                }
            });

    Un detalle mas es que la opción async se colocó como false

    Y listo, funciona como lo esperaba.

    Saludos,


    Carlos Márquez
    San Pedro Sula
    Honduras


    lunes, 3 de diciembre de 2018 14:44