topic Re: disable div class in ArcGIS JavaScript Maps SDK Questions

disable div class

JamesCrandall — Sat, 11 Dec 2021 16:17:57 GMT

Should be something simple I'm missing but having difficulty setting the property an html element. The sample below is not working as expected -- I can click the element and it seems to execute when it should be "disabled".

This is the widget.html:

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍

This is the widget.js

startup: function () {

    // called on startup.           
     document.getElementById("refine-button").disabled = true;
    ‍‍‍‍‍

Re: disable div class

KenBuja — Sat, 11 Dec 2021 16:18:00 GMT

What I do with the WAB buttons is use the class 'jimu-state-disabled'. I have a function to enable or disable them. I also have my buttons set up slightly differently, using a data-dojo-attach-point to get at it

<div data-dojo-attach-point="btnApplyPriority" id="prioritybtn" class="jimu-btn apply" data-dojo-attach-event="onclick:applyEdits" style="margin-top: 5px">
  ${nls.applyPriority}
</div>‍‍‍‍‍‍‍‍‍

  _enableBtn(btn, isEnable) {
    if (btn) {
      if (isEnable) {
        html.removeClass(btn, 'jimu-state-disabled');
      } else {
        html.addClass(btn, 'jimu-state-disabled');
      }
    }
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and call it like this to disable the button.

this._enableBtn(this.btnApplyPriority, false);‍‍‍‍‍‍

You'll have to add the 'dojo/_base/html' module.

Re: disable div class

JamesCrandall — Fri, 15 Jun 2018 13:29:01 GMT

Ken, thanks for this! Sorry for the late reply, still trying to implement and troubleshoot before posting. It does seem to disable (appearance of the button) but the click event still works. Looking to see if there's something else I have going on that is causing this.

Re: disable div class

KenBuja — Fri, 15 Jun 2018 13:41:46 GMT

What's your html looking like? Are you apply that class to the enveloping div (from your first post) or to the div with the onclick event?

Re: disable div class

JamesCrandall — Sat, 11 Dec 2021 16:18:02 GMT

I'm probably misunderstanding here and not correctly implementing. I wanted to first make sure I'm not enabling that button/div somewhere else, so I double-checked that!

With that verified, I was hoping to disable the div from the JavaScript in the Startup function based upon the existence of a feature/graphic --- that is, checking to see if it exists and if not then disable that button. Here's what I've got so far, no errors and it hops thru your suggested enableBtn function as expected but the button does not actually disable!

HTML:

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍‍‍‍

JS:

enableBtn: function (btn, isEnable) {
    if (btn) {
 if (isEnable) {
 html.removeClass(btn, 'jimu-state-disabled');
 } else {
     html.addClass(btn, 'jimu-state-disabled');
 }
     }
},
beginWork_ExistingBoundary: function(){
    this.getScratchGeometry().then(lang.hitch(this, function (scratchQueryResults) {
 this.originalGraphic = this.getGraphicFromQueryResults(scratchQueryResults);
 debugger
 if (!this.originalGraphic) {
     this.enableBtn(document.getElementById("refine-button"), false);  //this is where & when I'd like to disable the button functionality
 }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Again, thanks for your suggestions and input!

Re: disable div class

KenBuja — Sat, 11 Dec 2021 16:18:05 GMT

First try it this way

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div id="btnRefine" class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍

this.enableBtn(document.getElementById("btnRefine"), false);‍

Then see if this works

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div data-dojo-attach-point="btnRefine" class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>
</div>‍‍‍

this.enableBtn(this.btnRefine, false);‍

Re: disable div class

JamesCrandall — Fri, 15 Jun 2018 14:46:07 GMT

Ken, both of these evaluate in the enableBtn function as expected but again I still see the same result: the button works when I click on it (ie. it is "enabled" somehow).

Browser cache? I'll run thru trying to clear history.

Re: disable div class

KenBuja — Sat, 11 Dec 2021 16:18:08 GMT

I apologize...I've been giving you false hopes. In my code, the onclick action is still active. The same test used to determine whether to enable/disable the button is also used in the onclick function to determine if it's OK to proceed.

First I see if the button is enabled

const features = this.myLayer.getSelectedFeatures();
this._enableBtn(this.btnApply, features.length > 0);‍‍‍‍‍‍‍‍‍

and in my onclick function code, I check that value again.

  applyEdits(evt) {
    const features = this.myLayer.getSelectedFeatures();
    if (features.length === 0) {
      return;
    }
    // rest of code
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: disable div class

JamesCrandall — Fri, 15 Jun 2018 15:22:56 GMT

Ok! Thanks again for your input!

Re: disable div class

RobertScheitlin__GISP — Fri, 15 Jun 2018 15:32:59 GMT

This is normally why I do not use

data-dojo-attach-event

If you add the event handler in your widget.js then you can pause or add and remove the event listener as needed.

Re: disable div class

JamesCrandall — Fri, 15 Jun 2018 15:44:32 GMT

Thanks for that, Robert!

Re: disable div class

JamesCrandall — Fri, 15 Jun 2018 17:30:50 GMT

Ken, I took this post and implemented similar check to see if a feature exists but have it in a function that can be called when that button is clicked and evaluates to simply not execute based upon the count.

Thanks!