Live Switch - option type L and option type W

When using live inputs we need to have the following option types on our section: L ,

Or we can manually adding them by setting the option types live, form and update to true and including the following JS library:

<!-- Live edit functions -->
<script type="text/javascript" src="/kas/js/live_edit.js?v=1606744636"></script>

<?php
   $options['add'] = false;  //make sure add is off in case there is an add form above the live inputs
   $options['live'] = true;
   $options['form'] = true;
   $options['update'] = true;
?>

 

Live inputs generate an encrypted data containing the table name, column name and id value of the record to be changed. Most of the times we already have those variables in use:

 

$dbtable = 'TABLE_NAME';
$idfield = 'COLUMN_NAME';
// $idvalue generated automatically when the URL has an ID 

 

if we don't have those variables set, we can pass them to the live input with the 'encdata' value.

 

In order for to use the live switch two option types are required: live (L) as we just mentioned and switch (W).

The following settings are available, as in any other live field, the type is ='live' and the inputType will be ='switch':

$field=[
  'type' => 'live',  //required
  'inputType' => 'switch', //required
  'name' => 'VISIBLE', //column name, required
  'label' => 'VISIBLE' , // required
  'id' => 'VISIBLE', //optional, if not provided name is used as id
  'value' => $db_items->result($i,'VISIBLE'), //optional, if not provided the value of name from the DB is fetched
  'onValue'=> '1', //optional, if not provided 1 is default
  'offValue'=> '0', //optional, if not provided 0 is default
  'class' => '', //optional, applied to hidden input
  'switch_class' => '', //optional, applied to the switch div
  'attributes' => 'readonly' //optional, used in the hidden input, readonly makes a static switch
  'switch_attributes' => '', //optional, applied to the switch div, great for adding data attributes and maniuplate switch states
  'encdata'=>[    //optional, the following values are used as default
    'TYPE'    =>'LIVE',
    'DBTABLE' =>$dbtable,
    'IDFIELD' =>$idfield,
    'IDVALUE' =>$idvalue
  ]
];

addField($field);

 

NOTE: if the attribute readonly exists, the switch is blocked

 

A live switch can have the following minimum settings:

 

addField([
  'type' => 'live',  //required
  'inputType' => 'switch', //required
  'name' => 'VISIBLE', //column name, required
  'label' => 'VISIBLE' , // required
]);

 

Using JS / JQuery, a switch toggle can be detected by checking the change trigger of the ID of the swicth:

 

$('#VISIBLE').on('change', function(){
   var val = $(this).val();
   alert("The Switch was clicked, value: "+val);
});

 

To modify the state of a switch using Java Script, use the turn_switch(  )  function, keep note that the system adds "switch_" to the ID of the fileld, so for example a VISIBLE field would need '#switch_VISIBLE' as the ID selector

 

turn_switch($("switch_VISIBLE"),"ON / OFF", "1 / 0 , true / false , yes / no, etc");