Topic: MDB Popovers Component
How do i add dynamic content to a Popover.
Scenario: On clicking a link, 1. Makes an AJAX call and fetched the data (formatted as a HTML string response)2. Render the above ajax fetched HTML string in the popover
Looked at the documentation but could not figure it out. Need to find the solution using "data attributes" (data-mdb-popover-init, data-mdb-selector etc).
Thank you.
Click to toggle popover
You cannot add asynchronous content to popover with data attributes.
You need to listen for click on button and create Popover with JS depending on the conditions you have (and dispose of it when it is not needed anymore)
jcarvalho pro premium priority commented 12 months ago
We have been rendering popover based on the click of the button in MDBoostrap prior to this MDB5 7.10 library.
Before migration to MDB5 7.10 (Plain JS), we are using the JQuery with MDB
All i am looking to do is to invoke the same functionality using those HTML Attributes in Popover API of MDB5 7.10
Can u please provide me an example of Dynamic rendering of Popover using Popover API documentation (As specified in it)
We have been rendering popover based on the click of the button in MDBoostrap prior to this MDB5 7.10 library.
Before migration to MDB5 7.10 (Plain JS), we are using the JQuery with MDB
All i am looking to do is to invoke the same functionality using those HTML Attributes in Popover API of MDB5 7.10
Can u please provide me an example of Dynamic rendering of Popover using Popover API documentation (As specified in it)
Do you mean something like this? https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5881473#js-tab-view
jcarvalho pro premium priority commented 12 months ago
This definitely Helps in what i am trying to accomplish.
Will buzz u once i try this idea.
Thank you
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.1.0
- Device: Laptop
- Browser: Chromw
- OS: Windows
- Provided sample code: No
- Provided link: No