Ir para conteúdo
Wualace Chaves

Acessar via Jquey controle criado com ajax em um edititemtemplate

Recommended Posts

Estou utilizando o código abaixo para acessar uma imagem com jquery:

window.addEventListener('DOMContentLoaded', function (e) {
    var minhaimagem = document.querySelector('#id_da_minha_imagem');

    minhaimagem.addEventListener('click', function (e) {

       alert('Voce clicou na imagem');

    }, false);

}, false);

 

O código acima funciona perfeitamente quando a imagem está fora de um Gridview.
Minha dúvida é: Como faço para acessar uma imagem que está dentro de um Gridview em um EditItemTemplate??

Pelo que pesquisei na net o código acima não funciona porque o elemento ainda não existe no momento do document.ready.

 

Não tenho experiência com jquery. Existe um jeito de contornar esta situação??


Desde já agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu faria diferente, não conheço em detalhes seu problema, mas veja se funciona pra ti:

 

No seu código aspx adicione o evento onclick na imagem:

 

<asp:Image ID="Image" runat="server" onclick="javascript:SuaFuncao()" />

Então criei seu essa função no seu javascript:

 

function SuaFuncao() {
    alert('Click funciona!!');
}

 

Fiz um teste com ItemTemplate dentro da gridview e funcionou perfeitamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado quintelab!

 

Funcionou, mas tive que remover todo o código javascript contido neste laço:

 

window.addEventListener('DOMContentLoaded', function (e) {
    //código javascript

}, false);

 

Parece que esse laço faz com que o código javascript contido nele só seja executado após o html da página ter sido completamente carregado e analisado.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Rengavitp
      Boa noite pessoal,
       
      Estou com a seguinte dificuldade, preciso habilitar o arrastar e soltar de uma tabela, as paginas em que preencho a tabela com java a função funciona normal, mas onde preencho a tabela com jquey nao consigo habilitar essa funcao de arrastar e soltar, alguém pode me ajudar? abaixo segue o modal que contem a tabela.
       
      <!--Janela para listar pedidos--> <div class="modal fade" id="visualizaPedidos" role="dialog"> <div class="modal-sm center-block margin-top-30"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Lista de Pedidos</h4> </div> <div class="panel-body"> <table id="tabela_ordens" class="table tab table-striped"> <!--aqui preencho com jquery--> </table> </div> <script type="text/javascript"> $('tbody').sortable(); </script> <br> <div class="modal-footer center-block"> <button type="button" class="btn btn-primary" onclick="geraOrdemEntrega()">Entrega</button><button type="button" class="btn btn-primary" onclick="geraOrdemCarga()">Carga</button> </div> </div> </div> </div> <!--encerra modal-->  e abaixo o servlet que preenche a tabela
       
      try { //recebe parametros Carga carga = new Carga(); carga.setCd_status_carga(Integer.parseInt(request.getParameter("status"))); carga.setCd_uf_carga(Integer.parseInt(request.getParameter("estado"))); List<Carga> pedidos = new CargaDao().listaPedidosPorStatusEUf(carga); if (pedidos.size() > 0) { out.print( "<thead>" + "<th>Pedido</th>" + "<th>Unidade</th>" + "</thead>" ); out.print("<tbody>"); for (Carga dado : pedidos) { out.print( "<tr>" + "<td>" + dado.getPedido() + "</td>" + "<td>" + dado.getUn() + "</td>" + "</tr>" ); } out.print("</tbody>"); } else { out.print("vaziu"); } } catch (NumberFormatException e) { out.print("erro"); System.err.println("errrrrrou"); }  
    • Por evertongouveia
      Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código:
       
      <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) {          $("form[ajax=true]").submit(function(e) {                  e.preventDefault();                  var form_data = $(this).serialize();         var form_url = $(this).attr("action");         var form_method = $(this).attr("method").toUpperCase();                  $("#loadingimg").show();                  $.ajax({             url: form_url,              type: form_method,                   data: form_data,                  cache: false,             success: function(returnhtml){                                           $("#result").html(returnhtml);                  $("#loadingimg").hide();                                 }                    });                  });      }); </script> </head> <body> <?php     $conveniados = array();     $destaques = array();     $servicos = array();     $locais = array();     $especialidades = array();          $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado'));     foreach($convs as $conv){         $info = array();         $info["nome"] = $conv->nmConveniado;         $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade;         $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade;         $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro;         $info["bairro"] = $conv->listaEndereco[0]->nmBairro;         $info["cidade"] = $conv->listaEndereco[0]->nmCidade;         $info["telefone"] = $conv->dsTelefone1;         $locais[] = $conv->listaEndereco[0]->nmCidade;         $info["estado"] = $conv->listaEndereco[0]->sgEstado;         $servicos_str = '';         $k=0;         foreach($conv->listaServico as $serv_str){             $k++;             $servicos[] = $serv_str->nmServico;             if($k==count($conv->listaServico)){                 $servicos_str .= $serv_str->nmServico;             } else {                 $servicos_str .= $serv_str->nmServico.', ';             }         }         $info["servicos"] = $servicos_str;         $info["imagem"] = $conv->listaImagem[0]->nmArquivo;         $conveniados[] = $info;         if($conv->flDestaqueSite){             $destaques[] = $info;         }     }     $_especialidades = array_unique($especialidades);     $_servicos = array_unique($servicos);     $_locais = array_unique($locais);     asort($_especialidades);     asort($_servicos);     asort($_locais);     ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container">     <!-- Header -->     <div id="header">         <div class="container">                          <!-- Left Side Content -->             <div class="left-side">                                  <!-- Logo -->                 <div id="logo">                     <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a>                 </div>                 <!-- Mobile Navigation -->                 <div class="mmenu-trigger">                     <button class="hamburger hamburger--collapse" type="button">                         <span class="hamburger-box">                             <span class="hamburger-inner"></span>                         </span>                     </button>                 </div>                                               </div>             <div class="right-side">                 <div class="header-widget">                     <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a>                 </div>             </div>                      </div>     </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");">     <div class="main-search-inner">         <div class="container">             <div class="row">                 <div class="col-md-12">                     <h2 class="text-center">Conveniados Anjo da Guarda</h2>                     <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action="">                     <div class="main-search-input">                                              <div class="main-search-input-item">                             <input type="text" placeholder="Nome do conveniado" id="searchQuery" value="">                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Cidade" class="chosen-select" style="display: none;">                                 <?php foreach($_locais as $local){ ?>                     <?php if(trim($local)!=''){ ?>                     <option value="<?php echo $local; ?>"><?php echo $local; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Categoria" class="chosen-select" style="display: none;">                                 <option>Categoria</option>                                 </select>                         </div>                                                  <div class="main-search-input-item">                             <select data-placeholder="Especialidade" class="chosen-select" style="display: none;">                                 <?php foreach($_especialidades as $especialidade){ ?>                     <?php if(trim($especialidade)!=''){ ?>                     <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Serviço" class="chosen-select" style="display: none;">                                 <option value>Serviços</option>                 <?php foreach($_servicos as $servico){ ?>                     <?php if(trim(servico)!=''){ ?>                     <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <input type="submit" class="button" value="Buscar" />                                               </div>                     </form>                 </div>             </div>         </div>     </div> </div> <div class="container ">     <div class="row">         <div class="col-md-12 margin-top-40">             <div class="row">                 <!-- Lista -->                 <?php $d=0; ?>             <?php shuffle($destaques); ?>             <?php foreach($destaques as $destaque){ ?>                 <?php                  $d++;                  if($d<=2){                  ?> <div class="col-lg-12 col-md-12">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                                 <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript>                                 <span class="tag"><?php echo $destaque["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-badge anunciante">Anunciante</div>                                 <div class="listing-item-inner">                                     <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3>                                     <span><?php echo $destaque["telefone"]; ?></span></br>                                     <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>             <?php } ?>                 <!-- Lista / Fim -->                 <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center>                 <!-- Lista -->                 <?php $d=0; ?>                                  <?php foreach($conveniados as $conveniado){ ?>                 <?php                  $d++;                  if($d<=5){                  ?>                 <div class="col-lg-12 col-md-12"                 especialidade="<?php echo $conveniado["categoria"]; ?>"                 local="<?php echo $conveniado["cidade"]; ?>"                 nome="<?php echo $conveniado["nome"]; ?>"                 servicos="<?php echo $conveniado["servicos"]; ?>">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                             <?php if($conveniado["imagem"] != ''){ ?>                                 <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript>                             <?php } else { ?>                                 <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript>                             <?php } ?>                                 <span class="tag"><?php echo $conveniado["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-item-inner">                                     <h3><?php echo $conveniado["nome"]; ?></h3>                                     <span><?php echo $conveniado["telefone"]; ?></span></br>                                     <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>                 <?php } ?>                              </div>             <!-- Paginação -->             <div class="clearfix"></div>             <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>             <div class="row">                 <div class="col-md-12">                     <!-- Paginação -->                     <div class="pagination-container margin-top-20 margin-bottom-40">                         <nav class="pagination">                             <ul>                                 <li><a href="#" class="current-page">1</a></li>                                 <li><a href="#">2</a></li>                                 <li><a href="#">3</a></li>                                 <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li>                             </ul>                         </nav>                     </div>                 </div>             </div>             <!-- Paginação / Fim -->         </div>     </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15">     <!-- Main -->     <div class="container">                  <!-- Copyright -->         <div class="row">             <div class="col-md-12">                 <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div>             </div>         </div>     </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script>   function initAutocomplete() {     var input = document.getElementById('autocomplete-input');     var autocomplete = new google.maps.places.Autocomplete(input);     autocomplete.addListener('place_changed', function() {       var place = autocomplete.getPlace();       if (!place.geometry) {         window.alert("No details available for input: '" + place.name + "'");         return;       }     });     if ($('.main-search-input-item')[0]) {         setTimeout(function(){              $(".pac-container").prependTo("#autocomplete-container");         }, 300);     } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>  
    • Por Cesar Masserati Procopio
      Pessoal, boa Tarde!
      Pode me Ajudar com um probleminha que estou tendo hehehe...
      Fiz essa paginação via AJAX completa está tudo funcionando blz, porém quando tiver muitos registros está desconfigurando. 
      Gostaria de fazer, conforme pode ver nas imagens abaixo, a Imagem Original ficar igual a Imagem Modificada!
      Alguma Dica ou sugestão?


      function filtroProc(){ $('.pagination').html(''); var filtro = $('input[name=filtro]:checked').val(); filtros.setFiltro(filtro); var offset = getPaginacao.getOffsetAtual(); var maximo = getPaginacao.getMaximo(); var links = getPaginacao.getLink(); $.ajax({ url:'nav/conf/con_lis_pro_ajax.php', type:'POST', dataType:'json', data:{offset:offset, maximo:maximo, filtro:filtro}, success:function(json){ filtros.setTotalFiltro(json.totalFil); getPaginacao.setTotal(json.totalItem); var totalFiltros = filtros.getTotalFiltro(); var totalItens = getPaginacao.getTotal(); $('.tabela tbody').empty(); $(".contagem").html(totalFiltros); $(".total").html(totalItens); var verif = 0; if(verif === json){ var html = '<tr>'; html += '<td colspan=5><div class="msg_no">Não existe cadastro de Processos de Emissão!</div></td>'; html += '</tr>'; $('.tabela tbody').append(html); }else{ for(var i in json.lista){ var html = '<tr>'; html += '<td align="center">'+json.lista[i].id+'</td>'; if(json.lista[i].status === 'a'){ html += '<td align="center"><img src="../image/semaforo/verde.png" data-id="'+json.lista[i].id+'" data-name="i" onclick="atualizaStatus(this)"/></td>'; }else{ html += '<td align="center"><img src="../image/semaforo/vermelho.png" data-id="'+json.lista[i].id+'" data-name="a" onclick="atualizaStatus(this)" /></td>'; } html += '<td align="center">'+json.lista[i].identificador+'</td>'; html += '<td>'+json.lista[i].descricao+'</td>'; html += '<td><a class="lista_bt2" href="#" data-id="'+json.lista[i].id+'" onclick="editarPro(this)"></a></td>'; html += '</tr>'; $('.tabela tbody').append(html); } } // ---- PAGINAÇÃO ------ // var maximo = getPaginacao.getMaximo(); var totalPaginas = Math.ceil((totalFiltros / maximo)); htmlPag = '<a href=\"#" data-id="1" onclick="dispara(this);">Primeira Página</a>&nbsp;&nbsp;&nbsp;'; for (var i = 1; i <= totalPaginas; i++){ htmlPag += '<a href="#" data-id="'+i+'" onclick="dispara(this)" class="">'+i+'</a>&nbsp;&nbsp;&nbsp;'; } htmlPag += '<a href=\"#" data-id="'+totalPaginas+'" onclick="dispara(this);">Ultima Página</a>&nbsp;&nbsp;&nbsp;'; $('.pagination').append(htmlPag); $('.pagination').find('.active_pag').removeClass('active_pag'); $('.pagination').find('a[data-id='+getPaginacao.getPagAtual()+']').addClass('active_pag'); } }); }  
    • Por ndias
      To tentando fazer uma requisição Ajax em um projeto POO-MVC
       
      Tenho um formulário q eu uso o evento onchange pra chamar uma função JavaScript q por sua vez usa Ajax pra requisitar via POST uma página php
       
      <!DOCTYPE html> <head> <script> function consultaCPF($cpf) { $.ajax({ type : 'POST', url : 'ajax/consultaCPF.php', data : 'CPF='+$cpf, dataType: 'json', success : function(response){ if(response.codigo == "1") { }else{ } }, error: function(XMLHttpRequest, textStatus, errorThrown){ $("#erro").html('<b>ERRO</b>'+XMLHttpRequest.responseText); } }); } </script> </head> <body> <div id="erro"> <form name="form" method="post"> <input type="text" name="CPF" maxlength="14" onchange="return consultaCPF(this.value)" value="<?php if($_POST){echo $_POST['CPF'];}?>"> </form> </div> </body> </html>  
      Até aí td bem...
       
      Na página php eu instancio uma classe da minha Model q faz uma consulta no bd pra saber se já existe ou não cadastrado o CPF digitado no form. Se existir me retorna 1, senão me retorna 2. A resposta eu capturo em json e passo de volta pro Ajax receber. Esse success é q vai determinar minha ação.
       
      <?php if($_POST && $_POST['CPF']){ $consulta = new \App\Models\Validacoes(\App\Init::getDb()); $res = $consulta->CPF($_POST['CPF']); if($res == 1){ $retorno = array('codigo' => 1, 'mensagem' => 'CPF ja existe'); echo json_encode($retorno); exit(); }else{ $retorno = array('codigo' => 2, 'mensagem' => 'CPF não cadastrado'); echo json_encode($retorno); exit(); } }  
      Até aí tudo bem...
       
      Acontece que quando o Ajax faz a requisição da página php onde eu instancio minha classe, não sei pq tá dando Fatal Error Class Not Found (como se não tivesse conectando com meu banco).
       
      namespace App; class Init { public static function getDb(){ $db = new \PDO("mysql:host=127.0.0.1;dbname=root;charset=utf8","root","vertrigo"); return $db; } }  
      Porém funciona se eu testar minha classe direto na página PHTML do formulário usando um método GET pra receber e passar a consulta pro meu objeto.
      namespace App\Models; class Validacoes { protected $db; public function __construct(\PDO $db) { $this->db = $db; } public function CPF($cpf){ $stmt = $this->db->prepare("Select CPF from tabela where REPLACE(REPLACE(CPF,'.',''),'-','') = :cpf LIMIT 1"); $stmt->bindParam(":cpf",$cpf); $stmt->execute(); if($stmt->fetchAll()){ $res = 1; }else{ $res = 2; } return $res; } }  
      Será q o fato de não funcionar com o Ajax requisitando em public uma página php, tem haver com a rota? Pois só as Views estão usando Controllers! Ou estou fazendo errado utilizando uma página php na requisição Ajax?
       
      ERRO
      ( ! ) Fatal error: Class 'App\Models\Validacoes' not found in D:\Projetos\SAEE\public\ajax\consultaCPF.php on line 3 Call Stack # Time Memory Function Location 1 0.0010 335304 {main}( ) ..\consultaCPF.php:0
    • Por Stephanie Ferreira
      Quando eu clico para adicionar um produto pela home, o tema abre esta pop-up pro carrinho ali no cantinho: http://prntscr.com/jjixa1
      Mas o link cai pra este: https://kitboxclub.com.br/wp-admin/admin-ajax.php
      Pelo que entendi do código, é um problema de jQuery e eu não entendo nada de jQuery, o tema da loja é http://nitro.woorockets.com/
      Isso foi feito pelo antigo desenvolvedor que passou a perna na gente e eu sou a designer que ta tentando arrumar.. SOCORRO?
      A página que eu preciso de ajuda: https://kitboxclub.com.br/
       
      O código que eu acho que está o problema é esse: https://pastebin.com/tyFtfep7 pq foi o único que achei o link admin-ajax.php dentro dele, mas não entendo nada de .js
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.