How do I reload data for a single row via Ajax

cj1005

Hi,

I have an href on each row that when clicked, calls a back-end function.
This works fine, but my issue is the href icon goes green to indicate to the user the changes have been done, this takes a few seconds to update because I'm reloading the whole table Table.ajax.reload() after the ajax success.

Is there a way to just do the ajax reload for the row I'm on?

My current code is as follows:

  $('#dtSjob').on('click', 'a.editor_despall', function (e) {
    e.preventDefault();
    lsRow = sjobTable.row( $(this).closest('tr'))
    lsData = lsRow.data()
    var dataSL = {};
    dataSL.job = lsData['sjob']['job'];
    dataSL.urn = lsData['sjob']['urn'];
    $.ajax({ url: "AjaxGetData.wc?ti=rf&fl=DespAllQty&key=CallFunc;"+dataSL.job+"~C;"+dataSL.urn+"~C" ,
       type: "POST",
       success: function(data) {
         sjobTable.ajax.reload();
       }
    });
  });

Thanks, Chris

colin

No, ajax.reload() will reload the entire table, as you say. The only way you could update an individual row is to call the Ajax end-point yourself, and update the row's data with row().data().

Colin

cj1005

Thank you, Colin, you are correct and I've worked it out using other examples from the forum.

// START - Script to control despall function
  $('#dtSjob').on('click', 'a.editor_despall', function (e) {
    e.preventDefault();

    var lsRow = sjobTable.row( $(this).closest('tr'));
    var lsData = lsRow.data();
    var rowID = lsData['recno'];

    var dataSL = {};
    dataSL.job = lsData['sjob']['job'];
    dataSL.urn = lsData['sjob']['urn'];

    $.ajax({ url: "AjaxGetData.wc?ti=rf&fl=DespAllQty&key=CallFunc;"+dataSL.job+"~C;"+dataSL.urn+"~C" ,
       type: "POST",
       success: function(data) {
         refreshRow(rowID, lsRow);
       }
    });
  });

function refreshRow(id, row) {
    //console.log("Refreshing data for recno: "+id);
        $.ajax( {
            url: 'AjaxSjob.wc',
            type: 'post',
            dataType: 'json',
            data: {
                refresh: 'rows',
                ids: id
            },
            success: function ( json ) {
                // On success update rows with data
                row.data(json.data[0]);
                sjobTable.draw(false);
            }
        } );
}

// END

I also had to create a backend function to pick up the row refresh and return just the data for the record being refreshed.

Cheers, Chris