Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Povoar inputs de forma oculta ao utilizar o select2 no Laravel

Boa tarde meus caros Dev's. Em um projeto do dia-a-dia para praticar meus conhecimentos me deparei com a necessidade de buscar os dados de uma tabela do banco de dados através de uma 'combo', e para isso utilizei o select2, como podemos ver a seguir:

public function dataAjaxMotoristas(Request $request)
    {
        $data = [];
        if ($request->has('q')){
            $search = $request->q;
            $data = C001_Motorista::select("id", "C001_Chapa", "C001_Nome", "C001_Sobrenome", "C001_Telefone", "C001_Foto")
                ->where('C001_Nome', 'LIKE', "%$search%")
                ->get();
        }
        return response()->json($data);
    }

Definidas as rotas:

Route::middleware(['auth:sanctum', 'verified'])->get('/nova-requisicao/edit/{id}', [ControleVeiculosController::class, 'create'])->name('form_abrir_requisicao');
Route::middleware(['auth:sanctum', 'verified'])->get('/select2-autocomplete-ajax-motoristas', [ControleVeiculosController::class, 'dataAjaxMotoristas']);

a view:

@extends('adminlte::page')

@section('title', 'Controle')

@section('content_header')
    <h1>Requisição Nº {{ $requisicao->id }}</h1>
@stop

@section('content')

    <form action="/abrir/requisicao" method="post">
        @csrf

        <!- Primeira linha ->
            <div class="row">
                <div class="col col-2">
                    <label for="dataSaida">Data/Hora Inicial</label>
                    <input type="text" class="form-control" name="dataSaida" id="dataSaida" disabled="disabled" value="{{ $requisicao->T001_DataSaida }}">
                </div>

                <div class="col col-5">
                    <label for="nomeMotorista">Motorista</label>
                    <select type="text" class="motorista form-control" name="motorista" required></select>
                </div>
            </div>

<button type="submit" class="btn btn-primary mt-3">
            Abrir Requisição
        </button>

    </form>

E por fim, o JS responsável pela mágica:

    <script>
            $('.motorista').select2({
                placeholder: 'Selecione o Motorista',
                ajax: {
                    url: '/select2-autocomplete-ajax-motoristas',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.C001_Chapa +' | '+ item.C001_Nome +' '+ item.C001_Sobrenome,
                                    id: item.C001_Chapa,
                                }
                            })
                        };
                    },
                    cache: true
               },
                minimumInputLength: 1
            });
        </script>

Tudo funciona perfeitamente, a busca é rápida e eficaz. E me retorna todos os dados que especifiquei no Controller. No entanto, eu preciso salvar no formulário os demais dados dessa consulta.

-> Nome -> Sobrenome -> Foto -> Telefone

Aí que o bicho pega, pois de todas as formas que eu tentei não consegui. Pois, minha necessidade faz com que seja necessário que eu armazene esses dados no formulário, pois quando eu clicar no botão, tenho que salvar esses dados da view que são apresentados para o usuário, conforme visto acima, e essas informações adicionais precisam ir de forma oculta para o banco. Tentei usar o seguinte input:

<!- Linha Oculta ->
        <div class="row">
            <div class="col col-2">
                <input type="hidden" name="fotoMotorista" id="fotoMotorista">
            </div>

            <div class="col col-2">
                <input type="hidden" name="nomeMotorista" id="nomeMotorista">
            </div>

    <!- Fim Linha Oculta ->

Só que não consegui atribuir os valores buscados no select2 para esses inputs. Tentei utilizar o change, porém também não obtive nenhum retorno para meu id do imput.

<script>
        $('.motorista').select2({
            ...
        }).change(function (){
            var id = $(this).val();

            $.ajax({
                ajax: {
                    url: '/select2-autocomplete-ajax-motoristas',
                    dataType: 'json',
                    delay: 250,
                    success:function (data){
                        $('#fotoMotorista').html(data);
                        return{
                            data: id.C001_Chapa,
                        }

                    }
                }
            })
        });
    </script>

Qualquer ajuda, ideia, palpite, opinião é bem vinda nesse momento!

1 resposta
solução!

Vou encerrar essa discussão, devido a ter abordado o problema por um outro ponto de vista e acabei chegando a um resultado semelhante. Carreguei os dados normalmente utilizando o JS. E depois criei uma consulta utilizando relacionamento entre todas as tabelas que necessitava, através do valor obtido. Com isso tive acesso a todas as informações da model.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software