DTE_Processing_Indicator remains visible

aziegler3

I am creating a super simple scenario of editor.dependent().

    editor.dependent('COUNTRY', function (val) {
        if(val === 'CA'){
            editor.field('STATE').update(["D", "E", "F"])
        } 
    });

which is a copy of what is discussed here.

As I said, it is super simple. However, when I add it to the form, the field gets the DTE_Processing_indicator visible, and stays visible.
What am I missing here?

kthorngren

Not sure what is missing. Take a look at the browser's console for errors when this happens. Let us know what you find.

Kevin

aziegler3

That was my first action. No errors in the console.

kthorngren

Maybe post your Editor configuration.

Kevin

aziegler3

As I was saying, nothing extraordinary here:

editor = new DataTable.Editor( {
        ajax: '/RELEASE_SITES.php',
        table: '#RELEASE_SITES',
        template: '#customForm',
        i18n: {
            create: {
                title:  'New Release Site' 
            },
            edit: {
                title:  'Modify a Release Site' 
            }
        },
        idSrc: "OBJECTID"
        ,
        fields: [           
            {
                //label: "<b>Status</b>",
                name: "STATUS",
                default: "Proposed",
                type: "radio",
                options: [
                    {label: "Proposed", value: "Proposed"},
                    {label: "Approved", value: "Approved"}
                ]
            }, 
            {
                label: "<b>Country</b>",
                name: 'COUNTRY',
                type: 'select',
                submit: false,
                options: [
                    { label: '-- Select Option --', value: ''},
                    { label: 'United States', value: 'US' },
                    { label: 'Canada', value: 'CA' }
                ]
            },
            {
                label: "<b>State(USA)/Province(Canada):&nbsp;*</b>",
                name: "STATE",
                type: "select",
                options: US_states_domain
            },
            {
                label: "<b>County: </b>",
                name: "COUNTYNAME",
                type: "text"
            },
            {
                //label: "<b>Date:&nbsp;</b>",
                name: "OB_DATE",
                type: "datetime",
                def:    function () { return new Date(); },
                format: 'D-MMM-YY',
                fieldInfo: 'US style 1-Abc-11 format'
            },
            {
                label: '<b>Site Name:&nbsp;*</b>',
                name: 'SITE_NAME',
                //type: 'text',
                type: 'readonly'
            },
            {
                label: "<b>Site Location:&nbsp;*</b>",
                name: "SITE_LOCATION",
                type: "text"
            },
            {
                label: "<b>Latitude (dd.ddddd):&nbsp;*</b>",
                name: "POINT_Y"
            },
            {
                label: "<b>Longitude (-dd.ddddd):&nbsp;*</b>",
                name: "POINT_X"
            },
            {
                label: "<b>Plot:&nbsp;*</b>",
                name: "PLOT_TYPE",
                type: "select",
                options: plotTypeOpts
            },
            {
                label: "<b>Type:&nbsp;*</b>",
                name: "ORIGIN",
                type: 'select',
                options: prOpts
            },
            {
                label: "<b>Notes:</b>",
                name: "COMMENTS",
                type: "textarea"
            },
            {
                label: "<b>Dominant Species:&nbsp;*</b>",
                name: "OVERSTORY_AB_SP1",
                type: "hidden"
            },
            {
                label: "<b>EAB Density:&nbsp;*</b>",
                name: "EAB_DENSITY",
                //type: "hidden"
            },
            {
                label: "<b>% Ash (estimate):&nbsp;*</b>",
                name: "ASH_PCT",
                type: "hidden"
            },
            {
                label: "Size Wooded Area (acres):",
                name: "SIZE_WOODED_AREA",
                default: 0,
                type: "hidden"
            },
            {
                label: "User ID",
                name: "USERID",
                type: "hidden"
            },
            {
                label: "OBJECTID",
                name: "OBJECTID",
                type: "hidden",
                def: function(){
                    return theObjectID;
                }
            },
            {
                label: "GLOBALID",
                name: "GLOBALID",
                type: "hidden"
            }
        ]
    });

    editor.dependent('COUNTRY', function (val) {
        console.log(editor.field('STATE').label());
        if(val === 'CA'){
            editor.field('STATE').update(CA_states_domain)
        } else if (val === 'US'){
            editor.field('STATE').update(US_states_domain)
        } else {
            editor.field('STATE').update([
                { 'label' : '-- Select Option --' , 'value' : ''}])
        }
    });

kthorngren

As I was saying, nothing extraordinary here:

Yes but everyone ha a different solution so it's good to see what you have.

Is the processing indicator on the COUNTRY field or the form level?

Does the processing indicator appear when the form is opened or when submitting?

@allan may see something obvious but if not can you provide a link to your page for help debugging?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

editor.dependent('COUNTRY', function (val) {
    if(val === 'CA'){
        editor.field('STATE').update(["D", "E", "F"])
    } 

   return {};
});

will fix it. You need to tell Editor when your dependent() action is finished (to allow for async actions such as Ajax). The other option is to execute the callback function that is given as the third parameter to your own callback:

editor.dependent('COUNTRY', function (val, data, cb) {
    if(val === 'CA'){
        editor.field('STATE').update(["D", "E", "F"])
    } 

   cb({});
});

The dependent() docs could probably do with being rewritten to be clearer on the subject! It is so flexible that it is quite hard to document. It says the following is an option for the return from your function:

No value (i.e. undefined). In this case the callback function passed in as the third parameter to the function will be used to update the form once an async action has been completed. If no updates are required for the form, simply pass [sic - should be return, fix to be deployed] an empty object ({}).

Allan

aziegler3

Awesome! It did fix it.
I knew that there was a logical, simple answer.
Thank you!!!!