Ativar função somente quando objeto existir

[Kevin Marques 0]

Olá pessoal, Gostaria de saber se existe uma maneira de ativar certa função somente quando um objeto HTML existir...

 

Exemplo:

 

Essa função simplesmente adiciona um evento de click em um objeto de ID login_action para executar o AJax. é aquela básica validação de login em JS com ajax..

function sendLogin(){



    var box;
    box = document.getElementById("loginBox");
//se o objeto box não estiver como indefinido ou nulo
        if(box != undefined || box != null){


            var but = document.getElementById("login_action");
//cria o addEventListener, que no caso esta tratado dentro da função AddEvent que criei
//para compatibilidade com navegadores IE..
            addEvent('click',function(){
                //instanciando a função do ajax
                var XmlR = SetAjax();

                //variavel de seleção de objetos...
                var Obj = document.getElementById("msgBox");

                //mostra a mini tela com o texto carregando... aqui e um exemplo..
                //Obj.innerHTML = "<div id='LoadDiv'><img src='system/images/icons/gif/loading.gif' alt='loading..' /></div>";

                var TLogin, TSenha;
                TLogin = document.getElementById('UserBarLogin').value;
                TSenha = document.getElementById('UserBarSenha').value;
                if(TLogin.match("Login de Usuário") || TSenha.match("Senha de Acesso")){
                    TLogin = '';
                    TSenha = '';
                }


//injetando metodo open para a função ajax.
                XmlR.open("GET", "System/Assembly/exec.php?acao=active&login="
                    +encodeURIComponent(TLogin)
                    +"&senha="
                    + encodeURIComponent(TSenha),
                    true);
                XmlR.onreadystatechange = function () {

                    if (XmlR.readyState == 4 && XmlR.status == 200){
                        Obj.innerHTML = XmlR.responseText;
                    }


                };
                XmlR.send(null);

            },true,but);


        }


} 

isso esta funcionando perfeitamente sem essa linha de codigo abaixo:

 box = document.getElementById("loginBox");

 if(box != undefined || box != null){...

essa linha acima verifica se o objeto box com o ID = loginBox existe, ate aí tudo beleza..

O problema é um seguinte...

 

essa função sendLogin() ja fica ativada na minha página e o objeto loginBox (que é uma div) e que é o conteiner onde agrupo todos os campos de login e senha. Esse conteiner so aparece quando eu clico no botao ACESSAR..

 

so que antes de eu clicar nesse botao de acessar... como o sendLogin() ja esta contigo no html a linha que verifica se o box existe ja foi processada e ja me retornou false... quando clico no botao de Logar no meu conteiner loginBox o ajax não é iniciado por que o if ja foi processado e retornou false, no caso para funcionar teria que retornar true para que o evento click funcione quando ativado.

 

Bom estou evitando usar Jquery ou qualquer biblioteca ja que sou iniciante no JS e tambem não quero colocar as funções diretamente no onclick do objeto, ja que estou usando addEventListener..

 

Quero saber se existe algum metodo ou função que verifique quando o HTML sofre alteração ou se tem como saber exatamente quando esse objeto passa a existe na página... nao sei se deu pra entender so quero saber se tem um jeito de eu identificar quando o objeto passa a existir no HTML...

la vai mais exemplo..

 

objeto nao existe... nao faz nada...

quando o objeto passa a existir a condição se torna true e o ajax passa a funcionar...

 

Eu usei o metodo setInterval()... funcionou perfeitamente so que eu to achando muito arcaico e acredito que passa a pesar na página ja que a cada segundo ele verifica se o objeto ja existe, é como se fosse um loop de verificação de objetos existentes no HTML...

 

Obrigado desde ja por qualquer ajuda ou função que posso funcionar..

 

P.S estou usando PHP como Code ServerSide e ja coloquei a função sendLogin dentro do conteiner para executar juntamente quando o servidor php enviar o html para o browser, so que estou fazendo a chamada do painel de login loginBox por ajax e todos sabem que funções JS não funcionam quando vem de dentro do responseText do ajax ja que ele sempre vem como texto puro e não como codigo live...

[William Bruno 1501]

setInterval não é uma opção..

 

você diz:

Esse conteiner so aparece quando eu clico no botao ACESSAR..

poxa! então dispare a função sendLogin() neste instante! Logo após criar o elemento.

 

 

Quanto ao código:

addEvent('click',

isso está colocando o evento em quem exatamente ? no body ?

Má prática fazer isso. Vc já ouviu falar sobre delegate ? (bem simples fazer com js puro)

[Kevin Marques 0]

var but = document.getElementById("login_action");

 

addevent consiste de:

 

a Função AddEvent esta sendo indicado para a variavel but que e o botao com a id login_action...

 

addEvent(evento,funcao,booleano, objeto); << essa função eu criei com alguns metodos como o attachEvent stopPropagation entre outros... para funcionar no IE

 

simples e so você lê o texto que você entende, e nao tem como disparar o sendLogin quando objeto provem do ResponseText..

 

Se você nao ler o conteudo que escrevi nao tente advinha e sai falando o que nao compreendeu

 

 

 

Obrigado pela resposta.

[William Bruno 1501]

?

Eu estou tentando te ajudar, mas essa atitude sua não vai tornar as coisas mais simples.

Ah, então a função addEvent recebe 4 parâmetros. Ok, isso por si só já é uma má prática de programação. Não faça isso.

 

 

E sim, é possível disparar sendLogin quando o objeto provém de um responseTex

Pesquise sobre o delegate events que eu te indiquei, que vc vai ver como é.

 

Ai, fazendo isso, vc já vai poder trocar essa addEvent pela mesma técnica de delegate, e deixar o seu código melhor. :lol: