Как сделать так что бы, контейнер, или чат лист, обновлялся по нажатию на submit ну только тогда когда пользователь отправляет сообщение, а не авто таймером, там например в интервалом 3 секунды.!
Вот пример скрипта.!
CODE ( javascript):
скопировать код в буфер обмена
$(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>
CODE ( 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>
(Отредактировано автором: 21 Октября, 2014 - 22:36:00)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Описание: Так чтобы, после отправки сообщения страница не обновлялась, а лишь обновлялся блок, транслита допустим
