-1

Estou com um problema que não sei como posso resolver. Tenho um função Ajax q faz uma query baseado no item escolhido de um select. Após a query e recebido os dados da pesquisa no front-end, preencho os inputs com os dados, como por exemplo: Nome do Convênio, Rua, Bairro, etc... Porém existe os telefones, que pode haver mais de um dependendo do convênio. Criei uma função que preenche uma div com os campos de telefone, que está funcionando, mas não estou conseguindo inserir os valores do telefone dentro desses inputs. Tentei criar um array fora da função Ajax e fazer algo após isso, mas também não funcionou. Preciso de alguma ideia de como pode ser feito isso.

<form action="/dashboard/convenio/update" method="POST">
                    @csrf                    
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <div class="row">
                        <div class="input-fiel col s12">
                            <select name="cod_convenio" id="cod_convneio" class="select">
                                <option value="" disabled selected>Escolha o Convênio</option>
                                @foreach($results as $result)
                                    <option value="{{ $result->cod_convenio }}">{{ $result->nome_convenio }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="nome_edit" name="nome_convenio" type="text" class="validate">
                            <label for="nome_convenio">Nome do Convênio</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s4">
                            <input placeholder="Rua, Avenida..." id="rua_edit" name="rua_convenio" type="text" class="validate">
                            <label for="rua_edit">Rua</label>
                        </div>
                        <div class="input-field col s4">
                            <input id="bairro_edit" palceholder="Bairro" name="bairro_convenio" type="text" class="validate">
                            <label for="bairro_edit">Bairro</label>
                        </div>
                        <div class="input-field col s4">
                            <input id="cidade_edit" placeholder="Cidade" name="cidade_convenio" type="text" class="validate">
                            <label for="cidade">Cidade</label>
                        </div>
                    </div>
                    <div class="row">
                        <div id="reference_edit">
                            <div class="input-field col s2">
                                <i class="material-icons prefix">phone</i>
                                <input id="input-field col s3 icon_telephone" name="telefone[]" type="tel" class="validate">
                                <a id="add" class="btn-floating btn-small waves-effect waves-light green">
                                    <i class="material-icons">add</i>
                                </a>
                                <label for="icon_telephone">Telefone</label>
                            </div>
                        </div>                            
                        <div id="insert_edit"></div> 
                        <script src="{{ asset('js/searchConvenio.js') }}"></script>
                    </div> 
                    <div class="divider"></div>
                        <p>
                            <label>
                                <input type="checkbox"/>
                                <span>Ativado</span>
                            </label>
                        </p>
                    <button class="btn waves-effect waves-light" type="submit" name="action">Alterar
                        <i class="material-icons right">send</i>
                    </button>
                </form>
let telefones = new Array()

$(document).ready(function(){

    $('#cod_convneio').change(function(){

        // console.log('im working!')   

        let cod = $(this).val()

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: '/dashboard/convenio/find',
            type: 'POST',
            data: {cod},
            success: function(result){

                $('#insert_edit').empty()
                telefones = []

                $('#nome_edit').val(result['nome_convenio'])
                $('#rua_edit').val(result['rua_convenio'])
                $('#bairro_edit').val(result['bairro_convenio'])
                $('#cidade_edit').val(result['cidade_convenio'])

                for(var i=0;i<result['telefones'].length;i++){

                    const htmlString = '<div id="telefone'+i+'" class="input-field col s2"><input maxlength="14" id="input-field col s3 icon_telephone edit'+i+'" name="telefone[]" type="tel" class="validate"><a id="remove" class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">remove</i></a><label for="icon_telephone">Telefone</label></div>'

                    $(htmlString).appendTo('#insert_edit')

                    telefones[i] = result['telefones'][i]['numero_telefone']                   

                }
            }
        }) 
        
        $(document).change(function(){    

            console.log(telefones)
        
            for(var i=0;i<telefones.length;i++){ 
                //console.log(telefones[i]) 
                $('#input-field col s3 icon_telephone edit'+i).val(telefones[i]['numero_telefone'])
            }
        
        })
    })
})

3
  • Oi amigo, como está a estrutura Json do retorno da url "dashboard/convenio/find"? Commented 3/01/2021 às 18:22
  • Está dessa forma {nome_convenio: "Unimed", rua_convenio: "Av Barao do Rio Branco", bairro_convenio: "Centro", cidade_convenio: "Juiz de Fora", telefones: Array(2), …} activated: 1 bairro_convenio: "Centro" cidade_convenio: "Juiz de Fora" nome_convenio: "Unimed" rua_convenio: "Av Barao do Rio Branco" telefones: Array(2) 0: numero_telefone: "32 3232-1122" __proto__: Object 1: numero_telefone: "32 3525-9100" __proto__: Object
    – Augusto
    Commented 3/01/2021 às 18:54
  • Grato, mais uma pergunta, o que aparece se der console log dentro do for, em result['telefones'] Commented 4/01/2021 às 12:00

1 Resposta 1

0

Você pode construir dinamicamente no retorno da requisição os inputs via jquery exemplo:

........
         success: function(result){
                $('#insert_edit').empty()
                $('#nome_edit').val(result['nome_convenio'])
                $('#rua_edit').val(result['rua_convenio'])
                $('#bairro_edit').val(result['bairro_convenio'])
                $('#cidade_edit').val(result['cidade_convenio'])      
                
                if(result['telefones'] && result['telefones'].length) {
                  $.each(result['telefones'], function(i, telefone) {
                   $('#insert_edit').append(      
                     $('<div>', {'id':'telefone'+i, 'class':'input-field col s2'}).append(
                       $('<input>', {'id': 'input-field col s3 icon_telephone edit'+i, 'name': 'telefone[]', 'type': 'tel', 'class': 'validate', 'maxlength': '14', 'text': telefone}),
                       $('<a>', {'id':'remove', 'class':'btn-floating btn-small waves-effect waves-light red'}).append(
                         $('<i>', {'class': 'material-icons', 'text': 'Remove'})
                       )
                   ),
                   $('<label>', {'for': 'icon_telephone', 'text': 'Telefone'})
                  )    
                 });
                }
         }

Você estava criando uma variável global para acessar posteriormente para exibir em tela, isso não é uma boa pratica.

Outra questão os ids dos seletores estão muito grandes, pode ser mais preciso, se for utilizar algo para estilo sugiro a utilização somente de classes, mantendo os ids somente para eventos e atribuições.

1
  • Muito obrigado!! Eu sabia que tinha algo que eu estava fazendo de errado, só não estava conseguindo enxergar.
    – Augusto
    Commented 6/01/2021 às 13:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .