How to fill a table with AJAX, starting from a specific record

DaveMorton

Hello, all. I'm the lead developer for an open source project ( Program O - https://github.com/Program-O/Program-O/ ), and I've made the switch for some of my project's admin pages from YUI to DataTables in order to display certain data from a MySQL database, and it all works as expected/intended, in all respects (search, sorting, pagination, etc.). This isn't where my problem is. I'm coming to it, trust me.

As this is an open source project, and my current income is somewhat limited, I cannot afford the Editor plugin to allow users to make changes to the database entries, so I "rolled my own" editing script, and IT works as intended. My problem is loosely related to this, but again, isn't where my problem lies. Here's the scenario:

When a user (read: me, since this is still in Alpha testing) clicks on a cell to edit it, makes changes, and then "clicks off" to save the changes (which is working well), the draw() event triggers (as I think it should), but it goes back to the first entry of the current page. If the entry that was modified is among the first few entries, it's all good, since that entry is still within visual range. but if the modified entry is, say, the 16th entry of a page of 25, that entry is no longer visible, as it's "below the fold". This is a problem, as far as I'm concerned.

So the question is, when I initiate the draw() event after modifying some data, is there a way to pass the ID of the currently modified row as a new "starting point" for the "current" page? I've looked through the documentation, but didn't see anything specific to my needs. Of course, I may have missed something when I was looking, but...

allan

but it goes back to the first entry of the current page

When you call draw() pass in false to stop DataTables resetting the paging: table.draw( false ); for example. The draw() reference page has some more details and explains the other options available as well.

Allan

DaveMorton

See? I thought I had missed something! Thanks, Allan!

DaveMorton

Sadly, I must report that the behavior has not changed. Here is the function where I'm experiencing the problem:

function saveEdit(ele) {
  var rowID = ele.attr('data-rowID');
  var fieldName = ele.attr('data-fieldName');

  // insert the new value into the current cell
  var curVal = ele.val();
  ele.parent().text(curVal);

  // set variables for the AJAX call
  var row = $('#' + rowID);
  var bot_id = row.find('.bot_id').text();
  var pattern = row.find('.pattern').text();
  var template_id = row.find('.template_id').text();

  // Now gather all of the fields and send the updated information
  $.ajax({
    url: 'editSRAI.php',
    type: 'post',
    dataType: 'text',
    data: {
      action: 'update',
      id: rowID,
      bot_id: bot_id,
      pattern: pattern,
      template_id: template_id,
    },
    success: function(data) {
      $('#errMsg').empty().html('<div class="closeButton" id="closeButton" onclick="closeStatus(\'errMsg\')" title="Click to hide">&nbsp;</div>').show();
      $('<pre>').html(data).appendTo('#errMsg');
      setTimeout(hideMsg, 3000);
      table.draw(false);
    }
  });
}

Every action taken in this function except the table being redrawn "in place" works as it should. The table still redraws from the beginning of the current page, thus causing it to display from the first entry, instead of the last edited one. It should be noted that if I comment out the line table.draw(false), the page behaves visually as it should, but the data isn't really being updated from the DB. It's just getting "swapped in" by the function (e.g. ele.parent().text(curVal)). This is fine, if need be, but I would much rather have the data updated from the DB, as a form of verification.

If need be I can privately provide a link and a temporary login so that the behavior can be observed first-hand. I cannot, however, post a link publicly, for security reasons.

allan

Yes please - links are always welcome. I'd need to be able to see the initialisation and probably walk through the code.

Allan

DaveMorton

I've sent you an email with the pertinent information. Please let me know if you have any questions/difficulties. Thanks for taking the time to look at it.

allan

Hi,

I've finally had a little chance to look at this (sorry for the delay!) and the editAiml.js script currently uses draw() without passing any parameters to it:

                success: function(data) {
                  $('#errMsg').empty().html('<div class="closeButton" id="closeButton" onclick="closeStatus(\'errMsg\')" title="Click to hide">&nbsp;</div>').show();
                  $('<pre>').html(data).appendTo('#errMsg');
                  console.log('Foo!');
                  setTimeout(hideMsg, 3000);
                  table.draw();
                }

Could you update that script there to use table.draw(false); and I can try debugging it from that point?

Thanks,
Allan

DaveMorton

Sure. It's been done.

allan

This one slipped me by - sorry! Are you still having problems with this?

DaveMorton

Yes I am, as a matter of fact. Changing the draw() calls to draw(false) seems to have no effect on the issue.