За последние 24 часа нас посетили 17643 программиста и 1717 роботов. Сейчас ищут 911 программистов ...

Обновление, блока по событию.!

Тема в разделе "JavaScript и AJAX", создана пользователем Maxsim_Smolim, 18 окт 2014.

  1. Maxsim_Smolim

    Maxsim_Smolim Новичок

    С нами с:
    18 окт 2014
    Сообщения:
    1
    Симпатии:
    0
    Как сделать так что бы, контейнер, или чат лист, обновлялся по нажатию на 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>
     
  2. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    Re: Здравствуйте, а как сделать.!

    подпись удалите.

    а по теме - ajax смотрите.