How to change 2nd select box when 1st selectbox change?

minion_warrior

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.

allan

There are two options:

1. Use dependent() which will trigger a callback function or an Ajax request when a field's value changes. You can use the returns data from the callback or Ajax to effect the rest of the form, including changing the options for another select list.
2. Use field().input() to get the select element and listen for the change event yourself. Then the event handler function would do whatever you require in order to update the second select list.

Regards,
Allan

minion_warrior

hi bro, may i ask what this for?

Field::inst( 'fs_items.sub_categoryid' )
->options( 'fs_sub_categories', 'id', 'name' )
->validator( 'Validate::dbValues' ),
Field::inst( 'fs_sub_categories.name' ),

minion_warrior

i use this to fill the fs_items.sub_categoryid
it change but i need the id

$( editor.node( 'fs_items.main_categoryid' ) ).on( 'change', function () {

var diocese = editor.field( 'fs_items.main_categoryid').val();
alert(diocese);
$.getJSON('testing.php?diocese=' + diocese,

function(data) { alert(data); editor.field( 'fs_items.sub_categoryid').update( data ); }
);
} );

allan

may i ask what this for?

The options method will get the values for that field - see the documentation here.

Editor's PHP libraries will not provide a way to get the options for the dependent() return. You need to query the database to get that information.

Allan

minion_warrior

i have two select boxes, when select box 1 change its value select two query depends at select box 1 value
like this

select * from subcategories where main_catecoryid = the selectbox 1 value

allan

I'm not entirely sure what your question is. You could use dependent() to make the Ajax call to your server-side script to get that data, or you can add your own change event listener if you prefer using field().input().

Allan

minion_warrior

the ajax should i get from the same php file or another?

allan

A different one. As I stated above, you would need to query the database to get the information you need - that isn't something that is directly provided by Editor.

Allan