Problema com ajax
bom e o seguinte, estou aprendendo a usar javascript, entao tentei criar um script que funcionaria como chat, a pessoa digita alguma coisa, entao o javascript chama o arquivo php para salvar os dados no mysql, mesma coisa para visualizar mensagens, script:
index.html
<title>Site de teste</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<form action="javascript:;" class="form_chat">
<input maxlength="100" type="text" placeholder="O que há em sua mente?" class="input_chat" style="width:155px" />
<input type="submit" value="Enviar" />
</form>
<table border="0" class="chat"></table>
<a href="" class="load_chat">Carregar mais</a>
main.php
<?php
mysql_connect("127.0.0.1", "andre", "senha");
mysql_select_db("db_novo_site");
switch($_POST["action"])
{
case "submit_chat_text":
mysql_query("INSERT INTO messages VALUES(NULL, '".$_POST["chat_text"]."')" );
case "list_messages":
{
if($_POST["id"] != -1)
echo is_array($query = mysql_fetch_row( mysql_query("SELECT message FROM messages WHERE id = '".$_POST["id"]."'") ) )? array_pop($query) : "";
else
echo mysql_num_rows( mysql_query("SELECT message FROM messages") );
}
}
?>
js/main.js
var class = "chat"
var message_pos
$(document).ready( function()
{
$(".input_" + class).focusin( function()
{
$(this).animate({"width" : "220px"}, 200)
})
$(".input_" + class).focusout( function()
{
if( $(".input_" + class).val() == "")
$(this).animate({"width" : "155px"}, 200)
})
$(".form_" + class).submit( function()
{
submit_chat_text($(".input_" + class).val(), true, true)
$(".input_" + class).val("")
})
$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: -1} }).done( function(num)
{
for(message_pos = num; message_pos > (num - 7); message_pos--)
{
if(message_pos == 0)
{
$(".load_" + class).html("")
break
}
$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: message_pos} }).done( function(msg)
{
submit_chat_text(msg)
})
}
})
$(".load_" + class).click( function(){
$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: -1} }).done( function(num)
{
var i
for(i = message_pos; message_pos > (i - 7); message_pos--)
{
if(message_pos == 0)
{
$(".load_" + class).html("")
break
}
$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: message_pos} }).done( function(msg)
{
submit_chat_text(msg)
})
}
})
return false
})
})
function submit_chat_text(text, save_msg, inverse_text){
if(text == "")
return
var old_text = $("." + class).html()
if(inverse_text){
$("." + class).html("<tr><td>" + text + "</td></tr>")
$("." + class).append(old_text)
}else
$("." + class).append("<tr><td>" + text + "</td></tr>")
if(save_msg)
$.ajax({url: "main.php", type: "POST", data: {action: "submit_chat_text", chat_text: text} })
}
sql:
CREATE TABLE `messages` (
`id` smallint(10) unsigned NOT NULL auto_increment,
`message` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
)
estou usando o jQuery v1.7
aparentemente o script parece nao ter erros, mais as vezes as mensagens saem fora de ordem, alguem sabe resolver isto?
Discussão (4)
Carregando comentários...