Dica para solução (PHP + jQuery + Ajax)
Boa noite galera,
to fazendo um sistema de chat...
fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...
consegui fazer tudo atualizar com ajax + php + mysql...
o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...
tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...
mesmo não tendo mensagens novas ele vai pro fim..
alguem tem uma solução ou dica?
segue código:
function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,
to fazendo um sistema de chat...
fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...
consegui fazer tudo atualizar com ajax + php + mysql...
o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...
tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...
mesmo não tendo mensagens novas ele vai pro fim..
alguem tem uma solução ou dica?
segue código:
function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,
to fazendo um sistema de chat...
fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...
consegui fazer tudo atualizar com ajax + php + mysql...
o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...
tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...
mesmo não tendo mensagens novas ele vai pro fim..
alguem tem uma solução ou dica?
segue código:
function inicia_chat(){
var form = $('#dados_atendimento');
form.submit(function(){
return false;
});
form.ajaxSubmit({
url:"crud.php",
data: {acao: "iniciar_chat"},
success: function(resposta){
if(resposta == 0){
$("#mensagens_dados_atendimento").attr("class","");
$("#mensagens_dados_atendimento").addClass("aviso");
$("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!");
$(".mensagens_dados_atendimento").fadeIn("fast");
}else if(resposta == 1){
$("#mensagens_dados_atendimento").attr("class","");
$("#mensagens_dados_atendimento").addClass("erro");
$("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
$(".mensagens_dados_atendimento").fadeIn("fast");
}else if(resposta == 2){
$("#mensagens_dados_atendimento").attr("class","");
$("#mensagens_dados_atendimento").addClass("sucesso");
$("#mensagens_dados_atendimento").text("Iniciando atendimento...");
$(".mensagens_dados_atendimento").fadeIn("fast");
window.setTimeout(function(){
form.fadeOut("fast");
$("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde...");
$("#carregando_chat").fadeIn("fast");
window.setInterval(function(){
$.ajax({
type: "POST",
url: "crud.php",
data: { acao: 'verifica_atendente' },
success: function ( resposta ){
if(resposta == 'erro'){
form.fadeIn("fast");
$("#barra_verde p").html("Preencha seus dados para iniciar o atendimento.");
$("#carregando_chat").fadeOut("fast");
$("#mensagens_dados_atendimento").attr("class","");
$("#mensagens_dados_atendimento").addClass("erro");
$("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
$(".mensagens_dados_atendimento").fadeIn("fast");
}else if(resposta == 0){
}else if(resposta != 'erro' && resposta != 0){
var result = resposta.split("&");
var nomeAtendente = result[0];
var dataInicio = result[1];
var horaInicio = result[2];
$("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>.");
$("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>.");
$("#carregando_chat").fadeOut("fast");
$("#chat_online").fadeIn(500);
}
}
});
verifica_style_chat();
}, 1000);
}, 2000);
}
}
});
}
function verifica_style_chat(){
var chat = $("#chat_online").attr("style");
if(chat == 'display:none'){
}else if(chat == ''){
atualiza_chat();
}
}
function atualiza_chat(){
window.setInterval(function(){
$.ajax({
type: "POST",
url: "crud.php",
data: { acao: 'atualiza_chat' },
success: function ( resposta ){
$("#chat").html(resposta);
var chatScroll = $('#chat_scroll').height();
$('#chat_scroll').scrollTop(chatScroll);
}
});
}, 5000);
};
</script>Discussão (1)
Carregando comentários...