How to I refresh the chat using javascript?

Question

Okay, So I am trying to create a simple chat for my website but I don't know how to make it so when someone sends a message it will show on other peoples chat so for example I say hello on one browser but it does not show on another browser until I manually refresh the page.

I know there is AJAX to refresh the div of the chat but everything I tried does not seem to work and I don't know why.

Here is my index file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>    
<script type="text/javascript"> 
setInterval( refreshMessages, 1000 );
function refreshMessages(){
$.ajax({
url: 'chat.php',
type: 'GET',
dataType: 'html'
})
.done(function( data ) {
$('#chat').html( data ); // data came back ok, so display it
})
.fail(function() {
$('#chat').prepend('Error retrieving new messages..');
});
}
</script>

<div id="chat"></div>

It does not show the chat at all and I don't know why because the file is in the same folder as the index.php

if I put the chat code inside the index file it works fine.

Here is the chat.php file

`$messages = get_msg();
foreach($messages as $message) {
echo '<p><strong>' . $message['sender'] . ' - </strong></p>';
echo '<p>' . $message['message'] . '<br /><br />';
}`

this may help you http://stackoverflow.com/questions/21600166/auto-refresh-included-php-file-inside-a-div — Amar Singh, Jul 12 '16 at 13:11
Just so you know, this is going to be deadly on your webserver if you try it like this ;-). But that's one of the first things I did when Ajax was a possibility though. Ah good old IE6 days. — Mathijs Segers, Jul 12 '16 at 13:13
Look into websockets, because that is best practice for these kindof applications. Unless a 'just working' app is enough (e.g. just for testing or fiddling around). — Glubus, Jul 12 '16 at 13:16
If your server makes more than 1 second to respond, your code will just fail. Search for ajax long polling (using timeout, not interval!) if websockets isn't an option for you — A. Wolff, Jul 12 '16 at 13:18

score 0 · Answer 1 · answered Jul 12 '16 at 13:14

Set your interval in setInterval

setInterval( refreshMessages, 1000 );

function refreshMessages()
{
    $.ajax({
        url: 'chat.php',
        type: 'GET',
        dataType: 'html'
    })
    .done(function( data ) {
        $('#chat').html( data ); // data came back ok, so display it
    })
    .fail(function() {
        $('#msgs').prepend('Error retrieving new messages..'); // there was an error, so display an error
    });
}

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Because you are using jQuery 1.3:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

You cannot use done and fail. These are not available in jQuery 1.3.0

Use instead: success and error.

Referring to

A. Wolf comment try to take a look to how-do-i-implement-basic-long-polling

The corrected snippet only for the ajax call:

setInterval(refreshMessages, 1000);
function refreshMessages() {
  $.ajax({
    url: 'chat.php',
    type: 'GET',
    dataType: 'html',
    success: function(data) {
      $('#chat').html(data); // data came back ok, so display it
    },
    error: function() {
      $('#chat').prepend('Error retrieving new messages..');
    }
  });
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<div id="chat"></div>

edited May 23 '17 at 11:44

Community

1
1

answered Jul 12 '16 at 13:38

gaetanoM

41,594
6
42
61

still does not wanna load even though i'm tried so many different ways. even changing the version of jquery. like the problem is it literally does not want to load the file chat.php – Potato Jul 12 '16 at 13:48
I've put it to 10 seconds and still nothing. Only the form – Potato Jul 12 '16 at 13:52
@Potato You have to see at least the error message! If you do not see at least the error message, the problem is not dependent on ajax call. Try also to remove the timer and call the ajax on a button. – gaetanoM Jul 12 '16 at 13:57
you sir are amazing. Thank you very much i've been trying for hour and its now work! – Potato Jul 12 '16 at 14:01
Yes! sorry still new to this website – Potato Jul 12 '16 at 14:04

How to I refresh the chat using javascript?

2 Answers2