Antes que Hola
Tengo este Codigo para un chat y lo que pasa es que cada vez que abro un chat nuevo conserva los otros anteriores ya he buscado el error pero no lo veo si hay alguien que pueda ver que me ayude.
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>