Jquery .html and .append not working in a modal.


Topic: Jquery .html and .append not working in a modal.

robshelby asked 2 years ago

For some reason, Jquery's .html() and .append() don't seem to be working.

Do I need to re-render the modal?

Because I'll .append() a DIV in the modal and then I alert() the modal's .html() and it looks correct there.

But when the Modal is shown, the changes aren't there.

How do I re-render the modal so it reflects the changes?

THANK YOU!


Marcin Luczak staff answered 2 years ago

Hi,

To which part of the modal you are appending the div? I've created the snippet where I append custom content to the .modal-body element and everything seems to be working fine. https://mdbootstrap.com/snippets/jquery/marcin-luczak/2695178

If this doesn't work for you, please post a snippet with your code so I can check it, or try to append elements dynamically on shown.bs.modal and delete them on hide.bs.modal event. Otherwise, your custom elements will stack inside the modal body.

$("#modalSelector").on('shown.bs.modal', function(){
   // append elements
 });
$("#modalSelector").on('hide.bs.modal', function(){
  // delete elements
});

Regards, Marcin


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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.11
  • Device: windows
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags