Conditional show hide editor fields works but fails after many clicks on other lines

asle

I have an Editor form with a.o. fields for alternative delivery address. If the "montering_alt" field is "1" there is also a "montering_adr" so I want to hide the fields if the first field is not "1". I also want the same for the field "reg_std" , show it only if its value is "1".

editor = new $.fn.dataTable.Editor( { ...........

fields: [
           {
                label: "Alt. monteringsadr.",
                name: "montering_alt",
                type: "hidden"
            }, {
                label: "Monteringsadresse",
                name: "montering_adr"
            }, {
                label: "Standard montering:",
                name: "reg_std",
                type:  "radio",
                options: [
                    { label: "Nei", value: 0 },
                    { label: "Ja",  value: 1 }
                ],
                def: 0
            }
            ]

Function to check when editing to hide the fields if they are not "1"

editor.on( 'initEdit', function () {
   if (editor.val( 'reg_std' ) != 1) {editor.hide( 'reg_std' );} 
   mont_alt = editor.val( 'montering_alt' );
    if(mont_alt != 1)
    {
        editor.hide( 'montering_adr' );
        editor.hide( 'montering_postnr' );
    }
  } );

The problem is that the first time I click on a row, the logic works. I can log to console and the value is "1". I see the field "montering_adr". The next row does not have value "1" so the field is hidden. After clicking several records I go back to the first record and the field "montering_adr" is hidden now. But in console the value is "1" (it should show). I tried to redraw the table after each edit but the conditional does not kick in before I refresh the page again. Anyone see why the conditional does not work after at time?

colin

You can use dependent() for that - please see a very similar example here. You can also use a function with dependent() to give more control, such as this example, where setting the office to "XXX" updates the salary field automatically.

Colin

asle

Thanks @colin. This was a nice alternative. But when I create a new post, none of the fields I mention have value "1" so if I use dependent() like this:

editor.dependent('montering_alt', function(val, data, callback) {
    if (val === '1') {
      editor.field('montering_adr').hide();
      editor.field('montering_postnr').hide();
    }
    callback(true);
  }) 

now the fields are hidden and I can not edit them. So dependent() affects both edit and new?

I could of course have a button that shows the extra fields but I want to hide them if they are not set when the post is originally created.

asle

Sorry, the code is of course to hide the fields if "montering_alt" is not "1", otherwise show the fields.

  if (val !== '1') {
      editor.field('montering_adr').hide();
      editor.field('montering_postnr').hide();

asle

I have better luck with dependent() than with editor.on( 'initEdit'... for conditionals but not sure why. And the problem is still that I need a different behaviour for EDIT and NEW. Maybe this is the solution? Do I wrap this in a editor.on('initEdit...?? I found I found out that dependent() was not working on my field "montering_alt" because it was type:hidden. Works when I remove the hidden part. So dependent can not check hidden fields?

asle

I am trying to show the alt_address fields when creating a post but hide them on EDIT if they were not filled out on create. I thought this solution would work but it does not. On create the fields are hidden since the trigger field does not have 1 as value.

// hide the fields if "montering_alt" is not 1, works for edit
editor.dependent( 'montering_alt', function ( val ) { console.log(val);
        return val == 1 ?
            { show: ['montering_adr', 'montering_postnr', 'montering_sted'] } :
            { hide: ['montering_alt', 'montering_adr', 'montering_postnr', 'montering_sted'] }; 
    } ); 

// show the fields always on create
editor.on( 'initCreate', function () {
    $( editor.field('montering_alt').input() ).off( 'change keyup' );
    } );

allan

Having def defined to be 0 means that on "create" the dependent() will be called with the value 0. That can be seen in this example where, if you edit a field using the "All" option and then click the "New" button it will show "Simple" and correctly collapse the fields.

If that isn't working for you, can you link to a page showing the issue please?

Thanks,
Allan

asle

Thanks @allan and sorry I was too busy to answer and excited that things are working. Here is my code that works. When the checkbox "montering_alt" is checked, the 3 other fields are shown, else not shown on init. The 3 fields are toggled when checkbox is checked/unchecked. I got a lot of help from the dependent() API docs.

Here is the checkbox (was radio) in my dataTable.Editor(..) creation that triggers the show/hide:

 }, {
        label: "Annen mont.adresse",
        name: "montering_alt",
        type: "checkbox",
        separator: "|",
        options:   [
               { label: '', value: 1 }
                ],
        unselectedValue: 0
            }, {

My function to listen to the checkbox changes:

editor.dependent('montering_alt', function(val, data, callback){
    if (val === '1') { 
        editor.show(['montering_adr', 'montering_postnr', 'montering_sted']);
          } else { 
        editor.hide(['montering_adr', 'montering_postnr', 'montering_sted']);
             }
         callback(true);
        }); 

ps. I really dont need the "separator:" part when I have only one checkbox?

allan

Awesome - good to hear it works.

ps. I really dont need the "separator:" part when I have only one checkbox?

If you only have a single value, a radio field might be a better option than a checkbox? Checkbox will assume an array should be used / returned if separator is not specified.

Allan

asle

Yes @allan I agree a radio field would be more logical. A "yes" and "no" button. I was so trying to get this to work that I overlooked the logical part!

asle

And when I look over my case I see that even the dropdown select in the dependent example would be better solution than a checkbox. Well at least I also learned to use a checkbox!