0

Estou fazendo um login, usando Ajax para enviar os dados para uma página PHP, que devolve com a resposta se o login foi ou não validado. Se estiver ok, eu atualizo uma <div> com os dados do usuário logado e exibo o avatar, sem dar o refresh na página, até ai tudo certo.

O problema que estou tendo, é que após a atualização dessa <div>, o link do avatar que abre um menu, simplesmente não funciona, apenas eu dando um F5 ele volta a funcionar. Alguém sabe o que pode ser?

Estou fazendo da seguinte forma:

$("#login").click(function(){
  username=$("#username").val();
  if (username == "") {
    $("#add_erro_login").html("Digite o usu&aacute;rio cadastrado");
    $("#username").focus();
    return false;
  }

  password=$("#password").val();
  if (password == "") {
    $("#add_erro_login").html("Digite a senha cadastrada");
    $("#password").focus();
    return false;
  }

  $.ajax({
    type: "POST",
    url: "login.php",
    data: "name="+username+"&pwd="+password,
    success: function(html){
        if(html=='true')
        {
            document.form1.loading.style.visibility = "hidden";
            $("#login-form").fadeOut("slow");
            $("#background-on-popup").fadeOut("slow");
            $("#perfil").fadeOut("fast");
            $("#perfil").load("perfil.php");
            $("#perfil").fadeIn("fast");
         }
        else 
        {
            document.form1.loading.style.visibility = "hidden";
            $("#add_erro_login").html("Usu&aacute;rio ou Senha inv&aacute;lido");
        }
    },
    beforeSend:function()
    {
        document.form1.loading.style.visibility = "visible";
        $("#add_erro_login").html("");
    }
  });
  return false;
});

Topo do site, ande são exibidos os dados do usuário e o seu avatar

<div id="perfil">
  <?php 

  if(!isset($_SESSION)){
    session_start();
  }

  If(isset($_SESSION['avatar'])) {
      $avatar = $_SESSION['avatar'];
  }
  Else {
      $avatar = "usuario.png";
  }

  if(isset($_SESSION['usuario'])){
    echo "<div class='perfil-box'><div id='img-avatar'><a href='#'><img src='fotos/$avatar' width='40' height='40'></a></div><br>";
    echo "<div class='perfil-texto'><h1>Bem vindo,</h1><h2>" .$_SESSION['nome']. ' ' .$_SESSION['sobrenome']."</h2></div></div>";
    echo "<span class='seta-baixo'></span>";
  }
  ?>
</div>

O div id='img-avatar' é que mostra e oculta o menu

    $("#img-avatar").click(function(){

    if(document.getElementById("menu-perfil").style.display=="") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else if(document.getElementById("menu-perfil").style.display=="none") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else {
        document.getElementById("menu-perfil").style.display = "none";
        document.getElementById("seta-baixo").style.display = "none";
    }
});

Abs

2
  • Ou seja, seu problema é em $("#perfil").load("perfil.php")? O que o avatar tem a ver com isso? Pode mostrar uma versão reduzida do seu HTML? Confira o guia Como fazer exemplo Mínimo, Completo e Verificável.
    – brasofilo
    29/10/2014 às 14:50
  • Os componentes html que são atualizados depois da requisição Ajax, são na verdade recriados. Assim, as associações de funções JavaScript (por exemplo no evento onclick) são perdidas. Você tem que associar novamente a função ou associá-la de um jeito que ela seja refeita durante durante a recriação do componente html. Se você explicar melhor o teu código e mostrar também o código html, podemos ajudar mais.
    – Caffé
    29/10/2014 às 14:54

1 Resposta 1

1

A associação entre o evento click de #img-avatar e a função JavaScript que exibe o menu é perdida quando o componente é recriado (ele é recriado na requisição Ajax).

Para que a função seja novamente associada ao evento click depois de o componente ser recriado, atribua-a usando o método .on do JQuery.

Por exemplo:

$(document).on('click', '#img-avatar', function () {
    if(document.getElementById("menu-perfil").style.display=="") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else if(document.getElementById("menu-perfil").style.display=="none") {
        document.getElementById("menu-perfil").style.display = "inline";
        document.getElementById("seta-baixo").style.display = "inline";
    }
    else {
        document.getElementById("menu-perfil").style.display = "none";
        document.getElementById("seta-baixo").style.display = "none";
    }
});
3
  • Caffé, cara é isso mesmo!!! Muito obrigado...
    – Ricardo
    29/10/2014 às 16:43
  • Você sabe se o Session do PHP tb são perdidos? Porque agora, dentro desse menu, tem um tópico pro usuário mudar seu avatar, e sem dar o F5 ele esta trazendo o $_SESSION['usuario'] como VAZIO. Tem alguma relação?
    – Ricardo
    29/10/2014 às 17:09
  • Não tenho certeza, @Ricardo. Não manjo de PHP. Se você postar uma nova pergunta provavelmente a comunidade poderá ajudar.
    – Caffé
    29/10/2014 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .