Cannot call jQuery/JavaScript functions from within a popover with HTML


Topic: Cannot call jQuery/JavaScript functions from within a popover with HTML

scottwilliams priority asked 3 years ago

Expected behavior I expect to be able to call a jQuery function from within a popover component's HTML content using an onclick event. Also should be able to run simple javascript from the onclick event, but can't.

Actual behavior Nothing happens when the onclick event is triggered.

Resources (screenshots, code snippets etc.)

<span tabindex="0" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-html="true" data-container="body" data-content="<span class='d-block mb-2 w-100'>Ineligible for download.</span><div class='d-flex flex-column'><a onclick='console.log('Works!')' id='vssLP_StartChatBtn' class='btn btn-flat btn-flat-black d-inline-flex align-items-center justify-content-start w-nowrap m-0 px-1 py-2'><i class='mdi mdi-comment-text mt-0 pt-0 mr-2'></i> Start chat</a></div>"><small>Why can't I download?</small></span>

scottwilliams priority answered 3 years ago

This was our Devs' solution. Perhaps you can use it as reference for a permanent solution or add it to the Docs for reference. Thanks.

*Problem:*The main issue with popovers is that the content is not rendered as part of HTML until the popover has finished loading. We were trying to get the id of a div placed in the popover text and that was inaccessible. Also, the inner div was not accessible without referring the outer div.

*Our Solution/workaround:*The first step that I took was to separate the popover content from the data-content attribute and put it in a hidden div which would be called upon clicking the popover.

We used the popover attribute shown.bs.popover:

$('[data-toggle="popover"]').on('shown.bs.popover', function () {}

Instead of the usual:

$('[data-toggle="popover"]').popover({})

Another thing that I found was that the bootstrap automatically created a div with class=”popover-body” on top of any HTML content we define in the popover. So I used the following code to refer the tag attributes inside that div. This can be extended to get properties/attributes of any HTML tags inside that div:

$('.popover-body a').click(function(){
    //code here
})

This enabled accessing the ids and attributes of the elements contained in the popover content div and once those were accessible, I was able to build custom logic upon that.

Below is the code that has to be put in document.ready function:

$('.random class given to span').popover({
    delay: 100,
    html : true,
    content: function() {
    return $('#popover_content').html();
    }
});

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
    $('.popover-body a').click(function(){
        var currentElementId=$(this).attr('id');
        //custom logic
     });
})

MDBootstrap staff commented 3 years ago

This solution is interesting. Thank you for your contribution. We will check if we can improve this implementation in our source code but this script you posted above seems to be working in every case. For now, We will link to this topic people interested in this functionality.


MDBootstrap staff answered 3 years ago

Hi kellyjromer,

I tried realy hard to find a solution foro your problem or at least a quick fix but this is a bug. We will try to fix this in the future but the problem is that we relay on popper.js library as mentioned in docs. Our team will try to make it work if it is possible without changeing popper.js.

Best Regards, Piotr


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: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No