Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Dyrhoi .
Dyrhoi .
3,173 Points
Posted by Dyrhoi .
Dyrhoi .
3,173 Points

AJAX Appending instead of using .HTML for my chat.

Hello Guys,

  • So basically, my chat right now works like this:
  • Every 2nd secound it checks for my PHP file, loadchat.php.
  • Loadchat.php will get every row that is newer than their session.
  • It then replaces all current data in my div: #chatbox by using .html() function.

Now here is the deal. This seems very resource heavy, to load all the rows again and again and again. I know there is a way to optimize this, by using .append() function.

All though, I can't seem to wrap my head around it.

I need to make some kind of a counter, or a timestamp when the last message was loaded to check if there is newer content (rows) than since last time it loaded, if there is, append that new content.

If I replace the .html function with .append, I will just keep getting the same messages over and over again, as right now.

How would I go about making this?

Thanks in advance.

 //AJAX Timeout Loop Load Chat Function:
 function loadChat() {
    $.ajax({
        method: 'POST',
        url: 'ajax/load_chat.php',
        success: function(data) {
            $('#chatbox').html(data);
            //console.log($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight());
            //console.log($('#chatbox').scrollTop());
             if(atBottom) {
                $("#chatbox").stop().animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 500);
            }
        },
    });
}
LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

The question has been altered to display the code correctly.

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Hmmm, append should work.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>

<div id="chat1"></div>
<div id="chat2"></div>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

var chatMonitor1 = window.setInterval(html, 2000);
var chatMonitor2 = window.setInterval(append, 2000);

//Foo
function html() {
  $('#chat1').html('Foo ');
}

//Bar Bar Bar Bar Bar Bar...
function append() {
  $('#chat2').append('Bar ');
}

</script>
</body>
</html>

Set your load_chat.php file to grab the newest records from you database by a timestamp or key and just return the new records. 

$query = "SELECT author, post, id, timestamp FROM chatDB WHERE id > $lastPostId";

Then append them. I'm not seeing a reason why that shouldn't work.