Problem with button condition "Enabled={true/false}"

🌎 Discussion in English
1

Hello, I am having trouble with disabling buttons conditionally:

I have this type of button:

<dot:Button Enabled="{value: PJT.IsEnrichmentJobCreating}" ID="startEnrichmentBtn" ButtonTagName="button"
            class="btn btn-success fw-bold"
            Click="{command: ConfirmAndStartJob()}">
    <span Visible="{value: !PJT.IsEnrichmentJobCreating}">
        <i class="fa-solid fa-wand-magic-sparkles me-2"></i>Start Enrichment
    </span>
    <span Visible="{value: PJT.IsEnrichmentJobCreating}">
        <span class="spinner-border spinner-border-sm me-2"></span>Starting…
    </span>
</dot:Button>

and I have a javascript event to actually make the button disabled while the viewmodel is running its function:

dotvvm.events.beforePostback.subscribe(function (sender) {
    var id = sender.sender ? sender.sender.id : null;
    if (id === 'startEnrichmentBtn')   dotvvm.viewModels.root.viewModel.PJT().IsEnrichmentJobCreating(true);
});

But instead of actually working, I get this error.

image
image1911Ă—905 85.7 KB

So I’m wondering what is the proper way to disable a button while a function is running on the backend?
Thanks for any answers, this is driving me crazy :stuck_out_tongue:

2

Hi!

Sorry about this, it’s a weird behavior which disables commands on disabled buttons. Since you disable the button via the view model before DotVVM serializes it and sends it to server, the button will also be disabled on the server, your command binding will be ignored and you get the “command not found” error.

I think in your case, you can actually use _page.IsPostbackRunning in the Enabled binding instead of your own property (which is always false on server even when we are in a postback…).

In more general case, you can prefix the binding with _page.EvaluatingOnServer || to keep the button enabled enabled server-side, while doing whatever else client-side

3

Hello!

I didn’t even know this existed until now but I will be using it from now on.

Thanks for the reply!