RESULTADO DE UM SELECT EM UM FORM DUPLICA
Bom dia,
Gostaria de um auxílio na seguinte demanda:
Tenho um problema ao carregar uma lista em um formulário pois a pesquisa realizada por um botão, não está limpando ou dando um refresh na página para colocar os outros dados, assim, ele está acumulando as informações como na imagem abaixo:
[img]https://image.prntscr.com/image/4HvJ6XRBR8m3bbfsHbUFtQ.png[/img]
Função>
Gostaria de um auxílio na seguinte demanda:
Tenho um problema ao carregar uma lista em um formulário pois a pesquisa realizada por um botão, não está limpando ou dando um refresh na página para colocar os outros dados, assim, ele está acumulando as informações como na imagem abaixo:
[img]https://image.prntscr.com/image/4HvJ6XRBR8m3bbfsHbUFtQ.png[/img]
<button type="button" class="btn btn-success " onclick="selecaoAreaCargo()">Pesquisar</button>
</form>
<div class="col-md-8 col-md-offset-2 tabelaRespondidos" id="tabelaRespondidosT">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#respondidos" data-toggle="tab">Formulários Respondidos</a></li>
<li role="presentation"><a href="#naoRespondidos" data-toggle="tab">Formulários não Respondidos</a></li>
</ul>
<br>
<div class="tab-content">
<div class="tab-pane active" id="respondidos">
<table class="table tabela1">
<thead>
<tr>
<th>Nome do funcionário</th>
<th>Supervisor</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script id="tmplLinha" type="text/template">
<tr>
<td>{}</td>
<td>{}</td>
<td>
<a href="levantamento-funcional-formulario-editar.php" class="imgLupa"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
</td>
</tr>
</script>
</div>
<div class="tab-pane" id="naoRespondidos">
<table class="table tabela2 text-center">
<thead>
<tr>
<th class="text-center">Nome do funcionário</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script id="tmplLinha2" type="text/template">
<tr>
<td>{}</td>
</tr>
</script>
</div>
<div class="col-sm-1 col-md-offset-5" id="GeraExcel">
<button type="button submit" class="btn btn-link">
<img class="imgExport" src="img/excel.ico" alt="Ícone de exportação para o excel">
</button>
</div>
</div>
</div>
Função>
function selecaoAreaCargo() {
var area = $("#areaEscolhida").val();
var cargo = $("#cargoEscolhido").val();
$.ajax({
type: 'POST',
url: 'includes/selecaoAreaCargoParaResultado.php',
data: {
area: area,
cargo: cargo
},
dataType: "json",
success: function (data) {
if(data === null){
alert("Não existem dados para serem exibidos!");
}
for (var indice = 0; indice < data.length; indice++) {
if (data[indice].respFormulario == 1) {
var tabela = document.querySelector(".tabela1 tbody");
// inicializando o template.
var tmplSource = document.getElementById("tmplLinha").innerHTML;
var tmplHandle = Handlebars.compile(tmplSource);
var pessoa = {};
pessoa.nomeFunc = data[indice].nomeFuncionario;
pessoa.supervisor = data[indice].tituloCargoSuperiorImediato;
// preparando fragmento HTML.
var linha = {};
linha.template = document.createElement("template");
linha.template.innerHTML = tmplHandle(pessoa);
linha.content = document.importNode(linha.template.content, true);
// inserindo linha na tabela.
tabela.appendChild(linha.content);
} else {
var tabela = document.querySelector(".tabela2 tbody");
$("#acaoLinha").hide();
// inicializando o template.
var tmplSource = document.getElementById("tmplLinha2").innerHTML;
var tmplHandle = Handlebars.compile(tmplSource);
var pessoa = {};
pessoa.nomeFunc = data[indice].nomeFuncionario;
pessoa.supervisor = data[indice].tituloCargoSuperiorImediato;
// preparando fragmento HTML.
var linha = {};
linha.template = document.createElement("template");
linha.template.innerHTML = tmplHandle(pessoa);
linha.content = document.importNode(linha.template.content, true);
// inserindo linha na tabela.
tabela.appendChild(linha.content);
}
}
},
error: function (data) {
console.log(data);
alert('Houve um erro, tente novamente mais tarde!');
}
});
}
Salute Especializadas
Curtidas 0
Melhor post
Thiago Moreno
09/08/2017
eu estou so começando js. mas na funcao success voce nao teria que ter uma opcao para limpar a tabela antes de comecar a colocar as linhas? dai resolveria o problema. tipo um .val('');
GOSTEI 2
Mais Respostas
Wilson Neto
09/08/2017
eu estou so começando js. mas na funcao success voce nao teria que ter uma opcao para limpar a tabela antes de comecar a colocar as linhas? dai resolveria o problema. tipo um .val('');
Exatamente, se está "apendando" novas linhas a cada chamada dessa função, o ideal seria "limpar" as linhas "antigas " no "success" ou no inicio da função:
function selecaoAreaCargo() {
//Aqui, algo como :
$(".tabela1 tbody > * ").remove();
$(".tabela2 tbody > * ").remove();
var area = $("#areaEscolhida").val();
Nesse trecho abaixo é removido "o filho direto" do seletor body ( a partir da tabela 1 e tabela 2 [Acredito que possa ser definido dessa forma, front não é muito meu forte...rs]).
$(".tabela1 tbody > * ").remove();
$(".tabela2 tbody > * ").remove();
Enfim, isso pode ajudar a resolver. :)
GOSTEI 1
Salute Especializadas
09/08/2017
Funcionou como uma luva meu amigo! Muto obrigado! Já estava ha algumas semanas buscando uma solução rs. ! Muito brigado meu caro!
GOSTEI 0
Wilson Neto
09/08/2017
Funcionou como uma luva meu amigo! Muto obrigado! Já estava ha algumas semanas buscando uma solução rs. ! Muito brigado meu caro!
Show! :D
GOSTEI 0