0

Buen dia a todos,

El día de hoy necesito de su ayuda, estoy creando una tabla en HTML que se alimenta dinamicamente a travez de AJAX en este caso uso .load() ya que esta tabla tiene que actualizar en tiempo real los ADD o los DELETES que suceden en estos registros, el html, mi servicio web corren bien. Mi problema viene cuando a la hora que llega el callback del método .load() me imprime mi response dentro del cuerpo del tBody y después ya inserta las etiquetas .

OTRA COSA dentro de mis genero los botones editar y borrar, con $.ajax dejan de funcionar, entiendo que es por temas del DOM , por lo que uso el método .on() el detalle es que cuando actualizo varias veces dejan de funcionar mis eventos 'click'

Si uso $.ajax mi tabla no se actualizaría y tendría que borrar y agregar con jquery cada cambio de registro y eso es una gran carga para el DOM.

Por favor su ayuda o alguna manera alterna de poderlo hacer.

Comparto mi código HTML , JS, y el RESPONSE en formato JSON

Agradezco de su tiempo

HTML TABLA

       <div class="tableUser">
                <table border="1" id="table-user">
                    <caption>Usuarios</caption>
                    <thead>
                        <tr>
                            <th>Id User</th>
                            <th>Nombre</th>
                            <th colspan="2">Apellidos</th>
                            <th>eMail</th>
                            <th>Celular</th>
                            <th>CURP</th>
                            <th>Posicion</th>
                        </tr>
                    </thead>
                    <tbody id="data-user">
                    </tbody>
                </table>
            </div>

Mi código JQUERY

function tableUser() {
var urlsw = "MI URL SW";
var form = $('#config-user').attr('name')
var jnRequest = {
    action: "query",
    idUser: document.querySelector('#idUser').value,
    form: form
}
    $('#data-user').load(urlsw, jnRequest, function(result, textStatus, jqXHR) {          
        if (jqXHR.status === 200) {
          var  result = JSON.parse(result)
            if ($.isEmptyObject(result.response)) {
                alert('no hay datos');
            } else {
                $.each(result.response, function (idx, opt) {
                    $('#data-user').append('<tr><td>' + opt.idUser + '</td><td>' + opt.name + '</td><td>' + opt.lastNameF + '</td><td>' + opt.lastNameM + '</td><td>' + opt.mail + '</td><td>' + opt.tel + '</td><td>' + opt.curp + '</td><td>' + opt.position + '</td><td><div><input id=edit type=button value=Editar  ><input id=delete type=button value=Borrar ></div></td></tr>')
                });
            }
        } else {
            console.log('fallo la conexion')
        }
   });

Esto es lo queme imprime en el DOM

me pone todo dentro de la etiqueta tbody todo lo demas lo hace bien y hasta aqui lo botones dentro de la tabla funcionan

me pone todo dentro de la etiqueta tbody todo lo demas lo hace bien y hasta aqui lo botones dentro de la tabla funcionan

introducir la descripción de la imagen aquí

2
  • 1
    el método load de jquery es para cargar archivos que no son json e insertarlos en el selector especificado. Este método ss usa para cargar html, txt en el DOM. Si quieres cargar datos json deberías usar get o getJSON
    – hawks
    el 28 abr. 2020 a las 20:06
  • Gracias! ya me quedo claro, y ahora trabajo solo con Ajax para peticiones al servidor y con LOAD para cargar texto o html. el 12 may. 2020 a las 16:50

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.