Topic: Can't reinitialise components after content change (e.g. ajax call)

VDLP priority asked 4 months ago


We are upgrading to MDB v7.2.0, but we encounter some issues. We have a tab where we populate the content from an ajax call. In the response of this ajax call there is a new select input, but it doesn't get initialised by MDB.

We've added the data-mdb-select-init attribute to this select and this select does work if we put it outside the ajax response (so in the initial load).

We are calling the initMdb method with all the used components after every ajax content update, but it looks like it doesn't initialise new elements/components. While looking in the source code I found this piece of code, where it looks like every component can only be initialised once.

const initComponent = (component, manualInit = false) => {
  if (!component || InitializedComponents.get(component.NAME)) {
    return;
  }

  InitializedComponents.set(component.NAME);

For an extra check I added a console log before the initMDB call for the select, and this function logs my new select (and the other existing selects):

console.log(document.documentElement.querySelectorAll('[data-mdb-select-init]'));

Expected behavior

When I call the initMDB method with the used components, it should initialize newly created html elements in the DOM. We have the same issue for multiple components.

Actual behavior

The initMDB method only initialises components once.


Kamila Pieńkowska staff answered 4 months ago


If you add content after page is loaded you need to initialize it manually with JS.

Every component have code needed to do that in API usage section: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: n/a
  • Browser: n/a
  • OS: n/a
  • Provided sample code: Yes
  • Provided link: No
Tags