Upon observing the image, I noticed that my bootstrap popover is triggering and displaying “[object Object]” instead of the database data I retrieved. After adding logs to the JavaScript AJAX code, I can see that the data is being retrieved, but it is not displaying in the popover. What could be causing this issue?
<script >
$(document).ready(function () {
$('#tog').on('click', function (e) {
e.preventDefault();
});
console.log("Popover initialization started.");
$('[data-toggle="popover"]').popover({
placement: 'right',
title: 'Update Changes',
trigger: 'hover',
html: true,
content: function () {
console.log("Popover content loading started.");
var reasonCode = $(this).closest('tr').find('.reason_code').text();
console.log("Reason code:", reasonCode);
return $.ajax({
type: 'POST',
url: 'CCA_Crups_Reason.aspx/GetPopoverContent',
data: JSON.stringify({ reasonCode: reasonCode }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (response) {
//Extract the data from the response
var data = response.d;
console.log(data)
return data
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error("Ajax request failed:", xhr.responseText);
}
});
}
});
});
</script>
});