0

Me encuentro elaborando una aplicación en Laravel en la cual tengo un modal con un pequeño formulario de búsqueda y una tabla, la cual se debería llenar con los datos que obtenga desde el controlador, en el controlador tengo una función que devuelve los resultados en formato JSON, pero no encuentro la manera de como cargarlos dentro de la tabla. He leído que es necesario utilizar javascript y ajax pero no he encontrado la manera de hacerlo.

Vista previa del modal.

Vista previa del modal

Y este es su codigo.

<div class="modal fade" id="MyModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Buscar Tutor</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 class="card-header-form">
          <div class="input-group">
            <input type="text" name="TelCelular" class="form-control" placeholder="N° Celular">
            <div class="input-group-btn">
              <button class="btn btn-primary btn-icon"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </form>
        <br />
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center">Telefono Celular</th>
                <th class="text-center">Nombre Completo</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

Esta es la funcion php para realizar la busqueda.

public function buscarTutorPorTelMovil($TelCelular)    {

  return Tutor::where('TelCelular', 'LIKE', "%$TelCelular%")->json();        

}

Si no es posible elaborar la tarea de este modo me gustaría que dejaran alguna forma alternativa de hacerlo.

1 respuesta 1

0

Te recomiendo usar jQuery, una librería JavaScript muy útil.

La incluyes en tu proyecto, realizas una llamada ajax al hacer clic en el botón de buscar. Y al obtener los datos los cargas en la tabla de tu modal.

Usa el siguiente ejemplo para darte una idea.

<html>
<head>
    ...
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).on('click', '.card-header-form button', e => {
            $.ajax({
                url: 'http://example.com/controller/buscarTutorPorTelMovil/' + $('input[name=TelCelular]').val(),
                method: 'GET',
                success: data => {
                    var table = $('#MyModal').find('.table tbody');
                    for (var i in data) {
                        table.append('<tr><td>' + data[i].telefonoCelular + '</td><td>' + data[i].nombreCompleto + '</td></tr>');
                    }
                }
            });
        });
    </script>
    ...
</head>
<body>
    ...
</body>
</html>

Te recomiendo que leas un poco sobre esta librería y los métodos que utilicé:

0

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.