Topic: Multiselect stays in standard style
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.
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 pro premium priority commented 7 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.
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.
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 7 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 pro premium priority commented 7 months 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 7 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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