如何通知数据没有刷新？

Question

I wrote this code:

$('.actionButton').click(function(){
            var buttonValue = $(this).val();
            var userId = '<?php echo $_SESSION['id']; ?>';
            console.log(userId);
            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {
                    'action': buttonValue,
                    'id' : userId
                },
                dataType: 'json',
                success: [ location.reload()]
            });
        });

With these buttons:

<?php
                if(!isset($_GET['messages']) || $_GET['messages'] == 'inbox')
                    echo '<div class="card-header">
                    Messages<button class="btn btn-sm btn-success pull-right actionButton" title="Mark all as read" value="readAll"><i class="fa fa-envelope-open"></i></button>
                    <button class="btn btn-sm btn-default pull-right actionButton" id="buttonAlignment" value="unreadAll" title="Mark all as unread"><i class="fa fa-envelope"></i></button>
                </div>';
                else{
                    echo '<div class="card-header">
                    Messages<button class="btn btn-sm btn-danger pull-right actionButton" value="removeAll" title="Remove all"><i class="fa fa-trash"></i></button>
                </div>';
                }
                ?>

And this PHP script to execute on Ajax call:

require_once '../includes/includeDatabase.php';

if(isset($_POST['action'])){
    $id = $_POST['id'];
    switch($_POST['action']){
        case 'removeAll':
            removeAll($database, $id);
            break;
        case 'readAll':
            readAll($database, $id);
            break;
        case 'unreadAll':
            unreadAll($database, $id);
            break;
        default:
            break;
    }
}

function removeAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "DELETE FROM messages WHERE userId = $id AND messageDeleted = 1");
}
function readAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "UPDATE messages SET messageRead = 1 WHERE userId = '$id'");
}
function unreadAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "UPDATE messages SET messageRead = 0 WHERE userId = '$id'");
}

I know I should bind the $id to query to avoid SQL injection before anyone starts complaining about that. That's not the question for now.

My question: This code is fully functioning but it's very anyoning that when I click the remove all button or read All or unread All. That my page refreshes, I know this happens because I tell ajax to do location.reload() but if I don't do this my table won't know the data has changed.

How can I make it so that when I click the button my page will know that the data is changed?

Answer 1

Admittedly not the best way to do this, but a simple solution would be to just echo whatever action you did on the php file like this:

if(isset($_POST['action'])){
    $id = $_POST['id'];
    switch($_POST['action']){
        case 'removeAll':
            removeAll($database, $id);
            break;
        case 'readAll':
            readAll($database, $id);
            break;
        case 'unreadAll':
            unreadAll($database, $id);
            break;
        default:
            break;
    }
    die($_POST['action']);
}

Now your ajax caller can pickup on this like so:

      $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: {
                'action': buttonValue,
                'id' : userId
            },
            dataType: 'json',
            success: function (response)
            {
                if(response =='removeAll')
                {
                    //remove all remove the table by emptying the div or something
                }
                elseif(response =='readAll')
                {
                    //perform read all action
                }
                esleif(response =='unreadAll')
                {
                    //perform unreadall action
                }

            }
        });

To update the table, I woudl suggest using datatable plugin for jquery that allows you to add/remove rows and much more.