Assign a value to different field after pulldown Onchange event

AstecConsulting

In a lightbox editor form, I am trying to update a field after a dropdown list selection is made. At this point I am just manually assigning a value of 100 to test if the Onchange event is suitable to task.Unfortunately the transaction.amount field never updates. When I run the code under the Chrome debugger I get an Undefined, Unknown field error. The alert in the code block below fires off just fine.

editor.field('transaction.Item').input().on('change', function (e, d) {
     
    if ( d && d.editorSet )return;{
         var selectedval =  $(this).val();
         alert("You selected " + selectedval);
         editor.field( 'transaction.Amount' ).val( 100 );
        }
});

I pulled this almost identical block of code from the forum. What am I missing here ?

$( editor.field( 'firstField' ).input() ).on( 'keyup', function (e, d) {
        if ( ! d || ! d.editor ) {
     
          editor.field( 'secondField' ).val( "Closed");   
          editor.field( 'updated_by' ).val( );      
         
        }
        } );

colin

Hi @AstecConsulting ,

It would be best to use dependent() for that - see this example. If you change "office" tobe "XXX" it will update the salary.

Hope that helps,

Cheers,

Colin

AstecConsulting

Colin,

Thanks for your quick reply. I have spent way more time on this than I will ever admit. Per your suggestion, I went ahead and tried the dependent() feature which I agree is a better approach. I get a similar result in that the Edit form hangs a bit and opening up the Chrome debugger shows
2dataTables.editor.min.js:54 Uncaught Unknown field name - transaction.Amount
Either I am missing the correct javascript library reference or that field name , which is a result of a left-outer join, is not compatible . I looked at the libraries in the example you provided and only the autofill.js was missing. Also added that and no change.

colin

Hi @AstecConsulting ,

Would you be able to link to your page so we could take a look? If not, could you post it here. The error wasn't missing source files, it's reporting that a field name couldn't be found,

Cheers,

Colin

AstecConsulting

Here is the server side

<?php
session_start();
$studentid = $_SESSION['studentid'];

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'document', 'DocumentID' )

    ->fields(
        Field::inst( 'document.DocumentID' ),
        Field::inst( 'document.StudentID' ),
        Field::inst( 'document.Description' ),
        Field::inst( 'document.Type' )
        
            ->options(Options::inst()
            ->table( 'documenttype' )
            ->value( 'DocumentTypeID' )
            ->label( 'DocumentType' )),
    
        Field::inst( 'document.CreationDate' )
            ->validator( Validate::dateFormat( 'm/d/Y' ) )
            ->getFormatter( Format::dateSqlToFormat( 'm/d/Y' ) )
            ->setFormatter( Format::dateFormatToSql('m/d/Y' ) ),


        Field::inst( 'document.ImagePath'),
        Field::inst( 'documenttype.DocumentType')
        )
         ->leftJoin( 'documenttype',     'documenttype.DocumentTypeID', '=', 'document.Type' )

    ->where('Studentid',$studentid,'=' )        
    ->process( $_POST )

    ->json();

<?php
>
```
Datatables initialization code. The dependent() feature you suggested is at line 58. To simplify things I just used a text field similar to the example you provided. I have changed field, changed values, and even disable the other dependent() function.
?>

var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "ajax_dt_transactions.php",
table: "#dtTransactions",

    fields: [  
        {   label: "StudentID:",
            name: "transaction.StudentID",
        }, {
            label: "TransactionID:",
            name: "transaction.TransactionID",
        }, {
            label: "Item:",
            name: "transaction.Item",
            type:  "select",
            placeholder: "Select Item"
        },
        {
            label: "Amount:",
            name: "transaction.Amount",
        },
        {
            label: "Method:",
            name: "transaction.Method",
            type:  "select",
            placeholder: "Select Method"
        },
         {
            label: "TransactionDate:",
            name: "transaction.TransactionDate",
            type: "datetime",
            format: 'MM/DD/YYYY',
        }, {
            label: "CheckNo:",
            name: "transaction.CheckNo"
        }
    ]
} );

editor.on( 'preSubmit', function ( e, o, action ) {
var amount = this.field( 'transaction.Amount' );
if ( ! amount.val() ) {
amount.error( 'Amount must be provided' );
}
if ( this.inError() ) {
return false;
}
} );

editor.dependent( 'transaction.TransactionID', function ( val ) {
return val === '' ?
{ hide: ['transaction.TransactionID'] } :
{ show: ['transaction.TransactionID'] } ;
} );

editor.dependent('transaction.CheckNo', function(val, data, callback) {
if (val === '222') {
editor.field('transaction.Amount').set(12345);
}
callback(true);
});

$('#dtTransactions').DataTable( {

    dom: "Brtp",
    ajax: { 
        url:"ajax_dt_transactions.php",
        type:"POST"
    },
    serverSide: true,
    columns: [
        { data: "transaction.TransactionID" },
        { data: "item.item_desc" },
        { data: "transaction.Amount",
            render: $.fn.dataTable.render.number( ',', '.', 2 ) },
         { data: "method.method_desc" },    
        { data: "transaction.TransactionDate" },
        { data: "transaction.CheckNo" }
    ],
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
} );

} );
```

allan

Do you have multiple Editor instances on your page? You have a global var editor; at the top of the JS there. We do that in our demos since we need a reference to the instance from our demo script to display extra data about the example, but its unlikely you want to do that locally. I'd suggest using:

var editor = new $.fn.dataTable.Editor( {

Allan

AstecConsulting

Yes that fixed it . Thanks so much for catching this. It was becoming an obsession. I am pretty new to datatables and a bit overwhelmed with all of the functionality. Coming from a dotnet background so its copy, paste, customize and debug which explains the multiple Editor instances.

As a follow, can you recommend a simple method to lookup a value in a database that corresponds to the selected value in a dropdown list ? Since this is happening at the client side, I need to pull the value down before the edit form is closed. In the dotnet world I will hide the value I am looking to assign as a field in the pulldown, then just reference it after the selection. Its a small table so I could also assign it to an array as the table data only changes annually.

Thanks again for your help.

allan

Good to hear that helped .

dependent() is probably the best way of doing what you are looking for now. I wrote another reply earlier discussing it which I think is applicable here.

Let me know how you get on with it.

Allan

AstecConsulting

Thanks Allan. Sorry it took me awhile to respond but my appendix decided it wanted to come out so I've been in a bit of a fog. On my feet again so I will be diving back into the forum and following the thread you suggested. Please mark these threads as closed.