Maxsim_Smolin
Новичок
Как сделать так что бы, контейнер, или чат лист, обновлялся по нажатию на submit ну только тогда когда пользователь отправляет сообщение, а не авто таймером, там например в интервалом 3 секунды.!
Вот пример скрипта.!
$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > p");
//functions
function updateShoutbox(){
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST", url: "insert.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});
}
//check if all fields are filled
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
//Load for the first time the shoutbox data
updateShoutbox();
//on submit event
$("#form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Отправляю..." });
$("#send").blur();
//send the post to list.php
$.ajax({
type: "POST", url: "list.php", data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data){
messageList.html(data.responseText);
updatelist();
//reactivate the send button
$("#send").attr({ disabled:false, value:"Отправить" });
}
});
}
else alert("Пожалуйста, представьтесь и напишите сообщение");
//we prevent the refresh of the page after submitting the form
return false;
});
});
Вот <html>
<div id="container">
<div class="content">
<h1>Сообщения
</h1>
<div id="loading"><img src="css/images/loading.gif" alt="Загрузка..." /></div>
<p>
</div>
</div>
<form method="post" id="form">
<table>
<tr>
<td><label>Ваше имя</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
</tr>
<tr>
<td><label>Сообщение</label></td>
<td><input class="text" id="message" type="text" MAXLENGTH="255" /></td>
</tr>
<tr>
<td></td>
<td><input id="send" type="submit" value="Отправить" /></td>
</tr>
</table>
</form>
Вот пример скрипта.!
$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > p");
//functions
function updateShoutbox(){
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST", url: "insert.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});
}
//check if all fields are filled
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
//Load for the first time the shoutbox data
updateShoutbox();
//on submit event
$("#form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Отправляю..." });
$("#send").blur();
//send the post to list.php
$.ajax({
type: "POST", url: "list.php", data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data){
messageList.html(data.responseText);
updatelist();
//reactivate the send button
$("#send").attr({ disabled:false, value:"Отправить" });
}
});
}
else alert("Пожалуйста, представьтесь и напишите сообщение");
//we prevent the refresh of the page after submitting the form
return false;
});
});
Вот <html>
<div id="container">
<div class="content">
<h1>Сообщения
</h1><div id="loading"><img src="css/images/loading.gif" alt="Загрузка..." /></div>
<p>
</div>
</div>
<form method="post" id="form">
<table>
<tr>
<td><label>Ваше имя</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
</tr>
<tr>
<td><label>Сообщение</label></td>
<td><input class="text" id="message" type="text" MAXLENGTH="255" /></td>
</tr>
<tr>
<td></td>
<td><input id="send" type="submit" value="Отправить" /></td>
</tr>
</table>
</form>