Empty Label with Selectize

ep

I use selectize.js to let the user select Author names loaded from a remote database table, or to enter new / edit Author names. My code seems to run well except for one issue. I use some screenshots to explain:

Screnshot 1:
The user selects one row in a large table.
https://1drv.ms/i/s!Aqk-eHvIT7K7gRJ6g8ujiEQRWCmb

Screenshot 2:
After clicking "Edit" a form (in this example: minimal) appears to edit the entries of the selected dataset. Don't mind the "Publ.-Typ" field.
https://1drv.ms/i/s!Aqk-eHvIT7K7gRFOhikm1mDCiceB

Screenshot 3:
After clicking the label of the field "1st Author"
https://1drv.ms/i/s!Aqk-eHvIT7K7gRSX0z9cGPsw_MP0

Screenshot 4:
The keyboard remains untouched. Only "Speichern" is clicked to save the data.
https://1drv.ms/i/s!Aqk-eHvIT7K7gRNDTuMwI_EQUkAe

I expected that the 1st Author field should now contain the same name as it contained before, and I wonder why the Author field now is empty instead. It seems to me that the issue already appears in the situation of screenshot 2 where the "1st Author" name is not presented as a label. But I could not yet find any method to pass the author name in a proper way.

BTW: In the situation of screenshot 3 a newly entered name is properly searched for in the remote database This part of my application runs well.

My code is as follows:

  editor = new $.fn.dataTable.Editor( {
    fields: [
      { label: 'Publ.-Typ', name: 'TYP' },
      { label: '1st Author',
        name: '_100_1_a',
        type: 'selectize',
        options: [],
        opts: {
          valueField: 'NAMEN',
          labelField: 'NAMEN',
          searchField: 'NAMEN',
          load: function( query, callback ) {
                  if ( query.length <= 2 ){ return callback()};
                  $.ajax({
                    url: "/cg-bin/.../select-names.pl",
                    type: 'GET',
                    dataType: 'json',
                    data: { start: query,  col: "NAMEN" },
                    error: function() { callback(); },
                    success: function(res) { callback(res); },
                    create: function (input){ return {col: 'NAMEN', text:input }}
                  });
          }
        }
      },
    ],
  } );

  editor.on( 'initEdit', function ( e, node, data ) {
    var verfFeld = editor.field('_100_1_a');
    verfFeld.update({ NAMEN: data._100_1_a });

    editor.field( 'TYP' ).focus();
  });

I have two remote database tables in my application. One table contains the datasets presented in screenshot 1. Each of these datasets may contain several author names (columns _100_1_a, _100_2_a etc). When editing a dataset or entering a new dataset the user should be able to choose a name from the complete set of all author names which is saved in a column named "NAMEN" of a second r/o database table. It may well be that I am confused with these two database tables.

ep

I have to make two additional remarks. At first: A somewhat better readable code:

editor = new $.fn.dataTable.Editor({
  fields: [
    { label: 'Publ.-Typ', name: 'TYP' },
    { label: '1st Author',
      name: '_100_1_a',
      type: 'selectize',
      options: [],
      opts: {
        valueField: 'NAMEN',
        labelField: 'NAMEN',
        searchField: 'NAMEN',
        load: function( query, callback ) {
          if ( query.length <= 2 ){ return callback()};
            $.ajax({
            url: "/cg-bin/.../select-names.pl",
            type: 'GET',
            dataType: 'json',
            data: { start: query, col: "NAMEN" },
            error: function() { callback(); },
            success: function(res) { callback(res); },
            create: function (input){ return {col: 'NAMEN', text:input }}
          });
        }
      }
    },
  ],
});

editor.on( 'initEdit', function ( e, node, data ) {
  var verfFeld = editor.field('_100_1_a');
  verfFeld.update({ NAMEN: data._100_1_a });

  editor.field( 'TYP' ).focus();
});

And secondly: The situation is even worse than described. The three steps
- Click on a row of the large table
- Click on "Edit"
- Click on "Speichern" (Save) in the editor form leaves an empty "1st Author" field.

Thanks,
Eberhard

allan

Hi Eberhard,

Thanks for the information. Are you able to give me a link to the page so I can debug it live please? If you can't make it public, you can PM the link to me by clicking my name above and then the "Send Message" button.

My gut feeling is that there is an issue with calling the update method on the field type and it isn't restoring the value. You could possibly test that by doing:

editor.on( 'initEdit', function ( e, node, data ) {
  var verfFeld = editor.field('_100_1_a');
  var val = verfFeld.val();
  verfFeld.update({ NAMEN: data._100_1_a });
  verfFeld.val( val ); 

  editor.field( 'TYP' ).focus();
})

However, I'm not sure why you would need that event handler at all - that is really something that should be handled for you and I'd like to check into that.

Allan

allan

So I've finally had a chance to dig into this (sorry for the delay!) and the issue is related to how Selectize is handling values that are not available in the list.

What is happening is (in order):

1. Editor sets the value for the _100_1_a field when editing is triggered.
2. This value is not yet in the list of options available, so Selectize sets its value to be an empty string.
3. In the code I pasted above you then get the fields value (line 3), which Selectize is returning as an empty string.
4. The options list is updated and the value is now present, but
5. The value being set (line 5) is an empty string - hence the issue!

I think the solution is actually surprisingly simple - rather than setting val use data._100_1_a:

editor.on( 'initEdit', function ( e, node, data ) {
  var verfFeld = editor.field('_100_1_a');
  verfFeld.update({ NAMEN: data._100_1_a });
  verfFeld.val( data._100_1_a );
 
  editor.field( 'TYP' ).focus();
})

Allan

ep

Hi Allan,

thanks very much for your great help! Wonderful!

May I add a simple further inquiry: The user should also be able to add a new entry in this field. I thought I have the right code for this in the line

create: function (input){ return {col: 'NAMEN', text:input }}

Alas, this doesn't seem to work.

Thanks again,
Eberhard

ep

Hi Alan,

no further answer necessary. The solution is to add "create: true" into the opts of the selectize call.

Thanks again for this great library, and your help as well.

Eberhard

allan

Fantastic - good to hear that you've got it working now.

Regards,
Allan