using custom row editor- how to refresh row data displayed

barncattech

I have a table of contractors where each record has about 30 fields. I want to be able to edit all of these fields from a datatables table that is showing only 7 fields. I have a standalone editor page for editing a contractor that I use in 2 other places in my huge app, and I want it to work the same way here.

I have it all working except for one detail- after I update a record in my popped up dialog, the data in the table is not updated. I'm trying to figure out how.

To trigger my editor page, I grab the "preOpen" event, extract the record id for that row, and open my editing page in an iframe inside a jqueryui dialog, passing the id to it.

My understanding is that I should be able to call invalidate().draw() on the row (line 22 below), and that will pull new data from the database. It isn't happening so far.

editor.on( 'preOpen', function ( e, json, data ) {
    $('#contractor_edit_iframe').dialog('close');
    $('#contractor_edit_iframe').remove();
    var selRow = myTable.rows({selected: true});
    var theId = myTable.rows( { selected: true } ).data()[0]['contId']; 
    var theHref = "../scripts/editContractorByID_rel.php?contId=" + theId;

  $('<iframe id="contractor_edit_iframe" class="externalSite" src="' + theHref + '" />').
  dialog({
        id: "contractor_edit_iframe",
      /*title: ($this.attr('title')) ? $this.attr('title') : 'Edit Contractor',*/
      title: 'Edit Contractor',
      autoOpen: true,
      width: 730,
      height: 650,
      modal: true,
      resizable: true,
      autoResize: true
  }).width(700).height(660);
  $('.ui-widget-overlay').css({ opacity: '.7' });
    //$( "#dialog" ).dialog();
    selRow.invalidate().draw();
    return false;
});

barncattech

I'm thinking this may be a race condition, and maybe I need to somehow catch when my popped up editor has finished sending its updated data to the database?

allan

My understanding is that I should be able to call invalidate().draw() on the row (line 22 below), and that will pull new data from the database.

Not quite - row().invalidate() will read data from the data object for the row (client-side) or from the DOM element for the row (depending on the original source and options given to the method). It will not make an Ajax call to the server. To be perfectly honest with you, I hadn't thought about that before, but now that you say it I can see how it would be useful!

At the moment either you need to reload the data for the table (ajax.reload()) or you need to make an Ajax call to get just the data for the target row and then use row().data() to update it.

Allan

barncattech

Thanks for the response, Allan. However, even when I call reload, it doesn't update. I also tried myTable.ajax.reload().draw(). Here is the updated code.

editor.on( 'preOpen', function ( e, json, data ) {
    $('#contractor_edit_iframe').dialog('close');
    $('#contractor_edit_iframe').remove();
    var selRow = myTable.rows({selected: true});
    var theId = myTable.rows( { selected: true } ).data()[0]['contId']; 
    var theHref = "../scripts/editContractorByID_rel.php?contId=" + theId;

  $('<iframe id="contractor_edit_iframe" class="externalSite" src="' + theHref + '" />').
  dialog({
        id: "contractor_edit_iframe",
      title: 'Edit Contractor',
      autoOpen: true,
      width: 730,
      height: 650,
      modal: true,
      resizable: true,
      autoResize: true
  }).width(700).height(660);
  $('.ui-widget-overlay').css({ opacity: '.7' });

    myTable.ajax.reload();
    return false;
});

allan

Is your table's data Ajax sourced? Can you show me how you define myTable?

Allan

barncattech

Yes- I use my own code to retrieve the data via ajax. Here is my datatables definition.

var myTable = $('#cont').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/getContList.php',
                scrollY:        500,
                scrollX:            true,
                scroller:       true,
        select:             true,
        columns: [
            {
                "data": "name",
                "width": "100px"
            },
            {
                "data": "catcode",
                "width": "25px"
            },
            {
                "data": "city"
            },
            {
                "data": "state"
            },
            {
                "data": "locations"
            },
            {
                "data": "flags"
            },
            {
                "data": "contact1"
            },
            {
                "data": "email1"
            },
        ],

        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
               {
                   text: 'Delete Empty Records',
                   action: function ( e, dt, node, config ) {
              window.open("./php/deleteEmpties.php");
                   },
                   enabled: true
               }]
});

allan

So when you call the ajax.reload() method, does the Ajax request to getContList.php get sent out, and does the reply from the server include the expected updated data?

Allan

barncattech

No, the alax.reload was never being called. Here is what I ended up doing that worked.
In my page that is opened in an iframe, I'm using the ajaxForm jquery plugin. When it comes back, I call a function that I have declared in my parent document OUTSIDE of the jquery context:

$('#contform').ajaxForm(function() { 
    console.log("editContractorByID_rel - back from update");
    window.top.reloadTable();
    window.parent.$('#contractor_edit_iframe').dialog('close');
    window.parent.$('#contractor_edit_iframe').remove();
}); 

Here is my reloadTable function in the parent document:

function reloadTable() {
    myTable.ajax.reload();
    console.log("reload in parent");
}

In order for this function to access the myTable variable which is declared inside of jquery, I make the myQuery var exist at the top level:

window.myTable = $('#cont').DataTable( {
.... });

SO, This is a bit of a kludge, but it does work. It takes a couple seconds before the table updates with the new value, and it would be better for me to write something that just gets that row data and updates it, but this will do for now. Thanks for the help!