Editor - listening for postSubmit to retrieve the value of the last selected cell containing select

dhutton@creativeone.com

I'm building out a user management screen where each row shows a user and the columns are selects (dropdowns) containing specific permissions. I have the selects within the cell and they are saving fine when a user changes their value, but I'd like to intercept the submitted data or pull the new value from the select and send it off to an api for other processing. I'm not sure how to grab the last cell clicked and get its new value - I was able to get its previous value but not the new one selected before save. I have my editor.inline set to:

editor.inline(this, { onBlur: 'submit' }, { submit: 'changed' });

Once the form is submitted I'd like to retrieve the new value from the dropdown. Here's the code I'm using to fetch the row:

var currentRow = $(this).closest('tr');

Here's the code I'm using to fetch another column's data within the same row (that doesn't change):

var userEmail = currentRow.find('td:eq(1)').text();

As a bonus on the above, a reminder on how to refer to the column by name instead of ID would be great. Seems like I found that but have misplaced my notes.

I have the unique identifier of the row in question, I guess I can do a second search in the db once the form is submitted. I was just hoping to save that extra call.

TIA!

dhutton@creativeone.com

I retrieved with the below line (very) shortly after posting. It gets me the correct new value from the dropdown, but the user can click esc and back out of their decision. Here's what I found just for reference:
var permission = currentRow.find('select').val();

I think I need to wait until after the save which is why I was looking originally at postSubmit. Should I just listen for a postSubmit completion event and then continue with what I was doing?

colin

Hi @dhutton@creativeone.com ,

Yep, postSubmit would be a good way to go on the client side. You could also do server side handling too like this here.

Hope that helps,

Cheers

Colin

dhutton@creativeone.com

So I'd want to listen for a success so I can write the changed value from a particular column back to the database to a different / additional table from where's it's currently writing. Is there an example you can point me to where I can just listen for a successful change from a particular column only? I was afraid setting up an editor.on will listen for any successful change and try and update the db's additional table when it really only has to do that on a particular column. Would I need to do an editor.on and then a conditional to see what was changed?

TIA!

allan

Good question - I'm not sure we've been asked that before!

What I would do here is listen for submitComplete which will give you the data that was submitted to the server. If you are inline editing, then by default that will contain only the data that was changed. For the main form editing it will by default submit all fields, but you can use formOptions.main to change it to be changed only.

Then your event handler might be:

editor.on('submitComplete', function (e, json, data, action) {
  if (action === 'edit') {
    $.each( data.data, function (i, row) {
      if ( row.myField ) {
        // Its changed...
      }
    } );
  }
} );

Note the use of the loop ($.each) to allow for the fact that Editor can submit multiple rows at a time.

Allan