Button that won't change status until validation completes? Or that changes, but changes back if validation fails?

[dstromberg]

Hello people.

I currently have a (I think) pure CSS button that toggles between "PRESERVED" and "NOT PRESERVED". That's been good enough 'til now, even though infrequently the button will change but the underlying state doesn't, resulting in a button that has the wrong value (IOW, "PRESERVED" when it should be "NOT PRESERVED", or vice-versa).

But now we have some additional validation that will frequently have us not wanting to toggle between "PRESERVED" and "NOT PRESERVED" - IOW when the button actually should continue to say (or return to saying) "NOT PRESERVED".

The web site is internal-only, so I can't really give a URL, but I half-think the current pure CSS button is described at https://codepen.io/planetXD/pen/mEbaBo (it was originally added to our internal website by someone who is no longer with the company).

The HTML currently looks like:

Preserve Build<br />
<div ng-if="!vm.updatingStatus" class="onoffswitch onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
            ng-change="vm.UpdatePreserveStatus()"
            ng-model="build.preserved"
            ng-false-value="false"
            ng-true-value="true">
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
<div ng-if="vm.updatingStatus">
    <span class="spinner-40-battlenet"></span>
</div>

If I set a breakpoint in vm.UpdatePreserveStatus, then the button toggles before the first line of vm.UpdatePreserveStatus is executed - that is, it's processing the button click, not deciding whether the button click should be allowed to happen.

I don't think we want to just gray out the button, unless perhaps there's some way of putting a tooltip over the grayed button describing why it shouldn't be used right now.

Is there a way I can validate the toggle button, only toggling if a javascript function believes it should toggle? Or alternatively, is there a way I can toggle the button irrespectively, but then change it back if there's a bad validation? Or the gray+tooltip option?

Thanks!

 

[dstromberg]

This seems to be close to what I might want to do:

HTML button disabled Attribute - Dofactory

HTML button disabled -- the best examples. The disabled attribute on a <button> tag disables the button. The button appears grayed out and it is unusable.

www.dofactory.com

...except I would need a tooltip/hover text, and I want the button disabled or not disabled on page load as well as when that (same) button is clicked.

 

[dstromberg]

As a test, I tried:

Preserve Build<br />
<div ng-if="!vm.updatingStatus" class="onoffswitch onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
            ng-change="vm.UpdatePreserveStatus()"
            ng-disabled="true"
            ng-model="build.preserved"
            ng-false-value="false"
            ng-true-value="true">
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
<div ng-if="vm.updatingStatus">
    <span class="spinner-40-battlenet"></span>
</div>

IOW I added the ng-disabled="true"
...but the button wasn't disabled. And I'm not seeing any errors - on the other hand, I see nothing on the console despite this being a rather large application.

 

[dstromberg]

I also tried:

<div ng-if="!vm.updatingStatus" class="onoffswitch onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
            ng-change="vm.UpdatePreserveStatus()"
            [disabled]="true"
            ng-model="build.preserved"
            ng-false-value="false"
            ng-true-value="true">
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
<div ng-if="vm.updatingStatus">
    <span class="spinner-40-battlenet"></span>
</div>

...because I heard that [disabled] is more recent than ng-disabled.

It didn't work though: the button remains enabled.

 

[JosiahMaybe]

I am unsure as I do not know much CSS, but I think you should use some Javascript for this.
X E.

 

[dstromberg]

Hi Josiah. Thanks for your response.

I'm hoping I can replace [disabled]="true" with something like [disabled]="should_be_disablable", where should_be_disablable would be in Javascript. But that might come later, because right now just using the hardcoded constant true isn't disabling the button.

Thanks again.

 

[JosiahMaybe]

If you are using Javascript, use events like onhover or onmouseover or onmouseleave and set CSS or HTML parts from a separate Javascript thing. I do not know of a way to directly input what it should be to CSS without a listener and a thing inside that listener to set CSS and HTML properties. So for this you could use a HTML file and maybe set style or CSS class from Javascript to match your needs. Note that Javascript can be disabled.
X E.

 

[dstromberg]

Wow, it looks like this code (which is being rewritten) is using AngularJS. So I may have been closer before: ng-disabled="true"

 

[JosiahMaybe]

I would use regular Javascript that goes in script tags like for those event listeners. You do whatever however you want.
X E.

 

[dstromberg]

I was able to disable the button with:

Preserve Build<br />
<div ng-if="!vm.updatingStatus" class="onoffswitch onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
            ng-change="vm.UpdatePreserveStatus()"
            ng-disabled=0
            ng-model="build.preserved"
            ng-false-value="false"
            ng-true-value="true">
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
<div ng-if="vm.updatingStatus">
    <span class="spinner-40-battlenet"></span>
</div>

IOW, I needed ng-disabled=0

It's not graying itself out, but it's still closer to what I want.

BTW, finding this solution was complicated by a docker oddity. I turned out remove and recreating my container wasn't enough - I also had to remove a directory hierarchy outside the container.