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

ikan_nak priority asked 3 days 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 21 hours ago


Please publish your snippet or I won't be able to see it.


ikan_nak priority commented 21 hours 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

  • ForumUser: Priority
  • 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