As u see the picture , My bootstrap popover triggers and shows “[object Object]” instead of the data I retrieved from database. I put logs on js ajax code and seen that I retrieve data however cant show it up on popover. What can be the problem ?
<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>
});
The data you're trying to display is not a string.
[object Object]is Javascript's default conversion from an object to a string.You can double-check the datatype of the function response data by updating your log to
console.log(typeof data), which will help you to format the data appropriately.