RESULTADO DE UM SELECT EM UM FORM DUPLICA

09/08/2017

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]


<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

Curtir t�pico + 0

Responder

Post mais votado

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('');

Thiago Moreno

Responder

Gostei + 2

Mais Posts

09/08/2017

Wilson Neto

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. :)

Responder

Gostei + 1

11/08/2017

Salute Especializadas

Funcionou como uma luva meu amigo! Muto obrigado! J� estava ha algumas semanas buscando uma solu��o rs. ! Muito brigado meu caro!

Responder

Gostei + 0

11/08/2017

Wilson Neto

Funcionou como uma luva meu amigo! Muto obrigado! J� estava ha algumas semanas buscando uma solu��o rs. ! Muito brigado meu caro!

Show! :D

Responder

Gostei + 0