GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Ajax para fazer um select no banco não funciona em nova linha

mysql
php
javascript
html
ajax
Tags: #<Tag:0x00007fbf2276cff8> #<Tag:0x00007fbf2276c5d0> #<Tag:0x00007fbf2276c0f8> #<Tag:0x00007fbf226eee78> #<Tag:0x00007fbf226eeb30>

#1

Olá pessoal,

Estou com dificuldade na seguinte situação, ao gerar uma nova linha da tabela o meu códio Ajax para fazer um select no banco não funciona. Segue a imagem abaixo para esclarecer quaisquer dúvidas:
php

Página:

   <div class="form-group">
                                    <label class="control-label col-lg-4">Víncular Bolsistas:</label>
                                    <div class="control-label col-lg-9 col-lg-offset-1">
                                        <div class="form-horizontal">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped table-highlight">
                                                    <thead>
                                                    <div class="row">
                                                        <th class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Nome</th>
                                                        <th class="col-xs-4 col-sm-4 col-md-4 col-lg-4  ">Vinculo</th>
                                                        <th class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Horas</th>
                                                        <th class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
                                                    </div>
                                                    </thead>
                                                    <tbody id="tabelaCorpo">
                                                        <tr id="linhaParaClonar">
                                                            <td>
                                                                <select class="bolsista form-control" name="bolsista[0]"></select>
                                                            </td>
                                                            <td>
                                                                <label class="radio-inline">
                                                                    <input type="radio" name="vinculo[0]" value="1">Bolsista</label>
                                                                <label class="radio-inline">
                                                                    <input type="radio" name="vinculo[0] value="2">Voluntário</label>
                                                            </td>
                                                            <td>
                                                                <div class=" col-lg-12">
                                                                    <select class="form-control" name="horas[0]">
                                                                        <option value="02:00:00">2</option> 
                                                                        <option value="06:00:00">4</option>
                                                                        <option value="08:00:00">8</option>
                                                                        <option value="16:00:00">16</option>
                                                                    </select>
                                                                </div>
                                                                <!-- <input type="number" name="horas[0]" class="form-control" /> -->
                                                            </td>
                                                            <td>
                                                                <!-- <button onclick="removerLinha()" class="glyphicon glyphicon-remove"></button> -->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div class="col-sm-offset-8">
                                                    <input type="button" onclick="clonarLinha()" value="Adicionar" id="adcLinha" class="btn btn-success">
                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                                </div>

                        </div>
                    </div>
                    <!--     </div> -->
                    <div class="row" id="box-cinza-inferior">

                        <div class="col-lg-offset-1 col-sm-2">
                            <a href="menu-extensao.php" class="btn btn-success" onClick="formVazio();">Voltar</a>
                        </div>
                        <div class="col-lg-offset-10" >
                            <button type="submit" class="btn btn-success">Concluir</button>
                        </div>
                    </div>
                    </form>
                </div>

Código JavaScript para adicionar llinha:

    //Adicionar nova linha na tabela Assiduidade
var max = 10;   //max de 10 campos
var z = 1;
function adicionarLinha() {
    if (z <= max) {
        $('#tabelaCorpo').append('<tr id="linha">\
                                    <td><input type="date" name="data[]" class="form-control" /></td>\
                                    <td><input type="time" name="horario[]" class="form-control" /></td>\
                                    <td><input type="number" name="horas-realizadas[]" class="form-control" /></td>\
                                    <td><input type="text" name="obs[]" class="form-control " /></td>\\n\
                                    <td><input type="button" onclick="removerLinha(this)" class="btnX btn btn-danger" value="X"></td>\
                                </tr>');
        z++;
    }
}

Ajax:

// Campo autocomplete que busca no banco o nome do aluno
$('.bolsista').select2({
   placeholder: 'Selecione um aluno',
   ajax: {
       url: '../php/ajaxSelectAluno.php',
       dataType: 'json',
       delay: 250,
       processResults: function (data) {
           return {
               results: data
           };
       },
       cache: true
   }
});

AjaxSelectAluno:

<?php

include ("../classe/conexao.php");

$sql = "SELECT p.id as id, p.nome
            FROM pessoa p
            JOIN aluno a ON a.aluno_id_pessoa = p.id
            WHERE nome LIKE '%".$_GET['q']."%'
            LIMIT 10"; 
            
           # WHERE nome LIKE '%".$_GET['q']."%'
$result = $mysqli->query($sql);

$json = [];

while($row = $result->fetch_assoc()){
     $json[] = ['id'=>$row['id'], 'text'=>$row['nome']];
}

echo json_encode($json);

#2

pega e chama o ajax do combo só uma vez guarde ele em uma variável global ao codigo chamado por ex optionPessoas e ai ao montar as linhas tu só vai usando ele ao invés de ficar chamando de novo o ajax.