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

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

asleasle Posts: 96Questions: 28Answers: 0
edited November 2022 in Free community support

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?

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    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

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

  • asleasle Posts: 96Questions: 28Answers: 0
    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();
    
  • asleasle Posts: 96Questions: 28Answers: 0

    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?

  • asleasle Posts: 96Questions: 28Answers: 0

    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' );
        } );
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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

  • asleasle Posts: 96Questions: 28Answers: 0

    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!

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

Sign In or Register to comment.