Entrar Ainda não tem acesso?
10
respostas

Reutilização do filtro para um outro código

Referente ao curso JavaScript: programando na linguagem da web

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Bom dia pessoal.

Estou precisando aplicar no meu projeto uma busca muito parecida com esta busca de pacientes, sendo que não está funcionando. A diferença é que minha tabela é dinâmica, montada do lado servidor.

Veja um trecho da montagem da tabela:

protected string montarBody(Indicador indicador) { StringBuilder htmlDivsConteudoRelatorio = new StringBuilder();

        htmlDivsConteudoRelatorio.Append("<tr class='indicador'>");
        htmlDivsConteudoRelatorio.Append("<td class='larguraColuna info-sigla'>" + indicador.sigla + "</td>");
        htmlDivsConteudoRelatorio.Append("<td class='info-descricao'>" + indicador.nome + "</td>");
        htmlDivsConteudoRelatorio.Append("</tr>");

        return htmlDivsConteudoRelatorio.ToString();

    }

Na classe aspx fiz exatamente conforme o exemplo aprendido, veja:

Busca:

E no javaScript:

    var campoFiltro = document.querySelector("#filtrar-tabela");

    campoFiltro.addEventListener("input", function () {
        var siglas = document.querySelectorAll(".indicador");

        if (this.value.length > 0) {
            for (var i = 0; i < siglas.length; i++) {
                var sigla = siglas[i];
                var tdSigla = sigla.querySelector(".info-sigla");
                var nome = tdSigla.textContent;
                var expressao = new RegExp(this.value, "i");

                if (!expressao.test(nome)) {
                    sigla.classList.add("invisivel");
                } else {
                    sigla.classList.remove("invisivel");
                }
            }
        } else {
            for (var i = 0; i < siglas.length; i++) {
                var sigla = siglas[i];
                sigla.classList.remove("invisivel");
            }
        }
    });

Ao realizar os testes o filtro não funciona. Estou fazendo algo de errado?

Obrigada. Flávia

10 respostas
por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Faltou a parte que inclui a busca:

 <label for="filtrar-tabela">Busca:</label>
                <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome da sigla">
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde, Flávia! Como vai?

Vc observou se acontece algum erro no console do navegador ou no servidor? Se sim, poderia colar aqui o erro que ocorre?

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Boa tarde Gabriel.

O erro ocorre nesta linha depurando pelo browser:

    campoFiltro.addEventListener("input", function () {

Veja o erro:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Obrigada. Flávia

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Flávia, em que momento vc está declarando no seu HTML a importação do arquivo JS? Vc poderia mandar aqui o conteúdo do arquivo HTML que está sendo carregado?

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Gabriel.

Meu projeto é feito em aspx, não tenho um arquivo HTML. O javascript está sendo feito na mesma página aspx, não está separado. O problema pode está ocorrendo pois a montagem da tabela é dinâmica pelo servidor, e estou tentado chamar uma classe declarada do lado servidor no meu aspx. Realmente sou iniciante nesta área e não sei se isto seria um problema.

Obrigada. Flávia

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Ainda não consegui solucionar, se alguém puder me ajudar ficarei muito grata.

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde, Flávia! Como vai?

O problema pode está ocorrendo pois a montagem da tabela é dinâmica pelo servidor, e estou tentado chamar uma classe declarada do lado servidor no meu aspx.

Na realidade, o problema está ocorrendo no campo de filtro! É ele que não está sendo encontrado como vc disse na outra mensagem.

O erro ocorre nesta linha depurando pelo browser:

campoFiltro.addEventListener("input", function () {

Veja o erro: Uncaught TypeError: Cannot read property 'addEventListener' of null

Ou seja, por algum motivo o seu código JavaScript está sendo executado e não está encontrando o campo de busca na página. Por isso eu pedi pelo código HTML, pra saber em qual momento o JavaScript é carregado.

Sem ver o seu código aspx fica meio complicado de entender o processo de geração da sua página então eu fico no escuro. Mas veja se vc consegue colocar a declaração do JavaScript apenas no final da tag <body> e se isso resolve o seu problema.

Qualquer coisa é só falar!

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Meu código aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript">

          var campoFiltro = document.querySelector("#filtrar-tabela");

            campoFiltro.addEventListener("input", function () {
                var siglas = document.querySelectorAll(".indicador");

                if (this.value.length > 0) {
                    for (var i = 0; i < siglas.length; i++) {
                        var sigla = siglas[i];
                        var tdSigla = sigla.querySelector(".info-sigla");
                        var nome = tdSigla.textContent;
                        var expressao = new RegExp(this.value, "i");

                        if (!expressao.test(nome)) {
                            sigla.classList.add("invisivel");
                        } else {
                            sigla.classList.remove("invisivel");
                        }
                    }
                } else {
                    for (var i = 0; i < siglas.length; i++) {
                        var sigla = siglas[i];
                        sigla.classList.remove("invisivel");
                    }
                }
            });





    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="divFiltroRelatorioMaterialidade" onclick="limparConteudo();">
                <asp:Label ID="lblEmpresas" runat="server" ClientIDMode="Static">Empresa:</asp:Label>
                <asp:DropDownList ID="ddlFiltroEmpresa" runat="server" ClientIDMode="Static" OnSelectedIndexChanged="ddlFiltroEmpresa_SelectedIndexChanged" AutoPostBack="true">
                </asp:DropDownList>
               <%-- <label for="filtrar-tabela">Busca:</label>--%>
                <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome da sigla">
              <%--  Filtrar lista:<br/>
                <input type="text" id="txtBusca" placeholder="Digite aqui um valor para filtrar..."/>--%>


            </div>

            <div id="divBotoesRelatorioMaterialidade" runat="server" clientidmode="Static">
                <a href="#" title="Imprimir Relatório" onclick="imprimirRelatorio(event);">
                    <img class="no-printer" id="imgImprimir" src="../Imagens/imprimir.png" />
                </a>

            </div>
            <div id="divProgressoRelatorioMaterialidade">
                <asp:Label ID="lblRelatorioMaterialidade" runat="server" ClientIDMode="Static"></asp:Label>
            </div>


        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Estou disponibilizando meu código asp completo para que entenda melhor e possa me dar uma forcinha.

Obrigada. Flávia

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Oi, Flávia! Boa tarde!

Eu não sou exímio entendedor de aspx, mas me parece que ao fazer:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript">

          var campoFiltro = document.querySelector("#filtrar-tabela");

            campoFiltro.addEventListener("input", function () {
                var siglas = document.querySelectorAll(".indicador");

                if (this.value.length > 0) {
                    for (var i = 0; i < siglas.length; i++) {
                        var sigla = siglas[i];
                        var tdSigla = sigla.querySelector(".info-sigla");
                        var nome = tdSigla.textContent;
                        var expressao = new RegExp(this.value, "i");

                        if (!expressao.test(nome)) {
                            sigla.classList.add("invisivel");
                        } else {
                            sigla.classList.remove("invisivel");
                        }
                    }
                } else {
                    for (var i = 0; i < siglas.length; i++) {
                        var sigla = siglas[i];
                        sigla.classList.remove("invisivel");
                    }
                }
            });





    </script>

</asp:Content>

Vc indica ao aspx que o código JavaScript deve ser executado pelo próprio servidor por utilizar a propriedade runat="server". Talvez por isso ao executar o código JS no lado do servidor esteja ocorrendo esse problema.

Sendo assim, ao que tudo indica esse problema que vc está tendo é mto mais ligado ao aspx em si do que ligado ao JavaScript.

Uma sugestão: Não haveria algo do tipo runat="client" para postergar a execução do código JavaScript apenas para o navegador? Além disso, eu não sei se havendo essa possibilidade se ela causaria algum efeito colateral na lógica da sua aplicação. Então isso tbm seria algo que vc precisaria avaliar.

por Flávia Lares dos Santos
| 528.2k xp | 149 posts
Analista de Projetos

Oi Gabriel.

Tem um código com jquery que facilita fazer esta busca, veja:

$(document).ready(function () { $("#txtBusca").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#tabela tr").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });

Estou querendo testar, sendo que não entra na função ready. Não sei o que está ocorrendo.

Obrigada. Flávia