Topic: Form field from AJAX
I don't anderstand how to generate an form field return by ajax.
The input, select, select multiple does not work and stay standard form field.
I try
document.querySelectorAll(".form-outline").forEach((formOutline) => { new mdb.Input(formOutline).init(); });
AND
selectEl = document.getElementById("xxx"); select = new mdb.Select(selectEl);
But i have the error "mdb.Input is not a constructor" or mdb.select is not a constructor...
With MDB4 i call .materialSelect(); and done ..
How to generate form in ajax with MDB5 ?
Is it possible to listen the dom change and apply the same comportement than a standard page .. all the object auto generated ?
Thank
Here you will find an example of how to check if a component requires initialization: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3007489#js-tab-view
D. Möller free commented 3 years ago
This does not work. Because even if the select is present but not initialized, then the check fails, respectively instance is present.
Grzegorz Bujański staff commented 3 years ago
Information about initialized components is stored in the data object.
This allows use getInstance method to check if this component has been initialized. We use this every day and we haven't encountered any bugs yet. Please provide a snippet in which this error occurs
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
I created a snippet in which input initialization and dynamically generated select (via JS) work. It is available at this link: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2952791#html-tab-view Can you create an example where this error occurs?
MyHomeTendance priority commented 3 years ago
it seems that the problem comes from the version generated with webpack ... All "new mdb.xx calls fails .. "mdb is not defined"
What am i doing wrong : download mdb-webpack-starter from github npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced npm run buildMDB
Grzegorz Bujański staff commented 3 years ago
I checked it and the project works after the build. here you will find a simple page that I created in the webpack starter and published on our server using MDB CLI: https://build-test.mdbgo.io/ How exactly do you do that? Do you make changes, run build, and get an error when running built files? Are you trying to make these changes after the build?
D. Möller free commented 3 years ago
Same problem here: mdb is not defined. Also the snipped ist not working
Grzegorz Bujański staff commented 3 years ago
@d.moeller@straphael.de same question. What's your workflow? In the example I sent above you can click init input and init select to run
new mdb.Input(formOutline).init();andnew mdb.Select(selectEl);same as in the snippet I sent above and it works for me. I need more information to debug this issue.D. Möller free commented 3 years ago
Im Using Laravel 8. MDB with webpack included as in the tutorial with npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential and import * as mdb from 'mdb-ui-kit';An input mask with different dropdowns is reloaded via LiveWire by pressing a button. But the dropdowns are not initiated. Subsequent initiation with the suggested code does not work. In the console of the browser I get "Uncaught ReferenceError: mdb is not defined".
Addition: Other MDB dropdowns that are loaded directly with the page work fine. Reloaded ones via Ajax (in my case via LiveWire) are not initiated and cannot be initiated afterwards (Uncaught ReferenceError: mdb is not defined).
D. Möller free commented 3 years ago
I was able to solve the problem. I noticed that in the instructions for installing plugins in the explanation is still the following line: window.mdb = mdbThis is not there in the npm instructions for installation. After I added this, it now works. Now I only have the problem that dropdowns that were already there before are now copied, but this should be solvable...
Grzegorz Bujański staff commented 3 years ago
It's hard to say why dropdowns are copied. Look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2973622#js-tab-view dropdown is initialized with data attr, then js, and you can initiate them manually by the init button. It does not copy the dropdown.
D. Möller free commented 3 years ago
If the DropDown has a unique id and you use this as selector, then nothing will be copied. If you only use the CSS attribute then it copies all DropDowns on the whole page. In the meantime everything works for me, even if in between using TinyMCE or KDEditor destroyed the MD-Selects and Dropdowns again. But I've got that under control in the meantime.
D. Möller free commented 3 years ago
Unfortunately, my last statement is not quite correct after all. In another case, a select is copied to me with a call to new mdb.Select(selectEl). Can I check before the call if this is necessary at all.