I am attempting to display a popover with content fetched from an API using AJAX. The content includes various HTML tags like <form> with a <textarea> and a <button>, <br/> tags, <a> links, and <time> elements.
The issue I am encountering is that some of these elements are not being displayed at all - they are not visible on the webpage or in the code when inspected, while others are working perfectly fine.
Here are a few things I have already checked and eliminated as potential causes:
- The data received from the API is accurate and displays correctly when injected elsewhere
- The AJAX request is functioning properly
If you have any insights into where the problem might be or any suggestions for troubleshooting, I would greatly appreciate it. Thank you!
Below is a demonstration showcasing the same code I am working with:
$(function() {
var content = '<form><textarea></textarea></form>';
button = $("a#myButton")
button.popover({
'html': true,
'content': content, // content that contains a <form> and <textarea, it should not injected in the popover
'trigger': 'click',
'placement': 'bottom'
});
button.parent().append(content); // but it can perfectly be added elsewhere
$("a#myOtherButton").popover({
'html': true,
'content': 'hello<br/><br/>there', // this content should be working perfectly fine
'trigger': 'click',
'placement': 'bottom'
});
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<div id="myDiv">
<a id="myButton" class="btn btn-primary" style="color:white;">This is a button</a>
<a id="myOtherButton" class="btn btn-primary" style="color:white;">This is another button</a>
</div>