1

Buenas estoy intentando editar registros con un modal, la carga de datos la consigo, pero al hacer el AJAX siempre me recoge el mismo registro.

En la vista, muestro un datatable con los registros y un botón de editar

@foreach ($asociados as $usr)  
    <tr class="dato_tabla">
       <td>
         <div class="letr255">
           @php
             echo str_limit($usr->name, 1, "");
           @endphp 
           @php
             echo str_limit($usr->apellidos, 1, "");
           @endphp                
         </div>
         <div class="ayudaletr255">
            {{ $usr->name }} {{ $usr->apellidos }} <br> 
            <span class="spanEmail">{{ $usr->email }}</span>
         </div>
        </td>
        <td>{{ date('j M, Y', strtotime($usr->created_at ))}}</td>
        <td>
          <a href="" style="font-weight: 600;">{{ $usr->url }}</a>
        </td>
          <td class="center">
             @if ($usr->estado == 0) 
               <span class="desactivado">Desactivado</span>
             @else
               <span class="activado">Activado</span>
             @endif
          </td>
          <td class="center">
             <a href="#editarInvitado{{ $usr->id }}" data-toggle="modal" data-target="#editarInvitado{{ $usr->id }}" id="{{ $usr->id }}"><i class="far fa-edit eye"></i></a>
             <a href="javascript:void(0);" id="{{ $usr->id }}" class="borrar_invitado"><i class="far fa-trash-alt eye"></i></a>
          </td>
         </tr>
         @include('modales.editar-Invitado')
@endforeach

El modal lo metro dentro del foreach, para que me repita uno por cada registro, y le pongo #editarInvitado{{ $usr->id }} para que sean diferentes.

Ventana de modal

<div class="modal fade" id="editarInvitado{{ $usr->id }}" tabindex="-1" role="dialog" aria-labelledby="editarInvitadoLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editarInvitadoLabel"><i class="fas fa-pencil-alt"></i> Editar invitado</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form enctype="multipart/form-data" class="formEditInvitado paddingForm">
                @method('post')
                @csrf
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <input type="text" class="form-control myinputs" name="nameUserUserEdit" id="nameUserUserEdit" value="{{ $usr->name }}" autocomplete="off" placeholder="Nombre" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control myinputs" name="apellidosUserUserEdit" id="apellidosUserUserEdit" value="{{ $usr->apellidos }}" autocomplete="off" placeholder="Apellidos" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control myinputs" name="emailUserUserEdit" id="emailUserUserEdit" value="{{ $usr->email }}" autocomplete="off" placeholder="Email (Usuario)" required>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <input type="password" class="form-control myinputs" name="passwordlUserUserEdit" id="passwordlUserUserEdit" value="" autocomplete="off" placeholder="Contraseña*">
                        </div>
                        <small class="miSmall">*Dejar en blanco si no la quieres cambiar)</small>
                        <input type="hidden" value="{{ $usuario->id }}" id="idUsuarioEdit">
                    </div>
                </div>
                @if ($contarAsociados->total == 0)
                    <small>Te quedan <strong>2 usuarios</strong>, para que puedan visualizar tu panel.</small>
                @elseif ($contarAsociados->total == 1)
                    <small>Te queda <strong>1 usuario</strong>, para que puedan visualizar tu panel.</small>
                @endif
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btnCancelar" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btnGuardar">Guardar</button>
        </div>
    </form>
      </div>
    </div>
</div>

El intento de AJAX con un console.log para saber si trae bien los datos

$("#editarInvitado{{ $usr->id }}").on("submit", ".formEditInvitado", function(a){
        a.preventDefault();
        var parametrosEdit= {
            "nombre_invitado" : $("#nameUserUserEdit").val(),
            "apellidos_invitado" : $("#apellidosUserUserEdit").val(),
            "email_invitado" : $("#emailUserUserEdit").val(),
            "password_invitado" : $("#passwordlUserUserEdit").val(),
            "idUsuario" : $("#idUsuarioEdit").val()
        };
        console.log(parametrosEdit);
        return false;
})

Pero me devuelve siempre los datos del primer registro.

1 respuesta 1

3

Claro. Si examinas el código HTML verás que todos los modales tienen el atributo id con los mismos nombres. Por ejemplo, el campo de nombre tiene el atributo id con el valor nameUserUserEdit, y tiene ese valor en todos los modales que se renderizan en el HTML cuando se construye la vista. Si abres el código fuente de la vista y buscas id="nameUserUserEdit" encontrarás que hay un campo así para cada usuario. El atributo id de un elemento debe ser único en toda la página. Yo empezaría por redefinir el atributo id del campo de nombre en el modal así: id="nameUserUserEdit_{{ user->id }}". De esta forma el campo de nombre de cada usuario ya tiene un valor único, si miras en el código fuente de la vista. Y lo mismo con los demás campos del modal.

La segunda parte es que el ajax recoja, en cada caso, el valor del atributo que nos interesa. Para ello, yo sustituiría, en el modal, la línea:

<button type="submit" class="btn btnGuardar">Guardar</button>

por la siguiente:

<button type="submit" class="btn btnGuardar" data-user="{{ user->id }}">Guardar</button>

Y el ajax lo pondría de una forma similar a la siguiente:

$('.btnGuardar').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('user');
    var campoDeNombre = '#nameUserUserEdit_' + id;
    nombre = $(campoDeNombre).val();
    // crear las dos lineas anteriores para los demás campos.

    // A partir de aquí crear la llamada al controlador de grabación mediante ajax.
    // en el atributo data poner las variables que hemos recogido, 
    // incluyendo, por supuesto, el id del usuario a modificar, para que el controlador "sepa" sobre cual actuar.

});

También hay otra alternativa que a mí me parece más elegante. El modal lo sacas del bucle foreach, de forma que sólo se renderice un modal en la vista. En el botón de cada usuario destinado a abrir el modal, le pasas el identificador del usuario. De esta forma, puedes hacer un ajax para que el modal te muestre los valores por defecto de los campos de ese usuario, y te permita editarlos. Al pulsar el botón de guardar, se le pasa al ajax el valor de los campos, y el del identificador. Con esto, el HTML te queda más limpio, y te ahorras problemas.

1
  • Estupendo funciona perfectamente, comprobare el consejo que me das! gracias @Laura1995
    – Miguel
    el 4 oct. 2020 a las 18:28

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.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.