0

Estoy desarrollando una vista donde se muestra una tabla con varios datos, estos se cargan de una base de datos.

En cada fila hay 2 botones que al presionarlos actualizan un dato de una fila.

El problema es que después de hacer esa actualización el botón deja de funcionar.

También tengo un campo y un botón que buscan una fila por el id. Después de hacer esa búsqueda, carga todo normal pero los botones que están dentro de la fila dejan de funcionar también...por qué pasa esto?

Aquí mi Vista:

<div class="form-row justify-content-center">
             <label>Nro. de Registro</label>
                <input class="form-control" type="text" name="" id="NroRegistro">
        </div>
        <div class="col-md-2 d-md-flex align-items-end">
            <a href="javascript:;" class="btn btn-primary m-btn m-btn--icon" id="Buscar">
            <span><i class="la la-search"></i>
              <span>Buscar</span>
            </span>
            </a>
       </div>
        <div class="row mt-5">
            <div class="table-responsive text-center">
                <table class="table table-sm table-bordered" id="tabla">
                    <thead class="thead-dark">
                        <tr>
                          <th scope="col">Nro. de Registro</th>
                          <th scope="col">Fecha Derivacion</th>
                          <th scope="col">Procedencia</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                       @foreach($documentos as $d)
                       @if($d->IdDestinoOficina!='')
                       @if(auth()->user()->IdOficina == $d->IdDestinoOficina)
                       <tr>
                        <td style="display:none;">{{$d->IdDocumento}}</td>
                       <td>{{$d->NroRegistro}}</td>
                       <td>{{$d->FechaDocumento}}</td>
                       <td>
                        <a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
                        <a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
                       </td>
                       </tr>
                       @endif
                       @endif
                       @endforeach

                        @foreach(auth()->user()->CargarAreas() as $a)
                        @if(auth()->user()->IdEmpleado == $a->IdEmpleado)
                        @foreach($documentos as $d)
                        @if($a->IdOficina == $d->IdDestinoUnidad_su_Oficina and $a->IdUnidadSubArea == $d->IdDestinoUnidad)
                        <tr>
                        <td style="display:none;">{{$d->IdDocumento}}</td>
                       <td>{{$d->NroRegistro}}</td>
                       <td>{{$d->FechaDocumento}}</td>
                       <td>
                        <a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
                        <a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
                        </td>
                       </tr>
                                @endif
                                @endforeach
                            @endif
                        @endforeach
                  </tbody>
            </table>
        </div>
    </div>

Sus Scripts son:

$('#Buscar').on('click', function(){
    var numero = $('#NroRegistro').val();
    $.ajax({
        url: "/Documentos/cargar_tabla",
        type: "post",
        dataType: "json",
        data: {_token: "{{ csrf_token() }}", text: numero},
        success: function (response) {
        $('#table-body').html("");
        $("#table-body").html(response);
        }
    });
});

$('.Procesar').on('click', function(){
    var id = $(this).parents("tr").find('td').eq(0).text();
    $.ajax({
        url: "/Documentos/cargar_tabla",
        type: "post",
        dataType: "json",
        data: {_token: "{{ csrf_token() }}", text: id},
        success: function (response) {
        $('#table-body').html("");
        $("#table-body").html(response);
        }
    });
});

Al momento que hago una búsqueda carga este documento aparte dentro del

`<tbody>`:
    @foreach($documentos as $d)
       @if($d->IdDestinoOficina!='')
           @if(auth()->user()->IdOficina == $d->IdDestinoOficina)
           <tr>
            <td style="display:none;">{{$d->IdDocumento}}</td>
           <td>{{$d->NroRegistro}}</td>
           <td>{{$d->FechaDocumento}}</td>
           <td>
            <a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
            <a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
           </td>
           </tr>
           @endif
       @endif
      @endforeach

    @foreach(auth()->user()->CargarAreas() as $a)
    @if(auth()->user()->IdEmpleado == $a->IdEmpleado)
        @foreach($documentos as $d)
            @if($a->IdOficina == $d->IdDestinoUnidad_su_Oficina and $a->IdUnidadSubArea == $d->IdDestinoUnidad)
                    <tr>
                    <td style="display:none;">{{$d->IdDocumento}}</td>
                   <td>{{$d->NroRegistro}}</td>
                   <td>{{$d->FechaDocumento}}</td>
                   <td>
                    <a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
                    <a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
                    </td>
                   </tr>
            @endif
        @endforeach
    @endif
@endforeach

Entonces...no sé por qué deja de funcionar los botones...o estoy haciendo algo mal??

3
  • Yo no veo una razón para que no ande, porque no haces un console en el success o miras el tab network del navegador para ver si cada vez que haces click se hace una petición.
    – Emeeus
    Commented el 28 ago. 2019 a las 15:43
  • 2
    Hola estimado, cosas muy básicas que se nos pueden pasar: Revisar el import de la librería, verificar si el objeto se crea en el DOM o posterior, si es posterior la llamada onClick debería verse algo así $(document).on('click','#Buscar', function() . Intenta y me avisas como te va para colocarlo como respuesta.
    – harifo
    Commented el 28 ago. 2019 a las 15:49
  • 1
    @harifo si amigo, eso era lo que necesitaba cambiar solo que en vez de buscar era procesar, gracias!
    – SalazarE
    Commented el 28 ago. 2019 a las 15:54

1 respuesta 1

2

Por lo que noto, al actualizar tu tabla lo unico que recarga otra vez es el boton Procesar. Entonces aqui viene un pequeño error, el codigo del boton solo funciona la primera vez que se carga, pero despues no ya que hay una segunda vez que carga. Entonces:

Tu boton:

$('.Procesar').on('click', function(){

Cambialo por:

$(document).on('click', '.Procesar', function(){

Con ese codigo, tu boton podra funcionar una segunda vez.

1
  • Gracias! Valla esa parte no sabia, me ayudo bastante!
    – SalazarE
    Commented el 28 ago. 2019 a las 15:54

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.