Topic: Multiselect stays in standard style

Busch priority asked 3 months ago

Expected behavior

<select data-mdb-select-init multiple>
         <option ...>...</option> 

turns into mdb-style multi select

Actual behavior:

It works fine when loading a full page, but when loading the form via jQuery $.ajax-Call and setting the html-code via $('#...').html(), the control stays in standard browser style

Hopefully I just forgot a call in success method, but I did not find a hint in the documentation.

Busch priority answered 3 months ago


I tried this and now I get an error "t.childNodes is undefined" in js/pro/select/index.js line 233.

What I do when I load the html is (limited to relevant stuff):

  url: urlToLoad,
  method: 'GET',
  data: data,
  async: true,
  success: function (data) {

to load a template from the backend. Among other stuff the template contains

  <select name="inGroup[]" id="inGroup" data-mdb-select-init multiple>
    {% for one in inclGroups %}
      <option value="g_{{ }}" selected="selected">{{ }}</option>
    {% endfor %}
    {% for one in exclGroups %}
      <option value="g_{{ }}">{{ }}</option>
    {% endfor %}

for html to generate the list and the allready preselected values are placed at the top. Then you would find

<script type="application/javascript">
$(document).ready(function () {
  new mdb.Select($('#inGroup'));

for Javascript.

I double checked the html generated by analysing the code fetched and found

<select name="inGroup[]" id="inGroup" data-mdb-select-init multiple>
  <option value="g_01HV1PFQ1XJDJ1TMNNG0EAWTCW" selected="selected">Fisch</option>
  <option value="g_01HV1PZCQX5QTTHWWYR56Q4MTG">Frosch</option>

The JS of course if delivered exactly as definded in the template.

The ajax call is executed on demand and the document ready stuff is executed after the html is set in success method.

Kamila Pieńkowska staff commented 3 months ago

Are you sure that init function run after your template is ready and not after basic html is loaded?

Please try to recreate this error in the snippet.

Busch priority commented 3 months ago

In fact I NEVER had a timing problem with document ready functions...

I created a template here

In there everything works fine, but of course this is not exactly what I'm doing when executing my code...

Maybe I should shift my activities from jquery to vanilla.... #sigh#

Kamila Pieńkowska staff commented 3 months ago

We always suggest VanillaJS over jQuery. You may not need to change whole code but try this specific part to make sure your JS initiation run when html element exist in HTML. Also since you use JS init it's better to remove auto init attribute: data-mdb-select-init You did not publish your snippet, so I do not have access to code in it.

Kamila Pieńkowska staff answered 3 months ago

Here is example of Select JS init:

Make sure you init Select component after it is added. You use umd format so you need to use mdb.Select.

Kamila Pieńkowska staff answered 3 months ago

Components are initiated on a page load. So if you add them after that they wont be initiated and you need to initiate them manually with JS.

You can see example of JS init in Usage section of API tab:

Busch priority commented 3 months ago

Thanks for answer. I gave it a try and added

$(document).ready(function () { const predSelect = new Select($('#inGroup')); const rlSelect = new Select($('#rlevel')); });

Unfortunately I get an "Select is not defined" error. The FireBug network list says mdb.umd.min.js has been loaded with the main page.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No