Topic: Modal won't open from button on component added to the page through appendChild
*Expected behavior*I have a regular HTML table loaded asynchronously and added to the page using appendChild with a number of links on them, all of this format:
<a href="retrieveMachineParameterBootstrap.action?actionType=0" class="c-table-display__action-icon"
onclick="return false;" data-mdb-toggle="modal" data-mdb-modal-init=""
data-kobee-url="retrieveMachineParameterBootstrap.action?actionType=0"
data-mdb-target="#machineParameterDialog" data-kobee-title="Create Machine Parameter">
<img src="/images/create.png" title="Create Parameter">
</a>
This is one link anchor, but there are dozens more that all need to use the #machineParameterDialog modal:
<div id="machineParameterDialog" class="modal">
<div class="modal-dialog">
<div class="modal-content" id="machineParameterDialogContents"></div>
</div>
</div>
The intent is that when a link is clicked, it should open the modal and asynchronously load the contents of that modal using the data-kobee-url dataset attribute, including the header, the footer and the body. I had something like this working in Dojo 1.16, and I had a similar code without the asynchronous table part working in a Bootstrap 5.2 project.
Actual behavior
When I put a breakpoint inside my loadModal code (see the snippet below), the breakpoint never gets reached. I think what's happening is that the HTML table, which gets loaded asynchronously and added to the page using appendChild, does not get parsed by MDB, and hence the mdb-modal-init attributes don't get detected and the modal doesn't get inited. If this is the case, how would I go about getting MDB to parse content added using appendChild?
Resources (screenshots, code snippets etc.)https://mdbootstrap.com/snippets/standard/ikan_nak/6277425#js-tab-view summarized Modal.js code
Kamila Pieńkowska staff answered 2 months ago
If you add content after page load you need to use JS init for components to work.
You can inspire your solution of modal content being changed on this example: https://mdbootstrap.com/docs/standard/data/datatables/#section-clickable-rows
Kamila Pieńkowska staff answered 2 months ago
Please publish your snippet or I won't be able to see it.
ikan_nak pro premium priority commented 2 months ago
Sorry, I thought I had published it. it should be published now.
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.3.0
- Device: Desktop computer
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes