How to update field in edit form after form loads?

louking

I am trying to bring up the edit form, and to update one of the fields based on the value in a selectize field. I tried initEdit.dt and edit.dt, but while both of these events fire and within the event function successfully call editor.set(), the field in the form is not updated. I think this might have to do with the fact that I am using selectize. I don't have an example for you without using selectize, but I wasn't able to reproduce the problem until I used selectize.

Do I have some initialization problem, am I using the wrong event, or is it something else?

See http://codepen.io/louking/pen/xZNWMq

var data = []
for (i = 1; i < 4; i++) {
  data.push({
    id: i,
    col0: 'a' + i,
    col1: 'b' + i,
    col2: 'c' + i
  })
}

var optvalues = [
  {label:'a1',value:'a1'},
  {label:'bb',value:'bb'},
  {label:'cc',value:'cc'},
];

var editor = new $.fn.dataTable.Editor({
  table: '#tbl',
  display: 'jqueryui',
  idSrc: 'id',
  fields: [
    { label: 'col0:', name: 'col0',
      type: 'selectize', options: optvalues,
      opts: { searchField: 'label' },
    },
    { label: 'col1:', name: 'col1' },
    { label: 'col2:', name: 'col2' },
  ],
} );

$col0name = editor.field('col0').input();
$col0name.on('change edit.dt', function(e) {
  editor.set('col1','test');
});

var table = $('#tbl')
  .DataTable({
    dom: 'lBfrtip',
    data: data,
    columns: [
      {
        data: null,
        defaultContent: '',
        className: 'select-checkbox',
        orderable: false
      },
      { data: 'col0', name: 'col0', className: 'dt-body-center' }, 
      { data: 'col1', name: 'col1', className: 'dt-body-center' },
      { data: 'col2', name: 'col2', className: 'dt-body-center' }
    ],
    select: true,
    buttons: [
      { extend: 'create', editor: editor },
      { extend: 'edit', editor: editor },    
    ],
  });

<table id=tbl>
  <thead>
    <tr>
      <th></th>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  </tbody>
</table>

allan

What happens if you use a value that Selectize knows about? For example:

editor.set('col1','bb');

In a little local test i've just done that appears to work as expected.

Allan

louking

I'm not sure what you are saying. selectize is for col0, but I'm trying to set a value in col1.

In any case I tried this in http://codepen.io/louking/pen/NxVLaP and the set still does not work.

louking

I think the on('initialize', ) for selectize maybe isn't working properly. When I use on('focus', ) I get the behavior I want. I will use this as a workaround. (although it really would be better at initialization than focus)

See http://codepen.io/louking/pen/VeOGyE

thanks

allan

Sorry - I misunderstood the issue before - my comment above is bunk.

Good to hear you've partly got it working now. I've just tried your example again locally and it seems to work as expected. When I change the value of the selectize selected option it will trigger the change event and thus update the value of the other field to test.

I'm afraid I'm not sure why that isn't working for you.

Allan

louking

Yes, on('change' works, but I can't get the second field to fill in when the form is brought up at edit.dt time.

Sorry for the confusion of having both events in the on condition, but I wanted to simulate exactly what my application is doing.

If you set a breakpoint at the editor.set() then bring up the form, you will see editor.set() gets called but the field does not remain with value test.

allan

What's happening is an artifact of the sequential nature of Javascript. When you click edit your selectize field has its value set, and it triggers a change event. That updates the other field's value. Once done Editor can continue - so it sets the value of the next field for the edit - thus undoing the value from the previous step.

Once all fields have been set the require field gains focus, which is why the focus event appears to work here.

To address this, you could simply add a setTimeout in your event handler to cause the set to happen after Editor has finished its work.

Allan

louking

When does the edit.dt event fire? I would have thought after all the fields had been set up, but from your description seems like it fires immediately when the form is rendered.

But now I definitely understand why the selectize initialize event did not work.

Seems 50ms should be long enough, right? Feels a bit inelegant, but I would think unless the computer is very busy this should be fine.

Updated pen: http://codepen.io/louking/pen/RrzebO

allan

The edit method occurs triggered immediately after the row / page has been updated.

Seems 50ms should be long enough, right? Feels a bit inelegant, but I would think unless the computer is very busy this should be fine.

Anything would work. If you are only targeting new browser, use setImmediate.

Another option would be to listen for open which should also work.

Allan

louking

Yes, open works. Thanks

Ref http://codepen.io/louking/pen/rxEoRw