How to catch onChange event

DaveNavarro

Hello,

I'm trying to catch the onChange event for a field type: select.

I've attempted to use the sample code (shown below) however, it's triggered by several different events.

$( editor.field( 'myField' ).input() ).on( 'change', function () {
console.log( 'select2 change' );
} );

I found this sample here; https://datatables.net/forums/discussion/28670/how-to-trap-or-catch-onchange-events-from-select-or-select2

Anyway, when the page loads data via ajax or I select a new column the event is triggered. I was hoping to have the event triggered only when the user makes a new selection from the select list.

Do you have any suggestions on how I can achieve this behavior?

Please let me know and thanks,

~ Dave

allan

When Editor triggers a change itself it will also pass a data object in as the second parameter to the change callback. That will have an editorSet property which is true, so you can check that to see if it was caused by Editor or by the user:

function ( e, d ) {
  if ( d && d.editorSet ) {
    return;
  }

  ...
}

Editor 1.5.6 is going to formalise that, although it will be called editor rather than editorSet in the documentation (editorSet will continue to be present - its just not documented at the moment while I was confirming it would be useful!).

Allan

DaveNavarro

Hello Allan,

Many thanks for the quick reply and solution. It works as advertised!
Here's what I'm using now;

editor.field('Vendor').input().on('change', function (e, d) {
    if ( d && d.editorSet ) return;

    alert("You selected " + $(this).val());
});

It's grabbing the select list value (ID) so I can process the next step. Of course the field name "Vendor" is my field name and it will be changed for the other fields I setup.

Thanks again for your help!

~ Dave

brendons

For me, this works for select inputs but not for select2.
Select2 inputs throw the error: "d is undefined".

Brendon

allan

Could you check your Select2 Editor plug-in code contains:

    set: function ( conf, val ) {
        conf._input.val( val ).trigger( 'change', {editor: true} );
    },

It looks like the update function might also need the object passed into it, although without a back trace I'm not sure if it is set or update that is triggering the error you are seeing.

Allan

brendons

Hi Allan,
the set: function has it but the update: function doesn't.
I was able to add , {editor: true} to the update function in the non-minified js file and this fixed it for me.
I'm not sure how to fix the minified file though.
I am using a downloaded combined js file. I have listed the included libraries below. HTH.
Many thanks for looking at this.

Included libraries:
* Bootstrap 3.3.7, jQuery 2.2.4, JSZip 2.5.0, pdfmake 0.1.18, Moment 2.13.0, jQuery Mask 1.13.4, Select2 4.0.1, Selectize 0.12.1, DataTables 1.10.13, Buttons 1.2.4, Flash export 1.2.4, HTML5 export 1.2.4, Print view 1.2.4, Editor 1.6.1, Field type - Display 1.5.6, Field type - Mask 1.5.6, Field type - Select2 1.5.6, Field type - Selectize 1.5.6, Field type - Title 1.5.6, Select 1.2.0

allan

Until I deploy the update to the download builder, perhaps the easiest way is just to include the plug-in again at the end. It will overwrite the previous plug-in, and the code is small enough that it won't effect the download time.

Allan