Whenever I click on a specific div, I aim to have a popover appear with a loading label as the initial content, while simultaneously sending an ajax get request to the server to retrieve data. Once the data is received, I wish to update the existing popover.
Below is the code I am currently using:
$(document).on('click', '.row-client', function (e) {
var id = $(this).attr('id');
var str = id.split('-');
var component = str[0];
var clientId= str[1];
$.ajax({
url: '../Clients/Index',
type: 'GET',
data: { clientId: clientId },
dataType: 'html',
success: function (data) {
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: data
});
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
Some challenges I am facing include:
The popover does not appear automatically on the first click or when the data is loaded. I have to click multiple times before it shows. Why is this happening?
Is there a way to have the popover stay open and update the content automatically once the data is retrieved?
Upon clicking to display the popover again, I want the content to be empty (which is not the case currently). What could be causing this?