(Resolvido)Função onblur não quer funcionar no Firefox

Paulada · Julho 25, 2009

Ola a todos!

Estou fazendo alguns códigos para serem utilizados em um sistema que tenho de produzir e uma das coisas que gostaria de implementar é fazer com que a função onblur do javascript chame uma página em php para consultar no banco se aquele campo já existe, mas pelos exemplos do livro que estou estudando só consegui fazer isso funcionar no Internet Explorer. O chato é que a ferramenta Firebug do Firefox não detecta nenhum erro, então como a função onblur(que está no arquivo Exemplo7.js) é responsável por pegar o foco do cursor quando movimentado, estou supondo que o problema seja nela.

O exemplo é bem simples, há 1 página em html, 2 em javascript e 1 em php. No html há 2 inputs, no qual se você digitar as palavras juliano ou joao no primeiro e der tab, ele consulta um array no php e mostra de que aqueles nomes já existem, mas se você digitar qualquer outra palavra, ele diz que o username está ok.

O código está perfeito e pode ser aproveitado por outras pessoas do fórum, mas eu gostaria de fazê-lo funcionar no Firefox. Alguém pode ajudar? :blink:

Exemplo7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRansitional//EN"
"http://www.w3.org/TR/html14/loose.dtd">

<html>

    <head>
        <title>Web Interativa com Ajax</title>

        &lt;script type="text/javascript" src="bibliotecaAjax.js"></script>
        &lt;script type="text/javascript" src="exemplo7.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    

    </head>

    <body>

        <h2>Formulário de Cadastro</h2>
        <form action="java script:void%200">

            <p>
                Preencha o formulário:
            </p>
            <p>
                Escolha um username:
                <input name="username" type="text">
            </p>
            <p>
                Seu nome completo:
                <input name="nome" type="text">
            </p>
            <p>
                Aqui podem ser colocados outros <br>campos e um botão para enviar...
            </p>

        </form>

    </body>

</html>

Exemplo7.js

window.onload = function()
{
    var texto = document.getElementById("username");
    
    if(texto != null)
    {
        texto.onblur = function() { testaUsuario(texto.value);}
    }
}

function testaUsuario(username)
{
    if(username)
    {
        var url ="exemplo7.php?username="+encodeURIComponent(username);
        requisicaoHTTP("GET",url,true);
    }
}

function trataDados()
{
    var info = ajax.responseText;   //  obtém a resposta como string
    alert(info);
}

Exemplo7.php

<?php

    $gmtDate = gmdate("D, d M Y H:i:s");
    header("Expires: {$gmtDate} GMT");
    header("Last-Modified: {$gmtDate} GMT");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");
    header("Content-Type: text/html; charset=ISO-8859-1");

    //  array de usuários supostamente existentes
    
    $usuarios = array ("juliano", "joao");
    $valido = 1;
    $username = strtolower($_GET["username"]);
    
    for($i=0; $i<sizeof($usuarios); $i++)
    {
        //  compara o username digitado com os elementos do array
        if($usuarios[$i] == $username)
        {
            $valido = 0;
        }        
    }
    
    if($valido)
    {
        echo "Username OK!";
    }
    else
    {
        echo "Username já existe! Escolha outro!";
    }

?>

bibliotecaAjax.js

var ajax;
var dadosUsuario;


//------------- cria o objeto e faz a requisição ------------
function requisicaoHTTP(tipo,url,assinc)
{
    if(window.XMLHttpRequest)
    {
        ajax = new XMLHttpRequest();    // Mozilla, Safari,...
    }
    else
        if(window.ActiveXObject)    //IE
        {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");

            if(!ajax)
            {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

    if(ajax) // iniciou com sucesso
    {
        iniciaRequisicao(tipo,url,assinc);
    }
    else
    {
        alert("Seu navegador não pussui suporte a essa aplicação!");
    }
}

//------------- Inicializa o objeto criado e envia os dados (se existirem) -----
function iniciaRequisicao(tipo,url,bool)
{
    ajax.onreadystatechange = trataResposta;
    ajax.open(tipo,url,bool);
    if(window.XMLHttpRequest)
    {
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
        ajax.overrideMimeType("text/XML");    /* usado somente no Mozilla */
    }
    else
    {
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    }
    ajax.send(dadosUsuario);
}

// ------------ Inicia requisição com envio de dados -------------
function enviaDados(url)
{
    criaQueryString();
    requisicaoHTTP("POST",url,true);
}

// ------------ Cria a string a ser enviada, formato campo1 = valor1&campo2=valor2... -------
function criaQueryString()
{
    dadosUsuario="";
    var frm = document.forms[0];
    var numElementos = frm.elements.length;

    for(var i = 0; i < numElementos; i++)
    {
        if(i < numElementos-1)
        {
            dadosUsuario += frm.elements[i].name+"=" + encodeURIComponent(frm.elements[i].value)+"&";
        }
        else
        {
            dadosUsuario += frm.elements[i].name+"=" + encodeURIComponent(frm.elements[i].value);
        }
    }
}

// ------------ Trata a resposta do servidor ---------------
function trataResposta()
{
    if(ajax.readyState == 4)
    {
        if(ajax.status == 200)
        {
            trataDados();   // criar essa função no seu programa
        }
        else
        {
            alert("Problema na comunicação com o objeto XMLHttpRequest");
        }
    }
}

Obrigado pela atenção. :rolleyes:

Editado Julho 25, 2009 por Paulada

Jonathan Queiroz · Julho 25, 2009

Ocorre algum erro ?

Se sim, em qual linha ?

Paulada · Julho 25, 2009

Ocorre algum erro ?
Se sim, em qual linha ?

Não ocorre erro no Firefox, mas suponho que algo errado esteja acontecendo na linha 7 do Exemplo7.js, pois é ali que está a função onblur, que é responsável para pegar o foco do cursor.

Jonathan Queiroz · Julho 25, 2009

Achei o erro !

O erro não está no JS não.

O método getElementById do document deve retornar um elemento HTML cujo atributo id é equivalente ao parâmetro dessa função.

Infelizmente o Internet Explorer não segue esses padrões e, na tentativa de facilitar demais para o programador, acaba prejudicando-o por ignorar várias regras. Se não houver um elemento com o atributo id desejado, ele procura pelo atributo name.

Como os outros navegadores não suportam isso, o ideal é seguir os padrões e utilizar o atributo id ao invés do name para identificar elementos (o name costuma ser utilizado para dados de formulários que precisem ser resgatados em outras páginas)

Ao invés de:

<input name="username" type="text">

Deixe assim:

<input name="username" id="username" type="text">

Paulada · Julho 25, 2009

Caramba! Você tem razão e que por sinal é uma bela observação sobre o id do html. Na verdade eu que sou estudante, entendo isso como um descuido do autor. Ando estudando muito JavaScript e Ajax e fico até envergonhado de estar enchendo o saco de vocês com frequência. Olha, muito obrigado, muito obrigado mesmo, pois este código estava emperrando os meus estudos e agora posso continuar.

Inclusive vou mudar o nome do post para não confundir as pessoas que entram aqui.

Valeu! Este fórum é muito sinistro. :lol:

Jonathan Queiroz · Julho 25, 2009

De nada cara !

Mas não é "encher o saco" não rsrs.

Qualquer dúvida posta aí !

Entrar

(Resolvido)Função onblur não quer funcionar no Firefox

Pergunta

Paulada

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Paulada

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Paulada

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades