Topic: Select Migration from Material Design for Bootstrap 4

hyliacom premium asked 1 year ago


Good morning,

We are migrating from Bootstrap 4 to version 5. We have integrated multiple selectors within modals that are loaded in real time on the web by ajax (They do not exist in the code).

In the previous version, once we loaded the modal, we used the following code to initialize ALL the MDB selectors;

$(document).ready(function(){$(\'#modal-form .mdb-select\').materialSelect();});

How should we currently do it with the latest version of MDB? In the documentation we have only seen the API section with initialization to a specific select.

Another use case we have to migrate. Before, using jquery, we could destroy a select, fill it with options and initialize it again, how would it be done now?

$('ID').materialSelect({ destroy: true });

$('ID').empty();

$('ID').append(OPTIONS);

$('ID').materialSelect({});

Thanks for the help


Grzegorz Bujański staff answered 1 year ago


To init all components on the page you can use code like this:

document.querySelectorAll('.select').forEach((selectEl) => {
    const instance = mdb.Select.getOrCreateInstance(selectEl)  
})

If you want to add new options to select this snippet can be helpful: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4807594#js-tab-view In this example only new options are added, but all you have to do is add code in it that will remove the old options


hyliacom premium commented 1 year ago

Thank you very much Grzegorz Bujański,

With the first tests we could not make it work. But after a few changes the indications you have given us now work correctly.



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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No