Ir para conteúdo
Entre para seguir isso  
mateus.andriollo

Executar função via marcação de um elemento [RESOLVIDO]

Recommended Posts

Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.

 

Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não existe algo como isso.

Qualquer data-????? é um atributo dataset que não possui vínculos de comando a ele, o que se usa muito é para fins de manipulação de conteúdo aos quais são mais práticos de encontrar no documento.

 

Bom, para clicar em determinado elemento você pode usar onclick="funcaoOla"

 

E para executar a função pós ajax você pode está usando o ouvinte de evento readystatechange para monitorar a resposta, quando ela estiver pronta para ser escrita você apenas chama a função que deseja.

https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L501

 

Outra forma quando por exemplo houver uma tag javascript no resultado da resposta e você precisa que o script seja executado mesmo que esse resultado seja mostrada por innerHTML. Nesse caso você deve varrer o texto do resultado obtendo somente o texto contido dentro da tag, então você cria uma nova tag javascript e escreve o script que extraiu anteriormente e substitui a tag não funcional pela nova criada que a coisa vai funcionar.

https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L501

 

Por fim exec se tornou obsoleto e já foi avisado que futuras versões dos navegadores não irão mais reconhecer essa função.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Vou tentar explicar o que necessito

Supondo que em minha página tenha 2 funções

 

function Sexo(val){
	if (val=='1'){
		alert('Feminino');
	}else{
		alert('Masculino');
	}
}

function Idade(val){
	if (val<18){
		alert('Menor');
	}else{
		alert('Maior');
	}	
}

São apenas exemplos, a ideia é que ao receber por exemplo um retorno de uma $.ajax() contendo por exemplo 'Sexo(1)' ele vai e executa a função, isso em js ou jquery. a Ideia é chamar funções conforme os retornos de outras páginas.

 

O que estou fazendo se baseia em criaçãod e layout como tela de uma app, exemplo toda vez que faço show() de uma div se na estrtura dela contiver por exemplo data-load(Idade(2)) fazer a exibição eu estaria conferindo as tag deste elemente e chamando a função.

 

seria uma forma de chamar uma função com base em uma string

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você então pode está usando mais de um atributo data exemplo:

<div data-funcao="idade" data-parametro="2">

Daí é só jogar para alguma função os valores obtidos pelo dataset funcao e parametro.

Essa função checa o valor e executa a função:

function executaOutra(NomeDaFuncao, Param) {
	switch(NomeDaFuncao) {
      case 'sexo':
        Sexo(Param);
        break;
      case 'idade':
        Idade(Param);
        break;
    }
}

Se bem que se a coisa for bem estruturada, basta apenas executar a função de acordo com o conteúdo, ao invés de consultar posteriormente para saber o que fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Encontrei uma forma que resolveu meu problema

 

<button id="btn1">Show</button>
<button id="btn2">Hide</button>

<div id="quad" style='width:50px;height:50px; border:1px solid #000'>DIV</div>

<div id="console"></div>
$('#btnShow').click(function(){
   $('#foo').show();
});

$('#btnHide').click(function(){
   $('#foo').hide();
});

(function ($) {
	  $.each(['show', 'hide'], function (i, ev) {
	    var el = $.fn[ev];
	    $.fn[ev] = function () {
	      this.trigger(ev);
	      return el.apply(this, arguments);
	    };
	  });
	})(jQuery);


$('#foo').on('show', function(){
    $('#console').html( $('#console').html() + '#foo is now visible'+ '<br>'  )
});

$('#foo').on('hide', function(){
    $('#console').html( $('#console').html() + '#foo is hidden'+ '<br>'  )
});

 

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
Entre para seguir isso  

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
×

Informação importante

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