Before Hello
I have this code for a chat and what happens is that every time I open a new chat retains the previous ones I have already searched for the error but I do not see it if there is someone who can see help.
CODE BOTTON
<a data-toggle="modal" data-target="#view-modal" data-id="11" id="getUser" class="chat__friend" info="This is some information for our tooltip."> </a>
CODE MODAL
<div id="view-modal" class="modal_fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close_modal_chat" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-body">
<div id="modal-loader" >
<img class="img_modal" src="./img/loading_data.gif"><br>
<br>
<button type="button" class="btn_modal" data-dismiss="modal">Close</button>
</div>
<!-- content will be load here -->
<div id="dynamic-content"></div>
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
<script>
$(document).ready(function(){
$(document).on('click', '#getUser', function(e){
e.preventDefault();
var uid = $(this).data('id'); // it will get id of clicked row
$('#dynamic-content').html(''); // leave it blank before ajax call
$('#modal-loader').show(); // load ajax loader
$.ajax({
url: 'http://localhost/new/chat_user.php',
type: 'POST',
data: 'id='+uid,
dataType: 'html'
})
.done(function(data){
console.log(data);
$('#dynamic-content').html('');
$('#dynamic-content').html(data); // load response
$('#modal-loader').hide(); // hide ajax loader
})
.fail(function(){
$('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
$('#modal-loader').hide();
});
});
});
</script>
CODE CHAT
<?php
require_once 'conectarbd.php';
require ("function.php");
if(isset($_POST["id"]))
{
$output = '';
$query = "SELECT * FROM user WHERE userID='".$_POST["id"]."'";
$result = mysql_query($query);
while($data = mysql_fetch_array($result))
{
$user_id = $data['userID'];
$output = '
<div class="all_content_chat">
<div class="wall_messages_content_user">
<div class="name_user_post_modal">
<img class="modal_img" src="./img/avatar_default.png" alt="">
<div>
<p class="friend__name">'.$user_id.'</p>
</div>
</div>
<div class="wall_messages_content_chat" id="messages_private_chat"></div>
</div>
<div class="wall_messages_user_text">
<div class="messages_chat_box">
<input class="input_messages_chat_user" id="messages" type="text" placeholder="Type Message Hit Enter"></input>
<a class="message__send" onclick=""></a>
</div>
</div>
</div>
';
}
echo $output;
}
// '.get_emoticons_messages().'
?>
<!-- **Javascript jquery, ajax Of chat** -->
<script type="text/javascript">
////////////////// scroll a messages new
$(document).ready(function(){
var out, isScrolledToBottom;
out = document.getElementById("messages_private_chat"); // outer container of messages
// initial load of chat ////**Chat post id
$('#messages_private_chat').load("messages_private_load.php?id=<?php echo $user_id; ?>", function() {
out = document.getElementById("messages_private_chat"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
scrollToBottom(true);
});
// check for chatter every second
setInterval(function() {
isScrolledToBottom = checkIfScrolledBottom();
$('#messages_private_chat').load("messages_private_load.php?id=<?php echo $user_id; ?>", function() {
out = document.getElementById("messages_private_chat"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
scrollToBottom(isScrolledToBottom);
});
},1000);
function checkIfScrolledBottom() {
// allow for 1px inaccuracy by adding 1
return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
}
function scrollToBottom(scrollDown) {
if (scrollDown)
out.scrollTop = out.scrollHeight - out.clientHeight;
}
//setTimeout(function() { $("#chat-feed").scrollTop($("#chat-feed")[0].scrollHeight);}, 1200);
});
</script>