nonstop328 nonstop328 - 6 months ago 32
jQuery Question

How to let load more data append on top?

I have done the load more result but the load result will append at the bottom. How do I make it append on the top?

Because the message I send is to go to the bottom so I want the old message to be appended on top.

Here is my html:

<form name ="chatroom">

<div class="count-user-online">
<?php echo $row ?>
</div>
<div class="chatroom-upper-container" id="chatroom-upper-container">
<input type="hidden" id="result_no" value="10">
<div id="inner">
Loading Message....<img src="../images/loading.gif"/>
</div>


</div>
<input type="button" id="load" value="Load More Results">
<div class="chatroom-lower-left-container">
<textarea class="message-setting" id="area-message" placeholder="type text" name= "msg"></textarea>
</div><div class="chatroom-lower-right-container">
<button type="button" class="btn sendmessage-btn" onclick= "submitChat()">Send</button>
</div>

</form>


Here is my js:

$(document).ready(function(){
$("#load").click(function(){
loadmore();
});
});

function loadmore()
{
var val = document.getElementById("result_no").value;
$.ajax({
type: 'post',
url: 'chatloadmore.php',
data: {
getresult:val
},
success: function (response) {
var content = document.getElementById("chatroom-upper-container");
content.innerHTML = content.innerHTML+response;

// We increase the value by 2 because we limit the results by 2
document.getElementById("result_no").value = Number(val)+10;
}
});
}


Here is my loadmorefile.php:

<?php

include '../config.php';
include'login.php';

$no = $_POST['getresult'];
$username = $_SESSION['username'];

$sql1= "SELECT * FROM (
SELECT * FROM logs ORDER BY id DESC LIMIT $no,40
) sub
ORDER BY id ASC ";

$result1 = mysqli_query($connection,$sql1);

while($extract = mysqli_fetch_array($result1)){
$color = ($extract['username'] == $username) ? ' #F5F5F5' : '#DCDCDC';
$position = ($extract['username'] == $username) ? 'right' : 'left';
echo "
<div class='left-wrap-message' style='background-color:$color; float:$position;'>
<p style='text-align:$position; margin:0;'>". $extract['username']. " : </p>
<p style='text-align:$position; margin:0; text-align:left;'> " . $extract['msg']. "</p></div>
<div class='msg-dateandtime' style='text-align:$position;'> " . $extract['date']. "</div>";
}

?>

Answer

Instead of

content.innerHTML = content.innerHTML+response;

Do a

content.innerHTML = response + content.innerHTML;