Jump to content
vinitf

Problema com module pattern Jquery

Recommended Posts

Olá, pessoal. Há um tempo atrás eu mostrei esse código aqui e ele colocava os dados de uma url ashx em um gráfico pie, foi resolvido o problema com a orientação do forum. Agora preciso aplicar Module Pattern nele para plotar o gráfico, sendo que meu método deve ser privado. Nunca havia mexido com esse tipo de coisa, então deve haver alguns erros, peço ajuda de vocês.

<div class ="container">
  <body>
<div><canvas id="grafico" width="80" height="15"></canvas> </div> 
    <div id="lista"></div>  
  </body>
</div>
var module = $(document).ready(function() {
  var metodoprivado = function() {
    $.ajax({
      url: "http://servicosweb.ibge.gov.br/GetStatus.ashx",
      success: function verstatus(data) {
        var servicos = _.countBy(data, function(x) {
          return x.Status === true ? "on" : "off";
        });
        $.each(data, function imprimirdados(index, item) {
          // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico"));
          if ((item.Status = true)) {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "ON") + "</p>")
              .insertAfter($("#grafico"));
          } else {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "OFF") + "</p>")
              .insertAfter($("#grafico"));
          }
        });
      }
    });
  };
  return {
    metodopublico: function() {
      document.getElementById("lista").innerHTML;
      var resultado = [servicos.on, servicos.off];
      var ctx = document.getElementById("grafico").getContext("2d");
      myChart = new Chart(ctx, {
        type: "pie",
        data: {
          labels: ["Serviços online", "Serviços offline"],
          datasets: [
            {
              backgroundColor: ["#FF9900", "#23238E"],
              data: resultado,
              options: {
                animation: {
                  animateScale: true
                }
              }
            }
          ]
        }
      });
      return {
        //metodoprivado: metodoprivado,
        metodopublico: function() {
          metodoprivado();
        }
      };
    }
  };
});
//isso eu acho que está errado
module.metodoprivado();
module.metodopublico();

 

Share this post


Link to post
Share on other sites

isso aqui:

var module = $(document).ready(function() {

 

não faz sentido.

e nem isso aqui:

 

 metodopublico: function() {
          metodoprivado();
        }

se ele era privado, você não deveria expo-lo através de um publico. Ai perdeu todo o sentido do módule pattern em si.

 

Veja:

var myModule = (function(){
    function metodopublico() {
        console.log('public');
    }
    function metodoprivado() {
        console.log('private');
    }
    return {
        metodopublico: metodopublico
    }
}());
myModule.metodopublico(); //public;
myModule.metodoprivado(); //error=TypeError: myModule.metodoprivado is not a function

 

repare que eu *nunca* exponho o privado, porque se não ele deixa de ser privado.
porque você precisa disso? qual o problema real?

Share this post


Link to post
Share on other sites

Entendi melhor com sua explicação, amigo. A ideia seria colocar somente a função de plotar o gráfico como pública, e não como privada como tinha dito antes, me confundi. Mas ainda tenho problemas no método público. Veja:

var module = $(function() {
  function metodoprivado() {
    $.ajax({
      url: "http://servicosweb.ibge.gov.br/GetStatus.ashx",
      success: function verstatus(data) {
        var servicos = _.countBy(data, function(x) {
          return x.Status === true ? "on" : "off";
        });
        $.each(data, function imprimirdados(index, item) {
          // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico"));
          if ((item.Status = true)) {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "ON") + "</p>")
              .insertAfter($("#grafico"));
          } else {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "OFF") + "</p>")
              .insertAfter($("#grafico"));
          }
        });
      }
    });
    
  };
   function metodopublico() {
      document.getElementById("lista").innerHTML;
      var resultado = [servicos.on, servicos.off];
      var ctx = document.getElementById($("grafico")).getContext("2d");
      myChart = new Chart(ctx, {
        type: "pie",
        data: {
          labels: ["Serviços online", "Serviços offline"],
          datasets: [
            {
              backgroundColor: ["#FF9900", "#23238E"],
              data: resultado,
              options: {
                animation: {
                  animateScale: true
                }
              }
            }
          ]
        }
      });
      return {
       // metodoprivado: metodoprivado,
        metodopublico: metodopublico
      }
    };
});
module.metodoprivado();
module.metodopublico();

 

Share this post


Link to post
Share on other sites

qual o problema?

está meio confuso do que você tá querendo fazer.

 

se o método é privado, só o objeto que o declara que pode chamá-lo. No caso, o teu público pode chamar internamente o privado, mas nunca expor o privado diretamente.

 

ps: `module` é um nome ruim, porque é uma palavra reservada, tente ser mais específico no seu problema na hora de nomear objetos.

Share this post


Link to post
Share on other sites

Esta condição, assim como está, vai ser sempre verdadeira, já que estás a fazer uma atribuição:

 

if ((item.Status = true)) {
   //(...)
}

Para fazer uma comparação, usa == ou ===.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By Sapinn
      Salve salve! Nuca intendi como isso realmente funciona por isso gostaria da ajuda de vcs. Estou desenvolvendo um sistema de historias e acho que seria interessante no envio dessas historia além dos texto imagem ilustrativas, mais ou menos como blogs de noticias fazem, mas como posso enviar texto e imagem e depois retorna-los juntos? Eu sei com enviar imagens em php mas gostaria de enviar a imagem e o texto colocando ambos em um textarea acho que assim ficaria bem mais interessante alguém pode me ajuda?
       
    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
    • By FilipeON
      Olá Sou iniciante em Javascript... Preciso de ajuda para a seguinte questão:
      Tenho duas FUNÇÕES e preciso executa-las de forma aleatória, já tentei de varias formas, mas sem sucesso, alguém pode me ajudar?
      Basicamente o que preciso é que toda vez que a pagina WEB for carregada uma das duas funções seja sorteada e executada.
       
      As funções são:
      function vt1(){fireEvent (document.getElementById('bt-1'), 'click');} function vt2(){fireEvent (document.getElementById('bt-2'), 'click');}
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.