refresh div to retrieve information from database without refreshing wholepage

Question

I would like to refreash the div auto every 2 seconds without reloading the page how can i do this with jquery i did try some solutions but they did not work if can help that would be great

conversation.php

<?php
        $hash =$run_con['hash'];
        while($run_message = mysql_fetch_assoc($message_query))
            {

                 $from_id = $run_message['from_id'];
                 $message = $run_message['message'];

                $user_query = mysql_query("SELECT `username` FROM `users` WHERE `id`='$from_id'");
                $run_user = mysql_fetch_array($user_query);
                $from_username = $run_user['username'];


                echo "<div id='auto'<p><b>$from_username</b><br />$message</p>  </div>"; //reload this part every 2 seconds


            }
    ?>

<script>
    $(document).ready(function(){
    setInterval(function(){
    $("#auto").load('conversation.php'+$hash)
    }, 2000);
    });
 </script>

You can do it with jquery. And if your solutions didn't work - you've been doing it wrong. But cauze you don't show us your js-code - we can do nothing, sorry. — u_mulder, Nov 29 '15 at 11:07
Not sure if I got you currectly. But you can set a timer with jQuery that calls a PHP function using Ajax and changes the div's values. — sinaza, Nov 29 '15 at 11:08

score 3 · Answer 1 · edited Nov 30 '15 at 03:28

3

Change this line

$("#auto").load('conversation.php'+$hash)}, 2000);

to this

$("#auto").load('conversation.php'+'<?php echo $hash?>')}, 2000);

Because your $hash is PHP variable, but you are not inside a PHP block, you are unable to access it.

edited Nov 30 '15 at 03:28

Moshe Katz

15,992
7
69
116

answered Nov 30 '15 at 03:21

anonymous

31
1

score 2 · Accepted Answer · edited May 23 '17 at 12:13

In order to make a query every 2 seconds that doesn't refresh the page itself, you'll need to use jQuery and AJAX. For this to work, you should create a file of it's own with the query that is being called every 2 seconds.

Let's start with the jQuery.

For this script to actually work, you'll need to include jQuery. Inside the HTML <head></head>-tags on your page, include the following line

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

Without this, you can't run any jQuery functions. Now that you have included this, you can build the actual script.

To explain a bit on how this works, I've created a function called ajaxCall. This function executes the script inside ajax.php, and when it's successful with that, it replaced the output from ajax.php with the content on your div that has an id div1, on the current page. This action is performed once when the page is loaded (ajaxCall();) and every 2 seconds after that.

<script>
function ajaxCall() {
    $.ajax({
        url: "ajax.php", 
        success: (function (result) {
            $("#div1").html(result);
        })
    })
};

ajaxCall(); // To output when the page loads
setInterval(ajaxCall, (2 * 1000)); // x * 1000 to get it in seconds
</script>

Place this script in the same file where you want the div1 to be reloaded (of course you can rename it as whatever you please, just be persistent).

So your conversation.php should now have...

included the jQuery libary
the script to perform the AJAX-call
a div with id "div1" (<div id="div1"></div>), where the contents of ajax.php will be put.

As for your ajax.php file, this is where you'll actually perform your query. For your case, that would be where you put

<?php
mysql_connect("localhost", "user", "pass");
mysql_select_db("database");

// Other variables needed to perform the query, such as $message_query
// needs to be here as well

while ($run_message = mysql_fetch_assoc($message_query)) {
    $from_id = $run_message['from_id'];
    $message = $run_message['message'];

    $user_query = mysql_query("SELECT `username` FROM `users` WHERE `id`='$from_id'");
    $run_user = mysql_fetch_array($user_query);
    $from_username = $run_user['username'];

    echo "<p><b>$from_username</b><br />$message</p>";
}
?>

You should stop using mysql_* functions if you can, as they are deprecated and no longer maintained. In addition, usage of mysqli_* or PDO will enable usage of prepared statements, so that you can prevent SQL-injection.

refresh div to retrieve information from database without refreshing wholepage

2 Answers2

Linked