Multiselect , text picker widgets is not auto assigned in dy

Topic: Multiselect , text picker widgets is not auto assigned in dynamic template loading

mortgagekart priority asked 1 year ago

We are using MDB bootstrap-mdb/plugins/js/all.min.js and bootstrap-mdb/js/mdb.min.js.If we use it with static pages it works very well.

We want to use it with dynamic templates of nunjucks , when i tried to inject the template fragment , in already loaded index page with bootstrap-mdb/plugins/js/all.min.js and bootstrap-mdb/js/mdb.min.js, it is not assigning or reinitialise the widget java script, Iis there any way by which we can trigger JS ?

Or What is the way to use MDB with dynamic templates ?

enter image description here

Actual behavior enter image description here

Resources (screenshots, code snippets etc.)

Create Team
One Two Three Four Five

enter image description here

Add comment

Mateusz Lazaru staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

I don't really know nunjucks, but auto-initialization sometimes doesn't work for dynamically rendered content. If that's the problem, you must manually init the component via javascript. You will find info how to do it there: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage

Example code to fix all selects on the page:

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

mortgagekart priority commented 1 year ago

Thank you for your reply , we tried to init it .

If i am facing same issue with plugin components like https://mdbootstrap.com/docs/standard/plugins/wysiwyg-editor/ then how i should manually do initialisation of it. Are there any common methods which can init such widgets ?

Mateusz Lazaru staff commented 1 year ago

It's basically the same for all components and you can find informations about it in the component's API in the 'usage' section. e.g.https://mdbootstrap.com/docs/standard/components/modal/#docsTabsAPI

For plugins, use:

const element = document.querySelector(<YOUR_SELECTOR>)
new PLUGINNAME(element)

For other components, use:

const element = document.querySelector(<YOUR_SELECTOR>)
new mdb.COMPONENTNAME(element)

or getOrCreateInstance(element) - it's sometimes better, because it ensures you won't init one component many times on a single element, which could possibly cause some errors.

const element = document.querySelector(<YOUR_SELECTOR>)
mdb.COMPONENTNAME.getOrCreateInstance(element)

NOTE: You can check if component supports getOrCreateInstance on it's api section.

Every component supports new keyword, of course.

WYSIWYG dynamic init example

It's basically the same for all components and you can find informations about it in the component's API in the 'usage' section.
e.g.<a href="https://mdbootstrap.com/docs/standard/components/modal/#docsTabsAPI" target="_blank">https://mdbootstrap.com/docs/standard/components/modal/#docsTabsAPI</a>

For plugins, use:

<pre class="prettyprint"><code>const element = document.querySelector(<YOUR_SELECTOR>)
new PLUGINNAME(element)
</code></pre>

For other components, use:

<pre class="prettyprint"><code>const element = document.querySelector(<YOUR_SELECTOR>)
new mdb.COMPONENTNAME(element)
</code></pre>

or <code>getOrCreateInstance(element)</code> - it's sometimes better, because it ensures you won't init one component many times on a single element, which could possibly cause some errors.

<pre class="prettyprint"><code>const element = document.querySelector(<YOUR_SELECTOR>)
mdb.COMPONENTNAME.getOrCreateInstance(element)
</code></pre>

NOTE: You can check if component supports <code>getOrCreateInstance</code> on it's api section.

Every component supports <code>new</code> keyword, of course.

<a href="https://mdbootstrap.com/snippets/standard/mlazaru/5235781#js-tab-view" target="_blank">WYSIWYG dynamic init example</a>

Please insert min. 15 characters.

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 6.2.0
Device: desktop
Browser: chrome
OS: ubanti
Provided sample code: No
Provided link: No

mortgagekart

0Support score
10Questions 0Answers 2Snippets