AJAX call returns data for dropdown lists 'list1' and 'list2'. If there is no data available, I want to hide the dropdowns with `pointer-events: none` and display a tooltip that says "Data not available".
else if (monthly_list.length == 0 && quarterly_list.length == 0) {
console.log('inside second if')
$('#list1').css('pointer-events','none');
$("#list1").attr("title", "Data not available");
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
else if (monthly_list.length == 0 || quarterly_list.length == 0) {
console.log('inside third if')
if (monthly_list.length == 0) {
console.log('inside monthly list')
$('#list1').css('pointer-events','none');
$("#list1").attr("title", "Data not available");
}
else {
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
If anyone can assist in resolving why the tooltips are not displaying when there is no data available in the dropdown lists, it would be greatly appreciated.