Drop down buttons don't work on dynamically loaded content #11294

4 Answer(s)

• 

  0

  ismcagdas created 2 years ago

  Support Team

  Hi @astrea

  Could you share how you are creating the dynamic items ? Are they loaded in cshtml or via JavaScript ? It would be great if you can share the related code as well.

  I assume, you are calling MenuComponent.reinitialization(); before the items are loaded like you said.

  Save Cancel
• 

  0

  astrea created 2 years ago

  Hi @ismcagdas,

  Let me try to provide the relavant code. I cut as much irrelevant stuff as possible

  lab-details.component.html

  <div [class]="containerClass">
      <div class="row">
          <div class="col-xl-6" *ngFor="let vm of labViewModel?.virtualMachinesViewModels">
              <div class="card mb-7 edulab-vm">
                  <div class="card-footer text-end">
                      <div class="d-flex flex-stack">
                          <div>
                              <button type="button" class="btn btn-sm btn-active-light-primary me-2" data-kt-menu-trigger="click">
                                BBB2
                              </button>
                            
                              <div class="menu menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px" data-kt-menu="true">
                                <div class="menu-item px-3">
                                  <span class="menu-link py-3">
                                    </span>
                                      <span class="menu-title" data-link="#">Some menu title</span>
  </div></div></div></div></div></div></div></div></div>
  

  lab-details.component.ts

  private refreshVirtualApplicationStatusTimer: Observable<number> = timer(0, this.refreshVirtualApplicationStatusIntervalSeconds * 1000);
  
  ngOnInit(): void {
      // Read Lab ID from URL parameter
      this.getLabIdFromUrlParameter().then(labId => {
          this.labId = labId;
          this.loadLabDetails();
  
          // Periodic VAPP refresh
          this.refreshVirtualApplicationStatusSubscription = this.refreshVirtualApplicationStatusTimer.subscribe(async () => {
              await this.refreshVirtualApplication();                
          });
      });
  }
  
  loadLabDetails() {
      this.loadVirtualApplicationAndInitializeUI(this.labId);
  }
  
  private async loadVirtualApplicationAndInitializeUI(labId: string): Promise<LabInstanceDto> {
      return new Promise((resolve, reject) => {
          this.loadVirtualApplication(labId)
              .then(labDto => {
                  if (this.processLabModel(labDto)) {
                      if (this.labViewModel !== undefined) {
                          this._pageTitleService.setPageTitle(this.labViewModel.name);
                      }
                  } else {
                      reject();
                  }
              })
              .finally(() => {                    
              });
      });
  }
  
  private async loadVirtualApplication(vappId: string): Promise<LabInstanceDto> {
      return this._labService.getLabDetails(vappId)
          .toPromise()
          .then((labDto) => {
              return labDto;
          })
          .catch((error) => {
              return null;
          });
  }
  
  private async refreshVirtualApplication(): Promise<LabInstanceViewModel> {
      return this.loadVirtualApplication(this.labId)
          .then(labDto => {
              this.processLabModel(labDto);
              return this.labViewModel;
          })
          .catch(error => {
              abp.log.error(error);
              return null;
          }).finally(() => {
          });
  }
  

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  Support Team

  Hi,

  So, where do you set labViewModel or labViewModel.virtualMachinesViewModels ? As an option, does taht work if you wrap MenuComponent.reinitialization with a setTimeout function ?

  Save Cancel
• 

  0

  astrea created 2 years ago

  Thank you for the tip! Wrapping the function in the setTimeout solved the problem! Also needed to move the refreshMenu function to the labViewModel.

  Kind Regards, Matt

  Save Cancel