How to refresh a div every 5 seconds

Question

I am making a chat room for my website. I am using php and mysql to display and store the messages. I am trying to use Jquery and AJAX to refresh the page every 5 seconds. I have never used Jquery or AJAX before. Here is my Jquery and AJAX code.

                    <script type="text/javascript" src="jquery.js"></script>

                    <script type="text/javascript">                             
                    var auto_refresh = setInterval(
                    function(){
                    $('#message_display').load('show_messages_public.php');
                            }, 5000);
                    </script>

In the 'show_messages_public.php' page I have a function called 'show_messages()' how would I call this function from the AJAX and Jquery?

<?php
session_start();

function show_messages()
{
$mysql_host = "******";
$mysql_database = "*******";
$mysql_user = "*****";
$mysql_password = "*****";

$link= mysql_connect($mysql_host, $mysql_user, $mysql_password);

if (!$link) {
    die('could not connect:' . mysql_error());
}

$db_selected= mysql_select_db($mysql_database);

if (!$db_selected) {
    die('can\'t use' . $mysql_database . ':' . mysql_error());
}

$query= "SELECT * FROM public_chat ORDER BY time DESC LIMIT 2";
$result= mysql_query($query) or die(mysql_error());
while($row= mysql_fetch_array ($result)) {
    echo '<br/><font color="black">' .$row['time'] . "<br>" . '<b><big>' . '<font color="black">' . $row['user'] . ':' . '</big></b>' . " <br> " . $row['message'] .'</font>'; 
    echo "<br/><hr width=\"95%\"<br/>"/*"<hr width=\"90%\">"*/;
    }
}
?>

Read up on `setTimeout` function to do something every X (milli)seconds — PhD, Aug 18 '12 at 19:34
@Worm and how does the `show_messages_public.php` code look like post it aswell if u may — Breezer, Aug 18 '12 at 19:34
Please refer to a similar post [http://stackoverflow.com/questions/5681380/refresh-a-table-with-jquery-ajax-ever-5-seconds][1] [1]: http://stackoverflow.com/questions/5681380/refresh-a-table-with-jquery-ajax-ever-5-seconds — Conrad Lotz, Aug 18 '12 at 19:35

score 1 · Answer 1 · answered Aug 18 '12 at 19:45

When you have more than one function inside your php file you can do this:

You can POST parameters with the load function from jquery. So you can try this:

$('#message_display').load('show_messages_public.php', {showmsg: 'public'});

Inside your php:

switch($_POST['showmsg']) {
    case 'public':
        show_messages();
        break;
}

If you don't have more than one function, just call the code without a function:

<?php
session_start();

$mysql_host = "******";
$mysql_database = "*******";
$mysql_user = "*****";
$mysql_password = "*****";

$link= mysql_connect($mysql_host, $mysql_user, $mysql_password);

if (!$link) {
    die('could not connect:' . mysql_error());
}

$db_selected= mysql_select_db($mysql_database);

if (!$db_selected) {
    die('can\'t use' . $mysql_database . ':' . mysql_error());
}

$query= "SELECT * FROM public_chat ORDER BY time DESC LIMIT 2";
$result= mysql_query($query) or die(mysql_error());
while($row= mysql_fetch_array ($result)) {
    echo '<br/><font color="black">' .$row['time'] . "<br>" . '<b><big>' . '<font color="black">' . $row['user'] . ':' . '</big></b>' . " <br> " . $row['message'] .'</font>'; 
    echo "<br/><hr width=\"95%\"<br/>"/*"<hr width=\"90%\">"*/;
}
?>

I used the function in my html page to show the messages. In my html page I have something like

So I need the function. — Worm, Aug 18 '12 at 19:48
hmm and if you try to use `if(isset($_POST)) show_messages();` instead of the switch (outside the function). Than it should call the function when post is set. — WolvDev, Aug 19 '12 at 09:29

John Green · Answer 2 · 2012-08-18T19:41:22.370

0

You don't.

You need to put all of the flow control into your host web page, as you can't load external program flow from AJAX.

After your update, it looks like you're trying to call into PHP, not JavaScript.

The answer is simple: The idea is that your page will render the data, so just put show_messages() at the end of the page -- or, really.. just remove the function wrapper entirely.

edited Aug 18 '12 at 19:41

answered Aug 18 '12 at 19:35

John Green

13,241
3
29
51

score 0 · Answer 3 · answered Aug 18 '12 at 19:40

In the 'show_messages_public.php' page I have a function called 'show_messages()' how would I call this function from the AJAX and Jquery?

You wouldn't. Your PHP page should return data based on the parameteres passed via either a GET or POST request. For example, you could send in the following parameters:

startInt = 1
repeatTimes = 5
incrementIncrease = 3

Like this:

 $('#message_display').load('show_messages_public.php?startInt=1&repeatTimes=5&incrementIncrease=3');

And then in your PHP, you could return the result as plain text like this:

<?
    var startInt = $_GET['startInt'];
    var repeatTimes = $_GET['repeatTimes'];
    var incrementIncrease = $_GET['incrementIncrease'];

    var str = "";
    for (var i = startInt; i < repeatTimes * incrementIncrease + startInt; i += incrementIncrease) {
         str .= i."|";
    }

    echo str;
?>

This would return the following:

1|4|7|10|13|16|

I know that doesn't actually solve your problem, but it seems you need to learn the basics of AJAX.

To Actually Solve Your Problem:

You could try this code:

setInterval(function() {
    $('#message_display').load('show_messages_public.php?callfunc=true');
}, 5000);

And then in your PHP:

 if ($_GET['callfunc'] == "true")
     show_messages();

score 0 · Answer 4 · answered Aug 18 '12 at 19:43

0

You are not calling a function through AJAX but just executing remote address (URL) and then working with the response

answered Aug 18 '12 at 19:43

Petar Sabev

848
6
12

How to refresh a div every 5 seconds

4 Answers4