Need some help!!! it's web message system. I click on the button to make ajax call to return data and a popup comes on the screen where users can message other users. Then I have a getMessages function to retrieve data to display the conversation if exists inside div class chat-box-body. Problem is: On the data returned I have php echoing messageID on input submit #send data-message="messageID", and I need get this value from php to make another ajax call get constantly update on the conversation every 2 sec. any help would be too much appreciated!!! thank you!
message.js file
$(document).on('click', '#directMsg', function(){
user_id = $(this).data('user');
$.post('http://localhost/core/ajax/messages.php', {directChatBox:user_id}, function(data) {
$('.popup-kamppo').html(data);
messageID = $(this).data('message');
//lastInsertMsg = '';
});
// Function to refresh the chatbox every five seconds
getMessages = function() {
//user_id = $(this).data('user');
messageID = $(this).data('message');
//lastInsertMsg = '';
if (messageID == '' || messageID == 0) {
messageID = lastInsertMsg;
} else {
messageID = messageID;
}
$.post('http://localhost/core/ajax/messages.php', {updateChatBox:messageID}, function(data) {
$('.chat-box-body').html(data);
});
}
// timer = setInterval(getMessages, 10000);
getMessages();
});
$('.close-popup-onclick').click(function(){
clearInterval(timer);
$('.chat-box').hide();
});
});
message.php jax file
if (isset($_POST['directChatBox']) && !empty($_POST['directChatBox'])) {
$user_id = $_SESSION['user_id'];
$messageTo = $_POST['directChatBox'];
$message = $messageObj->checkDirectConversation($user_id, $messageTo);
$user = $getFromUser->userData($user_id);
?>
<div class="chat-box">
<div class="chat-box-wrapper">
<div class="chat-box-inner">
<div class="chat-box-h">
<label class="l-left" for="message-send">
<span class="message-close-arrow"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
</label>
<div class="chat-box-title">
<div class="chat-box-img">
<img src="<?php echo BASE_URL.$user->profile_image; ?>">
</div>
<span>Mensagens</span>
</div>
<label class="l-right">
<span class="message-close-popup"><i class="fa fa-times close-popup-onclick" aria-hidden="true"></i></span>
</label>
</div>
<div class="chat-confirmation-box">
<h3>Voce tem certeza que deseja apagar esta mensagem??</h3>
<button class="cancel-del" value="cancel-del">cancelar</button>
<button class="del-msg" value="del-msg">Apagar</button>
</div>
<div id="chatBox" class="chat-box-body">
</div>
<div class="main-msg-footer">
<div class="main-msg-footer-inner">
<ul>
<li><textarea id="msg" name="msg" placeholder="Mande a sua mensagem!"></textarea></li>
<li><input id="msg-upload" type="file" value="upload"/><label for="msg-upload"><i class="fa fa-camera" aria-hidden="true"></i></label></li>
<li><input id="send" type="submit" value="Enviar" data-user="<?php echo $messageTo; ?>" data-message="<?php echo $message->messageID; ?>"/></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php
}