Answers

• colin Posts: 15,177Questions: 1Answers: 2,590

  November 2022 Answer ✓

  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 Posts: 96Questions: 28Answers: 0

  November 2022 edited November 2022

  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 Posts: 96Questions: 28Answers: 0

  November 2022 edited November 2022

  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 Posts: 96Questions: 28Answers: 0

  November 2022

  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 Posts: 96Questions: 28Answers: 0

  November 2022

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2022 Answer ✓

  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 Posts: 96Questions: 28Answers: 0

  April 2023 edited April 2023

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023 Answer ✓

  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 Posts: 96Questions: 28Answers: 0

  April 2023

  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 Posts: 96Questions: 28Answers: 0

  April 2023 edited April 2023

  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!