Boostrap model showing twice when double click the button

Question

Htl code is here:

 <span class="fal fa-user green" style="cursor:pointer;"  (click)="openlotModal(lotTemplate,item);"
                  title="Add Chapter" *ngIf="edit==true"></span>

Type script code is here:

 openlotModal(template: TemplateRef<any>, item, event) {
        const jobObject = new Object({
            jobid: item.jobid
        });
        this.jobdefinitionservice.GetJobWorkFlowDefCount(jobObject).subscribe(res => {
            if (res.body[0] != null) {
                this.LoadChaptertypes();
                this.TablePagination = {
                    itemsPerPage: 10,
                    maxPages: 5,
                    fillLastPage: false
                };
                this.job = item;
                this.lotModalRef = this.modalService.show(template, this.configlot);
                const aa = document.getElementsByClassName('modal-content');
                aa[0].classList.remove('modal-content');
            } else {
                this.moveToJobDefinition(item);
                this.toastr.warning('Please complete job configuration, then proceed');

            }
        });
    }

I cant getting how to restrict the double click here

maybe this can answer your question https://stackoverflow.com/questions/48295288/how-to-handle-single-click-and-double-click-on-the-same-html-dom-element-usi — Elmehdi, Sep 30 '20 at 14:11

score 0 · Accepted Answer · answered Sep 30 '20 at 14:14

I think the observable from .subscribe is triggered more than once, this is normal behavior.

try:

this.jobdefinitionservice.GetJobWorkFlowDefCount(jobObject).toPromise().then(res => {
            if (res.body[0] != null) {
                this.LoadChaptertypes();
                this.TablePagination = {
                    itemsPerPage: 10,
                    maxPages: 5,
                    fillLastPage: false
                };
                this.job = item;
                this.lotModalRef = this.modalService.show(template, this.configlot);
                const aa = document.getElementsByClassName('modal-content');
                aa[0].classList.remove('modal-content');
            } else {
                this.moveToJobDefinition(item);
                this.toastr.warning('Please complete job configuration, then proceed');

            }
        });

Else u might need to set a variable and change it back when the modal is shown.

isOpening = false;

        ....
        if(this.isOpening) {
            return;
        }

        this.isOpening = true;
        this.jobdefinitionservice.GetJobWorkFlowDefCount(jobObject).toPromise().then(res => {
            this.isOpening = false;
            if (res.body[0] != null) {
                this.LoadChaptertypes();
                this.TablePagination = {
                    itemsPerPage: 10,
                    maxPages: 5,
                    fillLastPage: false
                };
                this.job = item;
                this.lotModalRef = this.modalService.show(template, this.configlot);
                const aa = document.getElementsByClassName('modal-content');
                aa[0].classList.remove('modal-content');
            } else {
                this.moveToJobDefinition(item);
                this.toastr.warning('Please complete job configuration, then proceed');

            }
        });

Boostrap model showing twice when double click the button

1 Answers1