2

A Brief Description...

I have an editable jqWidgets grid within my site but unlike traditional editable grids, instead of updating the database as you edit a row, I want to update the entire grid at once when a 'Save' button is pressed.

With this in mind, I can only see two possible options:

  1. Somehow stringify the entire grid object into a query string and send 1 AJAX request to the server.
  2. Or, loop through each row and execute an AJAX request for each individual row in the grid

The issue I have is that I simply cannot figure out which method is better as they both have their complications. The query string on option 1 could potentially be astronomical and exceed memory limits as the user is trying to pass the entire contents of the grid over a POST request. However, the latter solution could cause issues by the fact that it is executing an AJAX request for each row in the grid. Imagine if there were 100, or even 1000 rows in the grid!!

My Question

So, can anybody think of an effective way to achieve this without exceeding memory limits, but whilst also avoiding making multiple AJAX requests?

Further Information

In case the above wasn't clear, consider this javascript array:

[
    { name: 'Ben', age: 23, occupation: 'Developer' },
    { name: 'Charlie', age: 24, occupation: 'Receptionist' },
    { name: 'Jemima', age: 18, occupation: 'Designer' }
]

And now, try to ascertain the best method for passing all that information to PHP in one query?

Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • Do one AJAX request. 1000s of rows of text is still only in the kilobyte range, you won't run into memory limits. If you're really worried about efficiency, you should work out a way to only send AJAX updates for data that has changed, rather than the whole table at once. – hotforfeature Jul 08 '14 at 14:25
  • @abmitchell I intend to filter out the rows that have not changed, but I still have the issue of stringifying the array... Any pointers? – Ben Carey Jul 08 '14 at 14:29
  • 100 AJAX requests at the same time will bring any browser to it's knees. If you can ensure enough resources are available on the server then you should send one request and _not_ wait for it to be processed. Add it to a processing queue. You could look into websockets though. That might be smarter. – Sergiu Paraschiv Jul 08 '14 at 14:30
  • 1
    There's JSON.stringify for that. – Sergiu Paraschiv Jul 08 '14 at 14:30
  • @BenCarey Do what Sergiu says, just pass `JSON.stringify(yourArray)`, no need to make it more complicated – hotforfeature Jul 08 '14 at 14:34
  • Keep in mind that IE's querystring length is restricted to 2083 characters, sending data from the client to the server should be handled using POST rather than GET requests (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). I would also recommend to use one AJAX request, initiating multiple requests to the same domain will cause connection blocking so your AJAX calls would be handled sequentially rather than asynchronously. – SaschaM78 Jul 08 '14 at 14:55

1 Answers1

0

on your source object, there is an updaterow function that takes parameters rowid, newdata, and commit:

updaterow: function(rowid, newdata, commit)

newdata is a json object representing the updated row from the grid, and commit is a callback you need to invoke to consider the change to have been accepted.

within this function, you can take the updated rowdata object and throw it in an associative array based on the rowid (to make sure a changed row only gets sent back once). Finally, call

commit(true)

you can now have a function called when a button is clicked that does your ajax post with the updated row data:

var editedRows = {};
var source = {
  localdata: [], // your data for the grid
  datatype: 'json',
  datafields: [
    // define columns and types
  ],
  updaterow: function(rowid, datarow, commit) {
    editedRows[rowid] = datarow;
    commit(true);
  }
}

var saveData = function() {
  // post editedRows, clear editedRows on success
};
dfperry
  • 2,258
  • 1
  • 14
  • 22