Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

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:
HTML:
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!
 
This seems to be close to what I might want to do:
...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.
 
As a test, I tried:

HTML:
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.
 
I also tried:
Code:
<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.
 
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.
 
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.
 
I was able to disable the button with:
HTML:
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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom