Multiselect stays in standard style

Topic: Multiselect stays in standard style

Busch priority asked 3 weeks ago

Expected behavior

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

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.

Add comment

Busch priority answered 2 weeks ago

0 0 Best answer

<p>Thanks.</p>

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

<p>What I do when I load the html is (limited to relevant stuff):</p>

<pre class="prettyprint"><code>$.ajax({
  url: urlToLoad,
  method: 'GET',
  data: data,
  async: true,
  success: function (data) {
     $(elemToFill).html(data);
  }
});
</code></pre>

<p>to load a template from the backend. Among other stuff the template contains</p>

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

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

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

<p>for Javascript.</p>

<p>I double checked the html generated by analysing the code fetched and found </p>

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

<p>The JS of course if delivered exactly as definded in the template.</p>

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

Please insert min. 20 characters.

Thanks.

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):

$.ajax({
  url: urlToLoad,
  method: 'GET',
  data: data,
  async: true,
  success: function (data) {
     $(elemToFill).html(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_{{ one.id }}" selected="selected">{{ one.name }}</option>
    {% endfor %}
    {% for one in exclGroups %}
      <option value="g_{{ one.id }}">{{ one.name }}</option>
    {% endfor %}
  </select>

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'));
});
</script>

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>
</select>

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 2 weeks 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 2 weeks ago

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

I created a template here https://mdbootstrap.com/snippets/standard/busch/6053804

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 2 weeks 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.

Add comment

Kamila Pieńkowska staff answered 2 weeks ago

0 0 Best answer

Here is example of Select JS init: https://mdbootstrap.com/snippets/standard/kpienkowska/6052230

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

Add comment

Kamila Pieńkowska staff answered 2 weeks ago

0 0 Best answer

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: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage

Busch priority commented 2 weeks 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.

Add comment

Write

Create snippet

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: PC
Browser: Firefox
OS: Windows 11
Provided sample code: No
Provided link: No

Busch

0Support score
1Questions 1Answers 0Snippets