0

me encuentro desarrollando una pagina, la cual en su mayoría es dinámica y para ello utilizo Ajax, el detalle esta en una tabla que se pinta según el dato seleccionado y esta tabla tiene un botón "+" el cual ejecuta un modal formulario, al darle click por primera vez no hace nada, le doy de nuevo y si ejecuta el modal, no comprendo cual sea el problema, o si en algo afecte que esa tabla sea dinámica. introducir la descripción de la imagen aquí

Mi funcion javascript es la siguiente:

function getModal(e){
    e.preventDefault();

    document.getElementById('btnabrir').addEventListener('click',function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='block'
        return false
    })

    document.getElementsByClassName('modal_cerrar')[0].addEventListener('click', function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='none'
    })

    document.getElementsByClassName('cancelar')[0].addEventListener('click', function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='none'
    })
}
AQUÍ SE CREA LA TABLA A PARTIR DEL DATO ENVIADO POR AJAX DE LA PRIMER TABLA.

<?php

if (isset($_POST['id_edo'])){ $id_edo = $_POST['id_edo'];

$stid = oci_parse($conn,"SELECT clavecct, il_actual, il_propuesta, suc_propuesta, dist_propuesta, tiempo_pro,
procede_enlace, procede FROM planea.tabla WHERE P_ACTUAL = 1 and id_edo = $id_edo");
oci_execute($stid);
    echo "<table id='table2'>
        <thead class='headTable'>
            <tr>
                <th colspan='6'  id='tableName'>ESCUELAS POR REVISAR</th>
                <th colspan='2'  id='tableName'><button id='btnabrir' title='Agregar Escuela'><i class='fa fa-plus'></i></button></th>
            </tr>
            <tr id=''>
                <th>CLAVE CCT</th>
                <th>IL ACTUAL</th>
                <th>IL PROPUESTA</th>
                <th>SUC PROPUESTA</th>
                <th>DIST PROPUESTA</th>
                <th>TIEMPO PROMEDIO</th>
                <th>PROCEDE ENLACE</th>
                <th>PROCEDE</th>
            </tr>
        </thead>";
    while (($row = oci_fetch_object($stid)) != false) {
        $cct[] = $row;
    }
    //RECORRE EL ARREGLO DE OBJETOS E IMPRIME EL OBJETO ESPECIFICADO, EL NOMBRE DEL OBJETO DEBE SER IGUAL O NO MOSTRARA NADA
    foreach ($cct as $cct) {
    echo "<tr>
            <td><a id=".$cct -> CLAVECCT." class='cct' href='' onClick='getCCT(event);'>".$cct -> CLAVECCT."</a></td>
            <td>".$cct -> IL_ACTUAL."</td>
            <td>".$cct -> IL_PROPUESTA."</td>
            <td>".$cct -> SUC_PROPUESTA."</td>
            <td>".$cct -> DIST_PROPUESTA."</td>
            <td>".$cct -> TIEMPO_PRO."</td>
            <td>".$cct -> PROCEDE_ENLACE."</td>
            <td>".$cct -> PROCEDE."</td>
        </tr>";
    }
    echo "</table>";
1
  • Recuerda que puedes editar tu pregunta todas las veces que desees para añadir toda la info que haga falta.
    – Alfabravo
    Commented el 22 mar. 2022 a las 17:57

1 respuesta 1

0

Los listeners no se añaden en el onclick, sino al terminar de cargar los elementos de la página (o al terminar de pintar algún elemento nuevo que le añadas). Le estás diciendo presta atención a todas las veces que, en ESTE elemento de la página, ocurra ESTO. Añadir el listener no es correr el método, sino decirle cuándo debe correr.

La primera vez que ejecutas el onclick, los listeners no existen, así que no se ejecuta nada; sólo se crean y comienzan a escuchar (pero el evento YA sucedió). La segunda vez ya hay listeners y hacen (pero los vuelves a crear innecesariamente).

Esos tres addEventListener deberías correrlos dentro de una función anónima de JQuery, por ejemplo

$( document ).ready(function() {
    document.getElementById('btnabrir').addEventListener('click',function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='block'
        return false
    })

    document.getElementsByClassName('modal_cerrar')[0].addEventListener('click', function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='none'
    })

    document.getElementsByClassName('cancelar')[0].addEventListener('click', function(){
        document.getElementsByClassName('fondo_transparente')[0].style.display='none'
    })
});

(de hecho, se pueden simplificar con JQuery pero no me da la vida para mejorar el código hoy; revisa!).

Y tu elemento no necesitaría definirle nada en el evento

<a href='#' id='btnabrir' title='Agregar Escuela'>
    <i class='fa fa-plus'></i>
</a>

Porque ya tendría el listener correspondiente asignado desde que se termina de cargar la página.

5
  • Muchas gracias por tu tiempo Alfabravo, lo intente tal cual me indicas, pero me sale un error "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')", supongo que se debe a que el elemento no existe a la hr de terminar de cargar el DOM, esta es una segunda tabla creada a partir de una primera. Commented el 22 mar. 2022 a las 17:43
  • Ah, entonces el momento en el que se crea es otro y es ahí donde le asignas los listeners a los nuevos elementos (como te comentaba al comienzo de la respuesta). Con alguito más de contexto en el código podría darse algo más útil. ¿Entiendes el fondo de la respuesta?
    – Alfabravo
    Commented el 22 mar. 2022 a las 17:45
  • Entiendo tu lógica, pero no se como llevarlo acabo. Commented el 22 mar. 2022 a las 17:53
  • @AntonioGalicia necesitamos que pongas en tu pregunta el código con el que creas los elementos a los que les pones los listeners :)
    – Alfabravo
    Commented el 22 mar. 2022 a las 17:56
  • Agregue la parte PHP que es donde se forma la segunda tabla, el dato para formarla es enviada por AJAX Commented el 22 mar. 2022 a las 18:29

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.