Editor - Additional options based on select box

mRender

I'm wondering if it's possible to have additional options appear / autofill text boxes based on the value of a select box in the editor.

For instance, if a user was to select follow up, the reminder option would pop up and they would be able to put in the number of days until you needed to follow up with them. Basically

 {
                label: "FollowUp:",
                name:  "tbl_CallData.FollowUp",
                type:  "select",
                ipOpts: [
                    { label: "Follow Up", value: 1 },
                    { label: "None",  value: 0 }
                ],
                "default": 0
            },{
                label: "Reminder:",
                name: "tbl_CallData.Reminder",
                type: "hidden",
                def: 0
            }

I was also wondering if a select box is chosen, can you perform an autofill of multiple text boxes? For example, I choose follow up 1 and it changes the value of reminder to 5, not just show it.

I apologize if this is apparent somewhere and I just didn't see it.

allan

Yes, this is possible with the show() and hide() methods in combination with a jQuery event listener on the parent select.

You might have something like:

$('select', editor.field( 'tbl_CallData.FollowUp' ).node()).on( 'change', function () {
   if ( $(this).val() === 'Follow Up' ) {
      editor.show( 'tbl_CallData.Reminder' );
   }
   else {
      editor.hide( 'tbl_CallData.Reminder' );
   }
} );

Regards,
Allan

mRender

Hello Allan,

I tried implementing the show/hide methods and I'm getting an issue with showing the field. It successfully hides the field in the editor, but I can't get it to show up. Not sure why. Here is my code.

Is it okay that the values of the tbl_pexpenses.type are in the database? It should read whether or not it's a Material / Equipment / Labor correctly right? Do I need to use something other than val to get what the value of the select box is?

For anyone else: some details, when the person picks Materials, I want another select box to appear and they can pick between special items. I'm working on 2 different projects using datatables, that's why the fields are different names. They both have this issue.

I'm not getting any errors in my console, but nothing is happening either.

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        processing: true,
        seriverSide: true,
        ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/pexpenses.php?PID=<? echo $PID ?>",
        table: "#pexpenses",
        fields: [  {
                label: "Type:",
                name: "tbl_pexpenses.type",
                type: "select"
            }, {
                label: "Special Items:",
                name:  "Special",
                type:  "select",
                ipOpts: [
                    { label: "Special Item 1", value: 0 },
                    { label: "Special Item 2",  value: 1 }
                ],
                "default": 0
            }, {
                label: "Description:",
                name:  "tbl_pexpenses.description"
            }, {
                label: "Quantity:",
                name:  "tbl_pexpenses.quantity"
            }, {
                label: "Cost Per Item:",
                name:  "tbl_pexpenses.cost"
            }
        ]
    } );
    

$('select', editor.field( 'tbl_pexpenses.type' ).node()).on( 'change', function () {
   if ( $(this).val() === 'Materials' ) {
      editor.show( 'Special' );
   }
   else {
      editor.hide( 'Special' );
   }
} );    

allan

Interesting - that does look like it should work. Are you able to give me a link to the page so I can take a look and see what is going wrong?

Thanks,
Allan