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

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

minion_warriorminion_warrior Posts: 7Questions: 1Answers: 0
edited September 2016 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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_warriorminion_warrior Posts: 7Questions: 1Answers: 0

    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_warriorminion_warrior Posts: 7Questions: 1Answers: 0

    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 ); }
    );
    } );

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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_warriorminion_warrior Posts: 7Questions: 1Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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_warriorminion_warrior Posts: 7Questions: 1Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

This discussion has been closed.