1

Hola estoy tratando de hacer que un boton generado por AJAX lleve a cabo un evento y que me muestre algo por pantalla, pero no se como hacerlo

En este código es la petición Ajax que hace al servidor,

case "Carlo Sebastian":
                    $.ajax({
                        url: '../controllers/listarLicitaciones.php?nombre=Carlo Sebastian',
                        type: 'GET',
                        success: function(response) {
                            if (response) {
                                let respuestas = JSON.parse(response)
                                console.log(respuestas);
                                let template = '';
                                respuestas.forEach(respuesta => {
                                    template += `<tr id="${respuesta.id}">
                            <td>${respuesta.nombre}</td><td>${respuesta.ofertante}</td>
                            <td>${respuesta.estado}</td><td>${respuesta.ejecutor}</td>
                            <td>${respuesta.limite}</td><td><a href="${respuesta.link}" target="_blank">enlace</a></td><td><button id="click" type="button" class="pasar-fase btn btn-danger">Pasar a Presentacion</button></td></tr>`
                                });
                                $('#licitaciones').html(template);
                            } else {
                                document.getElementById('contendor').innerHTML = '<img src="../resources/defecto.png" class="h-50 w-50"><button type="Button" id="seguimiento2">Seguimiento de las obras</button>';
                            }
                        },
                        error: function() {
                            console.log('Query no Funciona');
                        }
                    });

como pueden ver si el nombre es el correcto, hará la petición ajax, que en pocas palabras busca datos y luego los imprime en una pantalla, si no puede le añade una imagen al contenedor padre, y este es el código para que el botón envie una peticion al servidor y vuelva la tabla con datos de las obras solicitadas

$('#seguimiento2').on('click', function() {
            $.ajax({
                url: '../controllers/seguimiento.php',
                type: 'GET',
                success: function(response) {
                    if (response) {
                        document.getElementById('contendor').innerHTML = `
                             <table class="table">
                                 <thead>
                                     <tr>
                                         <td><p class="h4">Nombre de la licitacion</p> </td>
                                         <td><p class="h4">Ofertante</p></td>
                                         <td><p class="h4">Estado</p></td>
                                         <td><p class="h4">Ultimo Ejecutor</p></td>
                                        <td><p class="h4">Fecha Limite</p></td>
                                         <td><p class="h4">Participantes</p></td>
                                         <td><p class="h4">Link de la Licitación</p></td>
                                     </tr>
                                 </thead>
                                 <tbody id="licitaciones">
                                 </tbody>
                             </table>`;
                        let respuestas = JSON.parse(response)
                        console.log(respuestas);
                        let template = '';
                        
                        respuestas.forEach(respuesta => {
                            template += `<tr id="${respuesta.id}">
                            <td>${respuesta.nombre}</td><td>${respuesta.ofertante}</td>
                            <td>${respuesta.estado}</td><td>${respuesta.ejecutor}</td>
                            <td>${respuesta.limite}</td><td><a href="${respuesta.link}" target="_blank">enlace</a></td><td><button id="click" type="button" class="pasar-fase btn btn-danger">Terminar</button></td></tr>`
                        });
                        $('#licitaciones').html(template);
                        $('#seguimiento2').hide();
                        $('#vuelta').show();

                    } else {
                        document.getElementById('contendor').innerHTML = '<img src="../resources/defecto.png" class="h-50 w-50">';
                    }
                },
                error: function() {
                    console.log('Query no Funciona');
                }
            });
        });

Llevo dándole muchas vueltas a esto, por favor ayuda

2 respuestas 2

0

el evento click del botón que estas creando, ponlo justo después de esta línea:

document.getElementById('contendor').innerHTML = '<img src="../resources/defecto.png" class="h-50 w-50"><button type="Button" id="seguimiento2">Seguimiento de las obras</button>';

Esto porque, recién ahí es que tu botón existe, intenta.

0

Aquí tienes una sugerencia si en caso de que el botón al que deseas enlazar la función es el que declaras en el primer bloque de código es decir:

<button id="click" type="button" class="pasar-fase btn btn-danger">Pasar a Presentacion</button>

Revisa el identificador que estas usando para obtener el elemento HTML.

Si es otro botón en ese caso primero verifica que este exista en tu documento, hay varias formas de hacer esto una de las mas simples es la siguiente:

if ($("#seguimiento2").length === 0){
    ...
}

Esto es porque como dice la respuesta anterior el botón solo existe luego que lo agregas mediante ajax.

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.