6
respostas

Exibir tabela ao clicar botão dinâmico

Boa dia pessoal.

Não sei se o código que fiz está correto principalmente no Json, pois sou iniciante na área e tudo que fiz aqui agradeço aos professores do alura. Se alguém puder me ajudar ficarei muito grata.

Vou inserir o código que já fiz e se alguém souber o que está ocorrendo e puder me ajudar: Preciso incluir um botão ao lado de textbox com resultado da fórmula para que ao clicar neste seja exibido o conteúdo de valores da fórmula em uma tabela , por exemplo: Tenho a fómula : TESTE1 + TESTE2 / 100, desta fórmula tenho que pegar apenas TESTE1 e TESTE2 e pegar o valor, exibindo ao clicar no botão a tabela com os valores da formula, assim:

Codigo Empresa 1 Codigo Variavel 123 // Seria o TESTE1 Valor 100 // Valor de TESTE1

Codigo Empresa 1 Codigo Variavel 234 // Seria o TESTE2 Valor 20// Valor de TESTE2

Fiz assim no cs:

[WebMethod]
public static string montarTabelaConteudoFormula(ValorDaVariavelNumerico valorDaVariavelNumerico, StringBuilder htmlDivsConteudoDetalhado)
{

    string formulaHtml = "";
    formulaHtml = valorDaVariavelNumerico.Variavel.formula.Replace('@', '<').Replace('#', '>');// Tenho que pegar de uma fórmula

    string[] separators = { "+", "-", "/", "*","(",")", " " }; // Separar o que não quero
    string value = classesComun.converterFormulaHtmlToString(formulaHtml);
    string[] variaveis = value.Split(separators, StringSplitOptions.RemoveEmptyEntries); // Do valor da fórmula pegar apenas as variáveis. Para cada variavel , pegar as variaveis da fórmula e montar objeto em formato tabela
    foreach (var variavel in variaveis)
    {


        htmlDivsConteudoDetalhado.Append("<div class=\"div_conteudo_detalhes_relatorio\" id=\"" + valorDaVariavelNumerico.Variavel.codVariavel + "\">");
        htmlDivsConteudoDetalhado.Append("<table id='tabelaDetalhes' class='tabelaConteudoDetalhado'>" +
                "<tr>" +
                    "<td class=\"td_identificacao_linha\"> Código Empresa: </td>" +
                    "<td>" + valorDaVariavelNumerico.Empresa.codEmpresa + "</td>" +
                "</tr>" +
                 "<tr>" +
                    "<td class=\"td_identificacao_linha\"> Código Variável: </td>" +
                    "<td>" + valorDaVariavelNumerico.codVariavel + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td class=\"td_identificacao_linha\"> Valor: </td>" +
                    "<td>" + valorDaVariavelNumerico.valor + "</td>" +
                "</tr>" +

            "</table>"
            );
    }
        htmlDivsConteudoDetalhado.Append("</div>");
       return htmlDivsConteudoDetalhado.ToString();


}

Isto deve ser exibido para cada variável que compõem a fórmula. Até aqui tudo bem, fiz esta função do lado servidor que ainda não consegui testa-la por causa do erro e quero passá-la para o lado cliente com o Json, assim:

Este método criado chamo do lado cliente:

function selecionaBotaoConteudoFormula(valorDaVariavelNumerico, htmlDivsConteudoDetalhado) {

        $ajax({
            type: 'POST',
            url: document.URL + '/montarTabelaConteudoFormula',
            contentType: "application/json; charset=utf-8",
            data: "{ 'valorDaVariavelNumerico':' " + valorDaVariavelNumerico + "' , 'htmlDivsConteudoDetalhado':' " + htmlDivsConteudoDetalhado + "'}",                  
            dataType: 'json',
            success: function (results) {
                results.d;
            },
            error: function (results) { escreveMensagem(results.d); }


}

O problema ocorre pois como o botão é dinamico e só aparece para as variáveis que possuem fórmula, faço da seguinte forma para chamar no onclick do lado servidor (cs) a função javascript do lado cliente:

                    htmlDivsConteudoVariavel.Append("<div class = definicaoFormula><i class='botao-conteudo-formula'  onClick ='selecionaBotaoConteudoFormula(valorDaVariavelNumerico, htmlDivsDetalhesVariavel);'>...</i></div>");

No onclick chamo a função javaScript e está é responsável por recuperar o objeto e uma string Json do lado cliente. Sendo que ao clicar no botão aparece o seguinte erro no console:

Uncaught ReferenceError: showDivUpload is not defined at :1:1

A idéia é mostrar para o usuário a descrição dos valores do resultado da fórmula apresentado.

Obrigada. Flávia

6 respostas

Oi Flávia, tudo bom?

Primeiro eu gostaria de sugerir você postar essa dúvida no fórum de Java, acho que você vai ter mais sucesso lá.

Meu Java está enferrujado, mas a menos que eu esteja bem louco, eu acredito que existem algumas inconsistencias no seu código. Para começar, a declaração das variáveis da função está errada.

public static string montarTabelaConteudoFormula(int valorDaVariavelNumerico) // se for um inteiro mesmo

Eu acho que StringBuilder é uma classe que você deve declarar assim:

StringBuilder htmlDivsConteudoDetalhado  = new StringBuilder()

O forEach é uma função introduzida oficialmente no Java 8 né? Acho que ela não funciona bem como um laço for comum, mas como uma condição if-else. Dá uma olhada no curso de Java 8 da alura, provavelmente lá tem explicado como funciona

Sobre a sua dúvida em si, dá uma olhada nesse tópico, talvez vc encontre uma luz >.< https://stackoverflow.com/a/15842837/10156724

Oi Adriano. Agradeço muito sua ajuda, mas esta linguagem é C# e quanto a declaração do parâmetro é um objeto e não um int. A minha dúvida seria como passar este objeto do lado servidor para o lado cliente com o Json.

Do lado cliente consegui capturar o click do botão, testei assim: function selecionaBotaoConteudoFormula() { $("#botao-conteudo-formula").click(function () { console.log("Cliquei no botão"); });

Ao rodar este código é exibida a mensagem "Cliquei no botão" no meu console. Como vi que estava recuperando tentei fazer assim:

function selecionaBotaoConteudoFormula(valorDaVariavelNumerico) {

        var obj = valorDaVariavelNumerico;

          $ajax({
                type: 'GET',
                url: document.URL + '/montarTabelaConteudoFormula',
                contentType: "application/json; charset=utf-8",
                data: "{ 'obj':' " + valorDaVariavelNumerico + "' }",
                dataType: 'json',
                success: function (results) {

                    results.d;

                },
                error: function (results) { escreveMensagem(results.d); }
            });
            }

 }

Onde o quero é pegar um objeto que vem do lado servidor e retornar um string com a montagem da tabela. O método que chamo aqui é este:

[WebMethod] public static string montarTabelaConteudoFormula(ValorDaVariavelNumerico valorDaVariavelNumerico) {

        StringBuilder htmlDivsConteudoDetalhado = new StringBuilder();

        string formulaHtml = "";
        formulaHtml = valorDaVariavelNumerico.Variavel.formula.Replace('@', '<').Replace('#', '>');

        string[] separators = { "+", "-", "/", "*","(",")", " " };
        string value = classesComun.converterFormulaHtmlToString(formulaHtml);
        string[] variaveis = value.Split(separators, StringSplitOptions.RemoveEmptyEntries);
        foreach (var variavel in variaveis)
        {


            htmlDivsConteudoDetalhado.Append("<div class=\"div_conteudo_detalhes_relatorio\" id=\"" + valorDaVariavelNumerico.Variavel.codVariavel + "\">");
            htmlDivsConteudoDetalhado.Append("<table id='tabelaDetalhes' class='tabelaConteudoDetalhado'>" +
                    "<tr>" +
                        "<td class=\"td_identificacao_linha\"> Código Empresa: </td>" +
                        "<td>" + valorDaVariavelNumerico.Empresa.codEmpresa + "</td>" +
                    "</tr>" +
                     "<tr>" +
                        "<td class=\"td_identificacao_linha\"> Código Variável: </td>" +
                        "<td>" + valorDaVariavelNumerico.codVariavel + "</td>" +
                    "</tr>" +
                    "<tr>" +
                        "<td class=\"td_identificacao_linha\"> Valor: </td>" +
                        "<td>" + valorDaVariavelNumerico.valor + "</td>" +
                    "</tr>" +

                "</table>"
                );
        }
            htmlDivsConteudoDetalhado.Append("</div>");
           return htmlDivsConteudoDetalhado.ToString();


    }

O que preciso fazer: Ao clicar no botão exibir uma tabela com os detalhes da fórmula que está no objeto ValorDaVariavelNumerico- nesta entidade tem todo o detalhamento que necessito exibir na tabela.

Do lado servidor chamo o botão, pois o mesmo é dinâmico:

//Acrescentado botão para exibir os valores da fórmula

                            htmlDivsConteudoVariavel.Append("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>");
                            htmlDivsConteudoVariavel.Append("<i style='font-size:15px' id='botao-conteudo-formula' class='fa fa-info-circle' onClick ='selecionaBotaoConteudoFormula(valorDaVariavelNumerico);'></i>");

Quando executo e clico no botão ocorre o seguinte erro:

Uncaught ReferenceError: valorDaVariavelNumerico is not defined at HTMLElement.onclick (valoresVariaveisIndicador.aspx:1)

Estou com problemas com o objeto que estou passando como parâmetro e não sei se preciso passar desta forma.

Se alguém puder me passar algum artigo com algo semelhante, ficarei muito grata.

Obrigada. Flávia

Oi Flávia, bom dia.

Me desculpe, as linguagens são realmentes muito parecidas por isso a confusão.

Esse erro que está dando , provavelmente, significa que você referenciou o seu próprio script antes de referenciar o jquery em si.

Por exemplo, pode ser que esteja assim:

<script language="JavaScript" type="text/javascript" src="/js/meuscript.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-xxx.js"></script>

quando deveria estar assim:

<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-xxx.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/meuscript.js"></script>

Você pode ver isso aqui: https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined

Ou pode ser que o seu script não esteja sendo referenciado, porque ele não consegue encontrar da onde veio a função valorDaVariavelNumerico.

Oi Adriano. Ainda não cheguei na solução mas evolui bastante. Estou enviando o código atualizado e o erro que está ocorrendo agora, talvez possa me ajudar. function selecionaBotaoConteudoFormula(elemento){ var elemento = $(this).data('elemento');

 $.ajax({
                type: 'GET',
                url: document.URL + '/montarTabelaConteudoFormula',
                contentType: "application/json; charset=utf-8",

                data: { 'elemento': elemento},
                   dataType: 'json',
                success: function (results) {

                    results.d;

                },
                error: function (results) { escreveMensagem(results.d); }
            });
    }

} Onde o que quero é pegar um objeto que vem do lado servidor e retornar um string com a montagem da tabela. O método que chamo aqui é este:

[WebMethod] public static string montarTabelaConteudoFormula(ValorDaVariavelNumerico valorDaVariavelNumerico) { StringBuilder htmlDivsConteudoDetalhado = new StringBuilder();

string formulaHtml = "";
formulaHtml = valorDaVariavelNumerico.Variavel.formula.Replace('@', '<').Replace('#', '>');

string[] separators = { "+", "-", "/", "*","(",")", " " };
string value = classesComun.converterFormulaHtmlToString(formulaHtml);
string[] variaveis = value.Split(separators, StringSplitOptions.RemoveEmptyEntries);
foreach (var variavel in variaveis)
{


    htmlDivsConteudoDetalhado.Append("<div class=\"div_conteudo_detalhes_relatorio\" id=\"" + valorDaVariavelNumerico.Variavel.codVariavel + "\">");
    htmlDivsConteudoDetalhado.Append("<table id='tabelaDetalhes' class='tabelaConteudoDetalhado'>" +
            "<tr>" +
                "<td class=\"td_identificacao_linha\"> Código Empresa: </td>" +
                "<td>" + valorDaVariavelNumerico.Empresa.codEmpresa + "</td>" +
            "</tr>" +
             "<tr>" +
                "<td class=\"td_identificacao_linha\"> Código Variável: </td>" +
                "<td>" + valorDaVariavelNumerico.codVariavel + "</td>" +
            "</tr>" +
            "<tr>" +
                "<td class=\"td_identificacao_linha\"> Valor: </td>" +
                "<td>" + valorDaVariavelNumerico.valor + "</td>" +
            "</tr>" +

        "</table>"
        );
}
    htmlDivsConteudoDetalhado.Append("</div>");
   return htmlDivsConteudoDetalhado.ToString();

} O que preciso fazer: Ao clicar no botão exibir uma tabela com os detalhes da fórmula que está no objeto ValorDaVariavelNumerico- nesta entidade tem todo o detalhamento que necessito exibir na tabela.

Do lado servidor chamo o botão, pois o mesmo é dinâmico:

//Acrescentado botão para exibir os valores da fórmula

                    htmlDivsConteudoVariavel.Append("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>");
                    htmlDivsConteudoVariavel.Append("<i style='font-size:15px' id='botao-conteudo-formula' class='fa fa-info-circle' onClick ='selecionaBotaoConteudoFormula(this);'></i>");

Quando executo e clico no botão parou de ocorrer aquele erro e ocorre o seguinte erro:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at escreveMensagem (Util.js:112) at Object.error (valoresVariaveisIndicador.aspx:1231) at j (jquery-2.1.1.min.js:2) at Object.fireWith [as rejectWith] (jquery-2.1.1.min.js:2) at x (jquery-2.1.1.min.js:4) at XMLHttpRequest. (jquery-2.1.1.min.js:4)

Andei pesquisando por este erro, mas até o momento sem solução.

Obrigada. Flávia

A real é que isso aqui já está além do meu escopo de conhecimento.

Dá uma olhada nesse tópico: https://stackoverflow.com/questions/23723005/uncaught-typeerror-cannot-read-property-tolowercase-of-undefined

Talvez te ajude :)

Obrigada Adriano.