$('.chat_message').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
var to_user_id = $(this).attr('id');
var chat_message = $('#chat_message_'+to_user_id).val();
if (chat_message == ""){
toastr.error("Your message is empty");
return false;
}
var to_username = $('#to_username_'+to_user_id).val();
$.ajax({
url:"../controllers/insert_chat",
method:"POST",
data:{to_username:to_username, to_user_id:to_user_id, chat_message:chat_message},
success:function(data)
{
$('#chat_message_'+to_user_id).val('');
$('#chat_history_'+to_user_id).html(data);
}
})
return false;
}
});
Each time I press ENTER KEY, the page reloads and bootstrap modal disappears. modal_content += '<input name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" placeholder="Type your message here ..." type="text" class="form-control chat_message" autocomplete="off"><span class="input-group-btn"><button name="send_chat" id="'+to_user_id+'" class="btn btn-sm btn-info no-radius send_chat" type="button"><i class="ace-icon fa fa-share"></i>Send</button></span></div></div>';
$(document).on('click', '.send_chat', function(){
var to_user_id = $(this).attr('id');
var chat_message = $('#chat_message_'+to_user_id).val();
if (chat_message == ""){
toastr.error("Your message is empty");
return false;
}
var to_username = $('#to_username_'+to_user_id).val();
$.ajax({
url:"../../insert_chat",
method:"POST",
data:{to_username:to_username, to_user_id:to_user_id, chat_message:chat_message},
success:function(data)
{
$('#chat_message_'+to_user_id).val('');
$('#chat_history_'+to_user_id).html(data);
}
})
});
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
console.log( "\n".charCodeAt(0));
console.log( "\r".charCodeAt(0));
From novice to tech pro — start learning today.
Open in new window
suggests that you are dynamically adding those buttons (typically/most likely after the page has loaded), but this line:Open in new window
suggests that you are trying to bind to the keypress event as the page is loading. If this is the case, then when you are attempting to bind, the buttons do not exist on the page yet.instead of:
$('.chat_message').keypres
try binding to the document instead:
$(document).on('keypress',
On another note, you seem to have copied line 2 from your AJAX code block and pasted it on line 5 of your first code block. Those are not interchangeable because <input class="chat_message"> has attribute id="chat_message_USERID"; however, <button class="send_chat"> has id="USERID". So, you need to remove the "chat_message_" prefix from INPUT.chat_message:
Open in new window
Lastly, if the ENTER key is in fact just an alternative to the "Send Chat" button, then both should be POSTing to the same backend script. If that is the case, rather than duplicating the code on the keypress(), why don't you just trigger the click even on the "Send Chat"?
Open in new window