I am trying to change the value of my second select box when my first select box change?
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "insert.php",
table: "#example",
fields: [ {
label: "Item Name:",
name: "fs_items.name"
}, {
label: "Price:",
name: "fs_items.price"
}, {
label: "Description:",
name: "fs_items.description",
type: "textarea"
},{
label: "Category:",
name: "fs_items.main_categoryid",
type: "select",
placeholder: "Select a Category"
},{
label: "Category:",
name: "fs_items.sub_categoryid",
type: "select",
placeholder: "Select a Category"
},{
label: "Image:",
name: "fs_items.image",
type: "upload",
display: function ( file_id ) {
return '<img src="'+table.file( 'fs_files', file_id ).web_path+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
]
} );
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
editor.create( {
title: 'Create new record',
buttons: 'Add'
} );
} );
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
// Remove a record
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.edit( $(this).closest('tr'), {
title: 'Remove record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Remove'
}).hide()
.set( 'status', 'deactive' );
} );
var table = $('#example').DataTable( {
ajax: "insert.php",
dom: 'Bfrtip',
columns: [
{ data: "fs_items.name" },
{ data: "fs_items.price", render: $.fn.dataTable.render.number( ',', '.', 0, '₱' ) },
{ data: "fs_items.description" },
{ data: "fs_main_categories.name" },
{ data: "fs_sub_categories.name" },
{
data: "fs_items.image",
render: function ( file_id ) {
return file_id ?
'<img src="'+table.file( 'fs_files', file_id ).web_path+'"/>' :
null;
},
defaultContent: "No image",
title: "Image"
},
{ data: "fs_items.userid" },
{ data: "fs_items.create_date" },
{ data: "fs_items.update_date" },
{
data: null,
className: "center",
defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
}
],
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
Editor::inst( $db, 'fs_items' )
->fields(
Field::inst( 'fs_items.name' )
->validator( 'Validate::notEmpty' )
->validator( 'Validate::unique' ),
Field::inst( 'fs_items.price' )
->validator( 'Validate::notEmpty' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'fs_items.description' )
->validator( 'Validate::notEmpty' ),
Field::inst( 'fs_items.main_categoryid' )
->options( 'fs_main_categories', 'id', 'name' )
->validator( 'Validate::dbValues' ),
Field::inst( 'fs_main_categories.name' ),
Field::inst( 'fs_items.sub_categoryid' )
->options( 'fs_sub_categories', 'id', 'name' )
->validator( 'Validate::dbValues' ),
Field::inst( 'fs_sub_categories.name' ),
Field::inst( 'fs_items.image' )
->validator( 'Validate::notEmpty' )
->setFormatter( 'Format::ifEmpty', null )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/upload/__ID__.__EXTN__' )
->db( 'fs_files', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
->validator( function ( $file ) {
return$file['size'] >= 50000 ?
"Files must be smaller than 50K" :
null;
} )
->allowedExtensions( [ 'png', 'jpg', 'gif' ], "Please upload an image" )
),
Field::inst( 'fs_items.userid' )
,
Field::inst( 'fs_items.create_date' )
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601)
,
Field::inst( 'fs_items.update_date' )
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601)
)
->leftJoin( 'fs_main_categories', 'fs_main_categories.id', '=', 'fs_items.main_categoryid' )
->leftJoin( 'fs_sub_categories', 'fs_items.main_categoryid', '=', 'fs_sub_categories.main_categoryid' )
->where( function ( $q ) {
$q->where( 'fs_items.status','' , '=' );
} )
->process( $_POST )
->json();
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
