1

I need to prevent double clicking of a button. My goal is to disable it while im the DML operation is not completed. I am new with LWC so i don't exactly know how to proceed. Right now i just have the knowledge to make onClick button work and manage the results... but im not getting how to change the text of the button while the method or the dml is not completly processed.

This what i have now:

HTML:

<template>
    <lightning-card>
    <lightning-button 
    label="Generar todas las nominas de este mes" 
    title="Generar todas las nominas de este mes" 
    onclick={handleClick} 
    class="slds-m-left_x-small">
</lightning-button>

</template>

JS:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import GenrateNomina from '@salesforce/apex/CNT_GenerateNomina.generateALLNominas';
export default class Lwc_generateNomina extends LightningElement {
    @api recordId;
    handleClick() {
        console.log('HACE CLICK');
        GenrateNomina({ contractId: this.recordId })
            .then((result) => {
                if (result == 'ok') {                
                    this.showToastMethods('Yuuuujuuu!!!', 'Nomina Creadas!', 'success')
                }
                else {
                    this.showToastMethods('UPS!!!', result, 'success')
                }
                console.log(result);
            })
            .catch((error) => {
                this.showToastMethods('UPS!', error.body.message, 'Error')
            });
    }

    showToastMethods(title, message, variant) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        });
        this.dispatchEvent(event);

    }
}

Can someone help me a little bit! Thanks!

2 Answers 2

2

You have to add a "disabled" state for the button. And then manage this state in the request. The same with text value of the button.

HTML:

<template>
    <lightning-card>
    <lightning-button 
        label="Generar todas las nominas de este mes" 
        title="Generar todas las nominas de este mes" 
        onclick={handleClick}
        disabled={isButtonDisabled}
        class="slds-m-left_x-small">
    </lightning-button>

</template>

JS:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import GenrateNomina from '@salesforce/apex/CNT_GenerateNomina.generateALLNominas';
export default class Lwc_generateNomina extends LightningElement {
    @api recorded;
    isButtonDisabled = false;
    
    handleClick() {
        this.isButtonDisabled = true;
        console.log('HACE CLICK');
        GenrateNomina({ contractId: this.recordId })
            .then((result) => {
                if (result == 'ok') {                
                    this.showToastMethods('Yuuuujuuu!!!', 'Nomina Creadas!', 'success')
                }
                else {
                    this.showToastMethods('UPS!!!', result, 'success')
                }
                console.log(result);
            })
            .catch((error) => {
                this.showToastMethods('UPS!', error.body.message, 'Error')
            }).finally(() => {
                this.isButtonDisabled = false;
            });
    }

    showToastMethods(title, message, variant) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        });
        this.dispatchEvent(event);

    }
}
1
  • Thanks @LambuR, i got the idea to find the solution that i needed! It worked perfectly! Thanks! Commented Mar 13, 2023 at 12:18
3

Here's a similar scenario which I tried. We just need to bind the label , disabled property of lightning-button to a js variable in LWC.

Below is the lightning-button which has label & disabled property binded :

<lightning-button class="slds-m-left_xx-small slds-m-bottom_small slds-m-top_x-small"
                        variant="brand"
                        type="submit"
                        label={saveBtnLabel}
                        disabled={disableBtn}
                        onclick={handleSaveAll}>
    </lightning-button>

In JS class, we can initialise the properties as below :

saveBtnLabel = "Save";
disableBtn = false;

In the onClick handler , we need to first set the properties to disable the button to prevent double click & change label of button:

handleSaveAll() {
    //Set the properties here for preventing double click & changing label 
    this.saveBtnLabel = "Saving...";
    this.disableBtn  =true;
    saveContacts({ contactList : this.contactListToApex})
    .then(data => {        
       // In callback , reset the values to default ones
        this.disableBtn  =false;
        this.saveBtnLabel = "Save";
    })
    .catch(error => {
      console.log("error ",error);
    })
  }
1
  • 1
    Thanks Rohit, i had to convine both answers from you and @LambuR to get the solution. But it helped me a lot! Commented Mar 13, 2023 at 12:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .