Update database, refresh the page to show changes, show a success message

Follow up question for:

Update database, reload page then show a success message

I have a table of articles, in each row is a button to activate / deactivate the article, along with other actions shown here:

The problem I was having:

If I did a standard AJAX call, I could append a success message to a div but it would not refresh the page. That's where document.location.reload(true); comes in, but now the page refreshes before the success message can show. Sure you could setTimeOut, but it seems a bit backwards to show a success message before you can see the result, so on to my method.

Note: All I/O is filtered with a function which I chose to leave out for ease of reading and error handling has not yet been implemented

The Ajax in articlelist.php:

This will post the data to articlecontrol.php to be processed, I've added a selector here because the controller also handles other requests i.e. Categories.

// ACTIVATE / DEACTIVATE WITH LINK
$(document).on("click",".active_button",function() {

    var articleID = $(this).attr("name");
    var active = $(this).val();
    var selector = $("#selector").attr("name");

    $.ajax({
    type: "POST",
    url: "controllers/articlecontrol.php",
    data: { articleID: articleID, active:active, selector: selector },
    success: function(data){
        document.location.reload(true);
    }
    });
});

I'll use the activate / deactivate PHP as the example in articlecontrol.php

If the database updated set the success info in $_SESSION['status'] ready for output on our table page:

```
if(isset($_POST['selector'])) {
$selector = $_POST['selector'];

// ACTIVATE / DEACTIVATE ARTICLE w/Button
if(isset($_POST['active']) && $selector === 'article') {
$where = array('article_id' => $_POST['articleID']);

$active = ($_POST['active'] == 'YES') ? '0' : '1';

$update = array('article_active' => $active);

if ($database->update('wcx_articles', $update, $where)) {
if

Storing HTML in session leads to tight-coupling

Having the HTML stored in the server- side session is a violation of the Single-Responsibility principle. It couples the front-end display output in the back-end code.

Consider the scenario where translation/localization is needed. A simpler approach would be to store a simple dictionary in the session like $_SESSION['status'] = 'deactivated’; or $_SESSION['status'] = 'activated’; depending on the value of $_POST['active']. Then the response from articlelist.php can be a JSON form of $_SESSION - with at least the value of $_SESSION['status'] and the front end code can add the HTML accordingly.

If the structure of the HTML needs to be updated then the front-end code can be updated without requiring an update to the back-end code. Other benefits include:

• the size required to store each session would be decreased

• the size of network requests could be smaller

jQuery shorthand method could be used to simplify JavaScript

$.ajax({
 type: "POST",
 url: "controllers/articlecontrol.php",
 data: { articleID: articleID, active:active, selector: selector },
 success: function(data){
     document.location.reload(true);
 }
 });

Could be simplified using jQuery.post() shorthand method and The shorthand property definition notation

$.post('controllers/articlecontrol.php', { articleID, active, selector },
   function(data){
        document.location.reload(true);
    }
});

StackExchange Code Review Q#55438, answer score: 2