Modal won't open from button on component added to the page


Topic: Modal won't open from button on component added to the page through appendChild

ikan_nak pro premium priority asked 2 months ago

*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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags