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: 85Questions: 26Answers: 0
edited November 22 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?

Answers

  • colincolin Posts: 14,531Questions: 1Answers: 2,484

    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: 85Questions: 26Answers: 0
    edited November 23

    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: 85Questions: 26Answers: 0
    edited November 23

    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: 85Questions: 26Answers: 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: 85Questions: 26Answers: 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: 57,263Questions: 1Answers: 9,121 Site admin

    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

Sign In or Register to comment.