Prevent multiple ajax calls on enter press

Question

I am using a php chat plugin. Problem with this chat plugin is it works great when message is send through button press but when its set to enter press it invokes too many ajax calls. Sometimes it sends single message and sometimes 4 5 messages are being sent . I have tried all the solutions like defining a variable to have a check on it but i am not sure what i am missing here is the snippet of function used for sending message

$("#text-messages-request").on("focus", "textarea.type-a-message-box", function() {
    var ID = $(this).attr("id");
    var URL = $.base_url + 'ajax/add_chat_ajax.php';

    $('div.message-btn-target').html('<a href="#" id="' + ID + '" class="btn btn-default btn-sm send-message"><i class="glyphicon glyphicon-send"></i> ' + $.sendButton + '</a>');
    //$('#type-a-message').remove();    

    user_is_typing(this, ID);

    $(this).on('blur', function() {
        stop_type_status();
    });

    // Input Handler
    if ($.enterIsSend == true) {
        var running = false;
        $(document).bind("keypress", function(e) {
            if (e.which == 13) {
                if (running === false) {
                    running = true;
                    send_message(ID, URL);
                }
                return false;
            }
        });

        $("a.send-message").on("click", function() {
            if (running === false) {
                running = true;
                send_message(ID, URL);
                $(".type-a-message-box").focus();
            }
        });
    } else {
        $("a.send-message").on("click", function() {
            send_message(ID, URL);
            $(".type-a-message-box").focus();
        });
    }
    return false;
});

Please help i am stuck on this for days . There is this real time chat function which initiates when both users are online and it keeps calling itself after every 7 secs

setInterval("realtime_chat()", 7000);
function realtime_chat()
{   
last_msg_id = $(".msg-div").last().attr("id");

var ID = $("#text-messages").attr("rel");

var R_URL = $.base_url + 'ajax/refresh_unreadMessages_ajax.php';
var URL = $.base_url + 'ajax/chat_realtime_ajax.php';
var I_URL = $.base_url + 'ajax/chat_last_id.php';

var dataString = 'id='+encodeURIComponent(ID);


$.post(URL, dataString, function(html) {
    var html_response = $(html);
    var new_msg_id = html_response.attr("id");

    if(new_msg_id !== last_msg_id)
    {
        $("#text-messages").append(html);

    }

})


// deal with update counter and typing status
$('ul#messages-stack-list li').each(function() {
    cID = $(this).attr('id');
    cString = 'id='+cID;
    type_status(cID);
    update_unMsg_counter(R_URL, cString, cID, 'realtime');
});

title_unread_counter();

return false; }

Its just to append what if there is some new message stored in database. and here is my html of textbox

<div id="type" class="collapse border-top">
<textarea type="text" class="form-control border-none" id="type-a-message-  box" placeholder="Write the message"></textarea>
</div>

function for getting textarea content is at top and the send message function is as follows

function send_message(ID, URL)
{
    var textarea = $('textarea.type-a-message-box').val();
    if ($.trim(textarea).length == 0) 
    {
        alert($.emptyBox);
    } else {
        $.ajax({
            type: "POST",
            url: URL,
            data: {id: ID, message: textarea},
            cache: false,
            beforeSend: function() { $('#loadingDiv').show(); },
            error: function() { $('#loadingDiv').hide(); $('#errorDiv').html('<p>'+$.ajaxError+'</p>'); },
            success: function(html) {
                $('#loadingDiv').hide();
                $("p.no-messages").remove();
                $("#text-messages-request").html(html);
                $("#text-messages").attr("rel", ID);
                stop_type_status();
                $(".type-a-message-box").focus();

            }
        });
    }
}

Hope it will help in formulating the solution

Answer 1

Rather than keypress use Keyup event.