Answers

• kthorngren Posts: 21,337Questions: 26Answers: 4,953

  August 27

  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 Posts: 47Questions: 11Answers: 1

  August 27

  That was my first action. No errors in the console.
• kthorngren Posts: 21,337Questions: 26Answers: 4,953

  August 27

  Maybe post your Editor configuration.

  Kevin
• aziegler3 Posts: 47Questions: 11Answers: 1

  August 27

  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 Posts: 21,337Questions: 26Answers: 4,953

  August 28 edited August 28

  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 Posts: 63,512Questions: 1Answers: 10,472 Site admin

  August 28 Answer ✓

  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 Posts: 47Questions: 11Answers: 1

  August 28

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