CODEWITHSUNDEEP
phpjqueryajaxmysqli
Bahriddin Abdiev
Bahriddin Abdiev

Reputation: 338

How to update <div> in every second with jQuery AJAX?

I'm trying to create simple chat and need to update chat div in every second. Here's div:

<div class="left">
        <p>
            <?php
                //Chat dialogini MB'dan o‘qib beradi
                $result = $mysqli->query("SELECT
                    users.nick,
                    text.text
                    FROM
                    text
                    INNER JOIN users ON users.user_id = text.user_id
                    ORDER BY
                    text.chat_id ASC");

                //echo $result = myquery("SELECT * FROM text");
                while ($row = $result->fetch_assoc()) {
                    echo "<span class='user'>" . $row["nick"] . "</span>" . ": " . $row["text"] . "<br />";
                }
            ?>
        </p>
    </div>

Here's AJAX code:

$( document ).ready(function() {
        var auto_refresh =  function () {
            $('.left p').load("add_text.php", function(){
            setTimeout(auto_refresh, 800);
            }).fadeIn();
        }
        auto_refresh();
    });

add_text.php redirects again to index.php:

 <?php
session_start();
require "php/config.php";
//Ma'lumotlar bazasi bilan bog‘lanish: BOOL = con funksiya
$mysqli = new mysqli($config['DB_HOST'], $config['DB_USERNAME'], $config['DB_PASSWORD'], $config['DB']);
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

if(!empty($_POST['chat-text']) || !ctype_space($_POST['chat-text'])) { 
    $mysqli->query("INSERT INTO `text` (`user_id`, `text`) 
                    VALUES ('" . htmlspecialchars($_SESSION['id']) . "', '"
                     . htmlspecialchars($_POST['chat-text']) . "')");
}

    header("Location: http://chat.uz/index.php");
    exit

?>

But updating is not working. Help, please.

Upvotes: 0

Views: 556

Answers (1)

jeroen
jeroen

Reputation: 91734

The way you set it up will not work.

If the redirect would actually work (I doubt it) and index.php is the main page that contains your header and footer, putting all of its contents in your .left p html element will lead to extremely invalid html and multiple .left p elements as you add one after 800 miliseconds, 2 more after 1600 miliseconds, 4 more after 3200 miliseconds, etc. etc.

That will blow-up your server as they all start making their ajax requests, adding more elements, making more simultaneous ajax requests.

Note that you are not actually redirecting when you use ajax, you just load whatever html gets returned from your ajax request in .left p.

You should return just the results from your query directly as json or html and process these results in your javascript (in the case of json).

I would replace the header redirect at the end of your php script with something like:

echo json_encode($mysqli->fetch_all());
exit;

and change the load method for another ajax method that allows you to process the results.

Upvotes: 1

Related Questions