Olá!
Tenho um código para autocomplete aqui que está me dando um pouco de dor de cabeça.
Meu código consiste em um foreach que gera uma linha a cada registro encontrado, a cada linha gera um botão que chama um modal, coloquei na linha que chama o modal uma variável que vai se iterando e concatenei essa variável com a id do modal, assim pude ligar o modal a linha correta.
<button type="button" data-toggle="modal" data-target="#modalAdicao<?php echo htmlspecialchars($idModal); ?>" class="botao btn-editar">Editar</button>
Logo quando a variável se refere a linha das 08:00, o modal abre com possibilidade de edição daquela linha, até aí tudo ok.
Meu problema é que o Javascript do autocomplete busca por uma id de input chamada #busca, porém só funciona na primeira ocorrência do modal, isso porque na segunda o #busca já foi utilizado, preciso então que a id desse input mude acompanhando o modal, logo pensei no seguinte:
<input type="text" id="busca<?php echo htmlspecialchars($idModal); ?>" placeholder="Identidade" name="rgPaciente" class="mx-sm-69 form-control" required>
A lógica é simples, já fiz isso em código pequeno, mas não soube aplicar no autocomplete pois sou bem leigo e não compreendo bem o código por completo ainda.
Amostra do código:
$(function() {
// Atribui evento e função para limpeza dos campos
$('#busca').on('input', limpaCampos);
// Dispara o Autocomplete a partir do segundo caracter
$( "#busca" ).autocomplete({
minLength: 2,
source: function( request, response ) {
$.ajax({
url: "include/procura_paciente.php",
dataType: "json",
data: {
acao: 'autocomplete',
parametro: $('#busca').val()
},
success: function(data) {
response(data);
}
});
},
focus: function( event, ui ) {
$("#busca").val( ui.item.rg );
carregarDados();
return false;
},
select: function( event, ui ) {
$("#busca").val( ui.item.rg );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<br><b>Paciente: </b>" + item.nome + " - <b> RG: </b>" + item.rg + "</a><br>" )
.appendTo( ul );
};
// Função para carregar os dados da consulta nos respectivos campos
function carregarDados(){
var busca = $('#busca').val();
if(busca != "" && busca.length >= 2){
$.ajax({
url: "include/procura_paciente.php",
dataType: "json",
data: {
acao: 'consulta',
parametro: $('#busca').val()
},
success: function( data ) {
$('#nomePaciente').val(data[0].nome);
$('#nomePaciente2').val(data[0].nome);
$('#rgPaciente').val(data[0].rg);
$('#nascimentoPaciente').val(data[0].nascimento);
$('#cpfPaciente').val(data[0].cpf);
}
});
}
}
// Função para limpar os campos caso a busca esteja vazia
function limpaCampos(){
var busca = $('#busca').val();
if(busca == ""){
$('#nomePaciente').val('');
$('#nomePaciente2').val('');
$('#rgPaciente').val('')
$('#nascimentoPaciente').val('')
$('#cpfPaciente').val('')
}
}
});
Primeira linha que chama o modal:
<td>08:00 ID DA LINHA: 0</td>
<td><button type="button" data-toggle="modal" data-target="#modalAdicao0" class="botao btn-editar">Editar</button></td>
Abaixo algumas amostras do código já com PHP renderizado: Primeiro modal:
<!-- Início do Modal de Adição de Agendamento-->
<div id="modalAdicao0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="exampleModalLabel" class="modal-title">Novo Agendamento para João Santos</h4>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Preencha os campos abaixo 08:00 ID 0</p>
<form id="novoAgendamento" method="POST" action="include/novo_agendamento.php">
<div class="form-inline">
<div class="form-group">
<label for="busca" class="sr-only">Identidade</label>
<input type="text" id="busca" placeholder="Identidade" name="rgPaciente" class="mx-sm-69 form-control procura" required>
</div>
<div class="form-group">
<label for="nascimentoPaciente" class="sr-only">Nascimento</label>
<input type="text" id="nascimentoPaciente" placeholder="Nascimento" name="nascimentoPaciente" class="mx-sm-69 form-control nascimentoPaciente" required>
</div>
</div>
<div class="form-group">
<label for="nomePaciente"></label>
<input type="hidden" id="nomePaciente" name="nomePaciente" class="form-control nomePaciente">
<input type="hidden" id="cpfPaciente" name="cpfPaciente" class="form-control cpfPaciente">
<input type="hidden" id="horaPaciente" name="horaPaciente" value="08:00" class="form-control horaPaciente">
<input type="hidden" id="dataPaciente" name="dataPaciente" value="2018-05-19" class="form-control dataPaciente">
<input type="hidden" id="medicoPaciente" name="medicoPaciente" value="João Santos" class="form-control medicoPaciente">
<input type="text" id="nomePaciente2" placeholder="Nome do Paciente" class="form-control nomePaciente2" disabled="">
<label for="observacaoPaciente"></label>
<input type="text" name="observacaoPaciente" placeholder="Observação" class="form-control observacaoPaciente" required>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Fechar</button>
<button type="submit" class="btn btn-primary">Agendar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fim do Modal de Adição de Agendamento-->
Segunda linha que chama o modal:
<td>09:00 ID DA LINHA: 1</td>
<td><button type="button" data-toggle="modal" data-target="#modalAdicao1" class="botao btn-editar">Editar</button></td>
Segundo modal:
<!-- Início do Modal de Adição de Agendamento-->
<div id="modalAdicao1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="exampleModalLabel" class="modal-title">Novo Agendamento para João Santos</h4>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Preencha os campos abaixo 09:00 ID 1</p>
<form id="novoAgendamento" method="POST" action="include/novo_agendamento.php">
<div class="form-inline">
<div class="form-group">
<label for="busca" class="sr-only">Identidade</label>
<input type="text" id="busca" placeholder="Identidade" name="rgPaciente" class="mx-sm-69 form-control procura" required>
</div>
<div class="form-group">
<label for="nascimentoPaciente" class="sr-only">Nascimento</label>
<input type="text" id="nascimentoPaciente" placeholder="Nascimento" name="nascimentoPaciente" class="mx-sm-69 form-control nascimentoPaciente" required>
</div>
</div>
<div class="form-group">
<label for="nomePaciente"></label>
<input type="hidden" id="nomePaciente" name="nomePaciente" class="form-control nomePaciente">
<input type="hidden" id="cpfPaciente" name="cpfPaciente" class="form-control cpfPaciente">
<input type="hidden" id="horaPaciente" name="horaPaciente" value="09:00" class="form-control horaPaciente">
<input type="hidden" id="dataPaciente" name="dataPaciente" value="2018-05-19" class="form-control dataPaciente">
<input type="hidden" id="medicoPaciente" name="medicoPaciente" value="João Santos" class="form-control medicoPaciente">
<input type="text" id="nomePaciente2" placeholder="Nome do Paciente" class="form-control nomePaciente2" disabled="">
<label for="observacaoPaciente"></label>
<input type="text" name="observacaoPaciente" placeholder="Observação" class="form-control observacaoPaciente" required>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Fechar</button>
<button type="submit" class="btn btn-primary">Agendar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fim do Modal de Adição de Agendamento-->
id
s e os valores já retornados do PHP de forma clara, podendo ver onde que está o problema e os conflitos. – Sam 19/05/18 às 3:21