Jump to content
AnthraxisBR

Problema ao chamar evento jQuery ao carregar elemento (várias vezes)

Recommended Posts

Boa tarde,

 

Estou desenvolvendo um projeto, e em determinado momento, eu tenho que exibir um gráfico (highcharts sem suporte).

 

Esse gráfico deve ser chamado novamente toda vez que o elemento "#fiscal_chart_obg_container" for carregado.

 

O evento jQuery fica no em um arquivo carregado na index chamado jquery.system.app.js

 


$("#fiscal_chart_obg_container").ready(function () {
    var data_a = $('.data_chart_dashboard_fiscal').val();
    var regime = $('.filtro_por_regime_chart_dashboard_fiscal').val();
    $.ajax({
        url: 'callFunctions.php',
        type: 'POST',
        data: {funcao: 'chart_por_regime_dashboard_fiscal', regime: regime, resposta: 'feitos', data_relacionada: data_a},
        async: true,
        dataType: "json",
        success: function (data) {
            var dados = data;

            //var categorias = data['categoria'];
            $.ajax({
                url: 'callFunctions.php',
                type: 'POST',
                data: {funcao: 'chart_por_regime_dashboard_fiscal', regime: regime, resposta: 'nao_feitos', data_relacionada: data_a},
                async: true,
                dataType: "json",
                success: function (data2) {
                    var dados2 = data2;
                    //var categorias = data['categoria'];
                    elementosData(dados, regime, dados2);
                }
            });
        }
    });
});

Esse gráfico também é chamado com um outro evento 'onchange' de um select, mas esse outro evento funciona corretamente, o problema está em chamar p evento quando o elemento relacionado for carregado, ele chama apenas um vez, ou não chama o evento, na verdade,todos os gráficos que estão atrelados a uma chamada como essa :

Citar

$('#nome_do_elemento').ready(function(){});

 

não estão sendo chamados em um segunda exibição do elemento, somente na primeira, ou em nenhuma.

 

Existem vários plugins no sistema, mas acredito que um plugin não deva interferir em uma chamada do jQuery.

 

Estou a alguns dias com esse problema, se alguém souber alguma opção de solução para "Chamar evento jQuery ao carregar elemento' agradeço.

 

Share this post


Link to post
Share on other sites

Cara tenta dar uma olhada na documentação do jQUERY : https://api.jquery.com/ready/ .

Não tenho certeza se desse jeito que você fez funciona certo, eu normalmente uso:

 

$( document ).ready(function() {
  
});

//OU

$(function() {
  
});

// mas la na documentação também tem esses exemplos:

$( handler );
$( document ).ready( handler );
$( "document" ).ready( handler );
$( "img" ).ready( handler );
$().ready( handler );

Talvez também usar isso possa ajudar: 

 

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  
});

Espero ter ajudado,

Boa sorte!

Share this post


Link to post
Share on other sites

Nenhuma das opções da documentação do ready funcionam do jeito certo, o que eu fiz foi fazer um botão escondido, e um evento que é incluído na página com o gráfico, esse evento, 'ready', da um trigger no button escondido, e esse button chama a requisição com os dados do gráfico, mas não deveria ter ficado assim.

 

Pelo que eu entendi o ready é um tipo de evento que só da pra chamar um vez por carregamento do js, mas não consigo encontrar outro disparador que faça isso de forma dinâmica, uma possível solução seria usar de alguma forma o each, pra chamar várias vezes, mas mesmo assim não funciona, pois precisaria de algo pra iniciar o each, e acabaria caindo no mesmo tipo de gambiarra que eu fiz pra funcionar.

 

 

O que eu preciso encontrar é algo que corresponda a isso:

 

Citar

$(dcument).on('ready','#nome_do_elemento',function(){//coisas da funcao});

 

Mas com a sintaxe correta, pois assim não dispara.

 

Mas obrigado!

Share this post


Link to post
Share on other sites

Assim n vai disparar nunca msm.

 

Até por que:

dcument != document

Faz por partes.

 

o você chamou o jQuery na pagina em html?

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</body>

Lembrando que a ordem importa....

Então tudo que é jQuery deve ficar (obviamente) abaixo dele...

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			alert(1);		
		});

	</script>
</body>
</html>

E a ultima dica é...

Tem algum erro de JavaScript?

Para verificar

No Chrome:

Ctrl + Shift + J

 

No Mozilla:

Ctrl + Shift + K

Share this post


Link to post
Share on other sites

Disparou o Alert?

 

Show... agora voltando ao seu problema

Citar

Esse gráfico deve ser chamado novamente toda vez que o elemento "#fiscal_chart_obg_container" for carregado.

Oq 'chama/carrega' isso?

Um Clique? Joga na função msm ué...

 

No html:

<button id="btn-chamar-grafico">Chamar Graficos</button>

No JS, dentro do ready... Ex:

$(document).ready(function() {

	$( "#btn-chamar-grafico" ).bind( "click", function() {
		alert('Carregando os graficos...');
		
		//Chama o Ajax, Chama a ambulância, Chama a Mãe Dináh	
	
		
	});
	
	
});

 

 

 

 

Tem alguns filters que podem te ajudar:

https://api.jquery.com/visible-selector/

 

Share this post


Link to post
Share on other sites
3 minutos atrás, gabrieldarezzo disse:

dcument != documet

1 minuto atrás, gabrieldarezzo disse:

Disparou o Alert?

 

Show... agora voltando ao seu problema

Oq 'chama/carrega' isso?

 

Tem alguns filters que podem te ajudar:

https://api.jquery.com/visible-selector/

 

Eu uso firebug pra debugar, mas as questões do funcionamento do jQuery, ordenamento de arquivo, erros, estão ok, até o gráfico funciona, o problema é que eu não consigo reutilizar o evento, quando o '#elemento_onde_esta_o_grafico' é carregado, pois eu tenho n condições pra esse elemento ser exibido, na tela, como gambiarra tenho um evento que dispara todas as vezes que o usuário clica em algum botão que exiba esse elemento, mas não deveria ser assim kkk o que eu preciso seria exatamente alguma coisa que corresponda a isso:

 

Citar

$(document).on('ready','#elemento_que_esta_pronto',function(){});

 

 

PS: vou ver se consigo usar esse :visible, mas acredito que não pois o elemento onde o gráfico fica não existe na página, ele é trazido de um outro arquivo, e só depois dele ser criado, é que o evento que preenche o gráfico deve ser disparado

Share this post


Link to post
Share on other sites
$(document).on('click', ".btn-filtros-box.show", function(){

});

A parada é criada dinamicamente isso?

Da pra no DOM 'escutar'  um evento a partir de outro seletor...

Assim independente da parada ser criada dinamicamente vai funcionar

 

 

Da uma lida:

http://api.jquery.com/on/

 

 

#off:

Prevejo pessoal de JS tendo ulcera ao ler o código acima HSAUHSUHSAUAS...

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 Alandeoli
      Boa noite Pessoal!
       
       
      Estou criando uma tela de login, e passando os dados para uma pagina que vai se conectar ao AD, mas mesmo eu colocando os campos em branco a conexão esta passando como ok, segue os códigos se puderem me ajudar agradeço muito!
       
      Tela conexao:
       
      <?php   $adServer = "ldap://xxx.xxxx.xx.xx";   $ldap = ldap_connect($adServer); $username = $_POST['user']; $password = $_POST['pass'];   $ldaprdn = 'XXX' . "\\" . $username;   ldap_set_option($ldap, LDAP_OPT_PROTOCOL_VERSION, 3); ldap_set_option($ldap, LDAP_OPT_REFERRALS, 0);   $bind = @ldap_bind($ldap, $ldaprdn, $password);   if($bind=true)   {   echo "conexão ok";     } else   {   echo "erro";     }   Tela Login:   <!DOCTYPE html> <html lang="pt-br"> <link href='css/login.css' rel='stylesheet' />


        <head> <meta charset="UTF-8"> <title>Tela de Login e Senha</title> </head>   <body> <div name="login" id="login"> <div name="box" id="box"> <form method="POST" action="ad.php" name="form"> Login : <input type="text" name="user" id="user"><br><br> Senha : <input type="password" name="pass" id="pass"><br><br> <input type="submit" value="Login" id="button"> </form> </div> </div>   </body>   </html>                                
    • By dutopfave
      Boa Tarde Galera, tenho um sistema de etiqueta que nele vai também código de barras, quando eu mostro na tela, funciona perfeitamente, mais quando gero pra pdf, com a biblioteca mPDF, da erro,  e é justo o código de barras q da esse erro, oq pode ser sera, segue o código de como ta:
       
      <?php require '../../Connections/config.php'; include "../Classes/funcoes.php"; include "cod.php"; $largura = 140; $altura = 130; include("mpdf60/mpdf.php"); // INICIO RECUPERA O ID DA ETIQUETA IMPORTADA $Row_Id_Etiqueta = addslashes($_GET['id_etiqueta']); $Recuperacao_Etiqueta = $pdo->prepare("SELECT * FROM tb_sys_etiqueta WHERE e_id = :e_id"); $Recuperacao_Etiqueta->bindValue(":e_id", $Row_Id_Etiqueta); $Recuperacao_Etiqueta->execute(); if($Recuperacao_Etiqueta->rowCount() > 0){ $Row_Recuperacao_Etiqueta = $Recuperacao_Etiqueta->fetch(); } // FIM RECUPERA O ID DA ETIQUETA IMPORTADA $id_etiqueta = $_GET['id_etiqueta']; $Lista_Etiqueta = "SELECT * FROM tb_sys_etiqueta WHERE e_id = '$id_etiqueta'"; $Lista_Etiqueta = $pdo->query($Lista_Etiqueta); if($Lista_Etiqueta->rowCount() > 0){ $etiqueta_id = $Lista_Etiqueta->fetch(); $qtd = $etiqueta_id['e_volume'] + 1; $qtd2 = $etiqueta_id['e_volume']; for ($i>0; $i<$qtd; $i++) { if($i>$etiqueta_id['e_pagina']){ // verificar se a pagina é menor que 10 if($i<10){ $n = '0'; }else{ $n = ''; } // verificar se a quantidade é menor que 10 if($etiqueta_id['e_volume']<10){ $nq = '0'; }else{ $nq = ''; } $html .= '<div class="etiqueta"> <div class="etiqueta-topo"> <img src="../images/logo.fw.png" width="116" height="52"> </div> <div class="etiqueta-empresa"> <div class="etiqueta-empresa-left"> <h1>GYN</h1> </div> <div class="etiqueta-empresa-right"> <h1>VOL: '.$n.''.$i.'/'.$nq.''.$qtd2.'</h1> </div> </div> <div class="etiqueta-endereco"> <div class="etiqueta-endereco-left"> <span><b>Remetente:</b></span><br/> <span>'.$etiqueta_id['e_remetente'].'</span><br/><br/> <span><b>Destinatário:</b></span><br/> <span>'.$etiqueta_id['e_destinatario'].'</span> </div> <div class="etiqueta-endereco-right"> '.geraCodigoBarra('232323232323').' <br /> '.$etiqueta_id['e_codigo_barras'].' <p>Goiânia/GO</p> </div> </div> </div>'; } } } $mpdf = new mPDF('utf-8', array($largura,$altura)); $css = file_get_contents("css/estilo.css"); $mpdf->WriteHTML($css,1); $mpdf->WriteHTML($html); $mpdf->Output(); exit;  
      a função pra gera o código de barras: cod.php
       
      <?php function geraCodigoBarra($numero){ $fino = 1; $largo = 3; $altura = 50; $barcodes[0] = '00110'; $barcodes[1] = '10001'; $barcodes[2] = '01001'; $barcodes[3] = '11000'; $barcodes[4] = '00101'; $barcodes[5] = '10100'; $barcodes[6] = '01100'; $barcodes[7] = '00011'; $barcodes[8] = '10010'; $barcodes[9] = '01010'; for($f1 = 9; $f1 >= 0; $f1--){ for($f2 = 9; $f2 >= 0; $f2--){ $f = ($f1*10)+$f2; $texto = ''; for($i = 1; $i < 6; $i++){ $texto .= substr($barcodes[$f1], ($i-1), 1).substr($barcodes[$f2] ,($i-1), 1); } $barcodes[$f] = $texto; } } echo '<img src="../images/p.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/p.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img '; $texto = $numero; if((strlen($texto) % 2) <> 0){ $texto = '0'.$texto; } while(strlen($texto) > 0){ $i = round(substr($texto, 0, 2)); $texto = substr($texto, strlen($texto)-(strlen($texto)-2), (strlen($texto)-2)); if(isset($barcodes[$i])){ $f = $barcodes[$i]; } for($i = 1; $i < 11; $i+=2){ if(substr($f, ($i-1), 1) == '0'){ $f1 = $fino ; }else{ $f1 = $largo ; } echo 'src="../images/p.gif" width="'.$f1.'" height="'.$altura.'" border="0">'; echo '<img '; if(substr($f, $i, 1) == '0'){ $f2 = $fino ; }else{ $f2 = $largo ; } echo 'src="../images/b.gif" width="'.$f2.'" height="'.$altura.'" border="0">'; echo '<img '; } } echo 'src="../images/p.gif" width="'.$largo.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/p.gif" width="1" height="'.$altura.'" border="0" />'; } ?>  
    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By Gemenson Miranda
      Oi pessoal, estou com um problema na minha hospedagem LInux do Godaddy, publiquei meu site, fiz o apontamento correto do banco de dados, mas quando acesso a URL o site me exibe HTTP ERROR 500 exibe realizei a configuração do arquivo .htaccess, alterei as permissões para (755), nada disso resolve... A questão e que sempre que comento as informações de apontamento do banco de dados no arquivo index.php o site carrega normalmente, porem sem conexão com o bando mysql, o que me faz pensar que o erro pode esta relacionado ao banco mysql, porem não consigo visualizar o erro por que a tela fica toda branca e não retorna nada, como resolver esse erro ou ao menos exibir qual erro causa ele?? agradeço!
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
×

Important Information

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