How to refresh a table row in a JSON request using vanilla JavaScript

Question

I have written my first AJAX request to set the value in a table to 1 if the file is a "redline". If the value is 1 when the page loads, the filename should be displayed in red (a simple if statement). The AJAX request works fine and the value in the table gets changed to 1, but I'm not sure how to refresh the row in the table without refreshing the whole page.

This is my first AJAX request, so please be patient.

Here is the AJAX request:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
    function markAsRedline(attachmentid) {
        new Request.JSON({
            url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
            onSuccess:
                // refresh table row
        }).send();
    }
</script>

EDIT: Here is the table row to be updated:

<tr id="attrow2104461" class="even">
    <td><span title="ABC">ABC (65)</span></td>
    <td><input style="background-color: transparent; border: none;" type="text" name="description" class="description" size="42"><img src="##/img/redline.png" height="17px" title="Mark as redline" onclick="markAsRedline(2104461);"></td>
    <td><a href="###" data-attid="2104461">resfds.docx</a></td> <!-- This is where the text should change color -->
</tr>

I have no idea where to go from here. Any help is very much appreciated.

Answer 1

The onSuccess property of Request.JSON is a function call that is triggered when the ajax call successfully returns with data. You have several options for how to deal with this.

EXAMPLE 1

Let's say you break out the color change into it's own method like so:

let markAsRedLine = (responseJSON, responseText) => {
  // let's assume the response contains the attachmentid we need
  // select the element on the page with the attachmentid
  let el = document.querySelector('[data-attid="' + responseJSON.attachmentid + '"]');
  // style the element's text color as RED
  el.style.color = 'red';
}

Now, when you make your AJAX call, you can assign the onSuccess property so that it calls the markAsRedLine function.

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: markAsRedLine
}).send();

EXAMPLE 2

You may not care what the result of the AJAX call is and so this next example ignores that information and just uses the attachmentid that is passed from the input element:

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: function(responseJSON, responseText) { // notice function definition
    let el = document.querySelector('[data-attid="' + attachmentid+ '"]');
    el.style.color = 'red'
  }
}).send();

You could also break this out in the same way as the first example:

function makeRed(attachmentid) {
  let el = document.querySelector('[data-attid="' + attachmentid+ '"]');
  el.style.color = 'red'
}

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: function(responseJSON, responseText) { // notice function definition
    makeRed(attachmentid);
  }
}).send();

In that example, you need to implement the onSuccess function as defined by the API so as not to break it, then inside that function make the call to style your elements.

EXAMPLE 3

In the next example, you can see how to do this without using an AJAX call:

 function markAsRedline(attachmentid) { var el = document.querySelector('[data-attid="' + attachmentid + '"]'); el.style.color = 'red'; };

 <table> <tr id="attrow2104461" class="even"> <td><span title="ABC">ABC (65)</span></td> <td><input style="background-color: transparent; border: none;" type="text" name="description" class="description" size="42"><img src="https://otb.cachefly.net/wp-content/uploads/2013/04/red-line.png" height="17px" /></td> <td><a href="###" data-attid="2104461">resfds.docx</a></td> <;-- This is where the text should change color --> </tr> </table> <button type="button" onclick="markAsRedline('2104461');">Mark as Red</button>

MooTools offers some decent documentation on Request.JSON here -> https://mootools.net/core/docs/1.6.0/Request/Request.JSON