Enable jquery-jtable hidden fields if a certain condition is met using jtable events

Question

My aim is to only show bank related field if selected category is bank.

$('#EditDataTableDaybooks').jtable({ title: 'Accounts Daybook', paging: true, //Enable paging pageSize: 25, //Set page size (default: 10) sorting: true, //Enable sorting defaultSorting: 'DaybookCode DSC',

actions: {
    listAction: '/adminaccounts/get_daybook_list',
    updateAction: '/adminaccounts/update_daybook_entry',
},
fields: {
    Daybook_key: {
        title: 'Daybook_key',
        key : true ,
        width: '3%',
        edit: false,
        visibility: 'hidden'
    },
    DaybookCode: {
        title: 'Sr.No.',
        create: true,
        edit: false,
        width: '5%',
        key: true,
        sorting: true,
    },
    DaybookGroup: {
            title: 'Daybook Group',
            width: '5%',
    },
    GroupName: {
        title: 'Group Name',
        width: '5%',
    },
    DaybookName: {
        title: 'Daybook Name',
        width: '10%',
    },
    ShortForm: {
        edit: false,
        title: 'Short Form',
        width: '8%',
    },
    DaybookType: {
        // edit: false,
        title: 'Type',
        width: '8%',
        type: 'radiobutton',
        visibility : 'show',
        options: {'CA':'Cash',
                  'BN':'Bank',
                  'JV':'Journal Voucher',
                  'BJ':'Bill Journal',
                  'AB':'Adjustment Bill',
                  'DN':'Debit Note',
                  'CN':'Credit Note'},
    },
    

These fields are kept hidden for initializing account_name: { type: 'hidden', title: 'Account Name', width: '10%', }, account_number: { type: 'hidden', title: 'Account Number', width: '10%', }, ifsc_code: { type: 'hidden', title: 'Ifsc code', width: '10%', },

},
recordUpdated: function(event,data) {
    console.log(data.serverResponse.error_message)
    error_message = data.serverResponse.error_message
    if (error_message != ''){
        alert("Zoho Book Error: " + error_message)
    }
    console.log(event)
    $.ajax({type:'POST',
        url: '/adminaccounts/get_daybook_list',
        success: function(responseText){
            console.log(responseText)
            $('#EditDataTableDaybooks').jtable('load');
        },
    });
},
formCreated: function(event, data) {
    console.log(event);
    console.log(data);
    console.log(data.record.DaybookType);
    if (data.record.DaybookType == 'BN'){
        console.log('logic to enable hidden fields');
}

Blockquote

}

});

Answer 1

There are no built in methods for your requirements, but you have correctly identified that the formCreated event handler is the correct place to add some code.

It is worth understanding the DOM structure of the add/edit form created by jTable.

Any jTable field defined as hidden, is simply created as an input field of type hidden with no styling or styling structure applied.

All non-hidden fields are created with a <div class="jtable-input-field-container"> . This div contains two further divs, one for the field label/title <div class="jtable-input-label"> and a second to contain the input element <div class="jtable-input jtable-text-input"> for example.

Furthermore if the inputClass is defined in the jTable field definition, that class appears in the input field itself.

Therefore following your original plan, you will need to delete the hidden fields, and create a structure of divs and inputs that will look like the rest of the jTable form.

Reversing your thinking and fully defining each field, you can use the formCreated function, to remove, hide or disable the field that you want to suppress.

The simplest is to give all the "hidden" fields inputClass: "hideableInput", then all that is needed in the formCreated function is data.form.find('.hideableInput').attr('disabled', true); to disable the fields.

data.form.find('.hideableInput').closest('div.jtable-input-field-container').remove(); will completely remove the field containers from the form, so there is nothing for the user to see, and no parameters will be sent to the server.