Chamar função javaScript de um botão dinâmico cs

3 respostas
Flavia1

Boa tarde pessoal.

Não sei se aqui alguém poderia me ajudar, pois estou com problemas para chamar uma função Javascript dentro do cs. 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 para que ao clicar neste seja exibido o conteúdo de valores da fórmula, ou seja, mais ou menos uma tabela assim ao clicar:

Codigo Empresa 1 Codigo Variável 123 Valor 20

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
at Sys$_ScriptLoader$_loadScriptsInternal [as _loadScriptsInternal] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:346)
at Sys$_ScriptLoader$_loadScriptsInternal [as _loadScriptsInternal] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:351)
at Sys$_ScriptLoader$_nextSession [as _nextSession] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:373)
at Sys$_ScriptLoader$_loadScriptsInternal [as _loadScriptsInternal] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:360)
at Sys$_ScriptLoader$_nextSession [as _nextSession] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:373)
at Sys$_ScriptLoader$loadScripts [as loadScripts] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:262)
at Sys$WebForms$PageRequestManager$_onFormSubmitCompleted [as _onFormSubmitCompleted] (ScriptResource.axd?d=6euZbO7ivP2ZAiVvsTLnD5ITe_W8_UCX1fI0P31kIVg3S1AOtcZxsHjCUu9SFEhreWGGebTfnMsxmfqcv8lCvbE5Epp22avlI9IeiIQJzcHiWkYN-Nn32ecsvRHdlhc7pmT-wGrLr5rVU1u6PTYE-DFbxMoQfdly9hiaTnQgCK3m_6f-qsWVf9B8-z5y-MQ_0&t=fffffffffc18b87d:1369)
at Array. (ScriptResource.axd?d=_9GkQMXoIZpYUCW7PeUDzcZ5JlOrLkBxKSudVs9Lc9nHztJCIbJpZX1exCc02yRK1ov7jYPc2iZvTUGNwwLu6n6BukhIO5og1U0wMnmn3eE-hH1g9fDSI47wP2DbSxcV8Z5N4mudiwGMXV6ldomgJ8AeLCdfxlKOu1wINVgXr18demRyIsYP8c-KKaCZZaig0&t=fffffffffc18b87d:47)
at ScriptResource.axd?d=_9GkQMXoIZpYUCW7PeUDzcZ5JlOrLkBxKSudVs9Lc9nHztJCIbJpZX1exCc02yRK1ov7jYPc2iZvTUGNwwLu6n6BukhIO5og1U0wMnmn3eE-hH1g9fDSI47wP2DbSxcV8Z5N4mudiwGMXV6ldomgJ8AeLCdfxlKOu1wINVgXr18demRyIsYP8c-KKaCZZaig0&t=fffffffffc18b87d:3484

Não sei se consegui ser clara. Se alguém puder me ajudar ficarei muito grata.

Desde já agradeço.

Flavia

3 Respostas

Flavia1

Olá pessoal.

Ninguém sabe o que pode estar acontecendo.

Obrigada.

Flavia

Flavia1

Olá pessoal.
Ainda estou com este problema e vou detalhar melhor para ver se alguém pode me ajudar.

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 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(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 ajudar, ficarei muito grata.

Obrigada. Flávia

Flavia1

Ainda não cheguei na solução mas evolui bastante. Estou enviando o código atualizado e o erro que está ocorrendo agora, talvez possam 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("");

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

Criado 16 de agosto de 2018
Ultima resposta 21 de ago. de 2018
Respostas 3
Participantes 1