How to change html's <p> inner text from PHP?

Question

I'm trying to change a HTML element's inner text from PHP.. is this even possible? I am building a chat application for my website, (live chat) and I need to constantly update the chat by querying to a database, but I'm stuck on getting the element and changing its inner text from HTML from PHP. Thanks in advance.

<?php
if (isset($_POST['iChat'])){
    $db_address = 'localhost';
    $db_username = 'root';
    $db_password = '';
    $db_name = 'chat';
    $connection = mysqli_connect($db_address, $db_username, $db_password, $db_name);
    $message = $_POST['iChat'];
    $personaname = $_COOKIE['personaname'];

    if ($message != '' && $personaname != ''){
        $query = "INSERT INTO chat VALUES (null, '{$personaname}', '{$message}')";
    mysqli_query($connection, $query);
    }
}

function get(){
    $db_address = 'localhost';
    $db_username = 'root';
    $db_password = '';
    $db_name = 'chat';
    $connection = mysqli_connect($db_address, $db_username, $db_password,     $db_name);
    $query = "SELECT `sender`, `message` FROM chat";
    $result = mysqli_query($connection, $query);

    >>>> GET ELEMENT HERE <<<<<<

    return json_encode($result);
}
?>

Answer 1

To change content inside any element or at any moment or location on your website the easiest and probably best way would be an Ajax request.

With ajax requests you basically can send a post or get to your server to any given URL.

You can also pass data (variables/object). This way you can send any user generated data to your server and do something with it. (input fields for instance).

After the request has been made you have 3 callbacks: success , complete , error .

The complete is always fired no matter what after either the success or error callback. In the success callback you can return the result of your request (the value you return from your php file).

In the error callback you can notify the user that something went wrong, when for instance the request responded with bad request or bad gateway or time outs, 404/503 etc.

More info can be found here including some other usefull functions): http://api.jquery.com/category/ajax/

Example code:

jQuery(document).ready(function($){
    $.ajax({
        url: '?act=process',
        type: 'post',
        data: {
            id: $id,
            name:$name,
            description:$description
        },
        success: function (result) {
            $('.alert-success').show();
            console.log('Yay it worked');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('.alert-danger').show();
            console.log('Something went wrong');
        }
    });
});

Answer 2

I guess you are looking for Ajax

1. You may have a trigger button

2. Click the button, start ajax request (For example: Using jQuery ajax ) request your database data which return by your PHP code.

3. If the request is success, put the returning data into HTML element.

    document.getElementById("ElementID").innerHTML = "Data return by PHP!";