I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically.
Here is the HTML snippet:
<div
class="alert alert-success alert-dismissible fade show"
role="alert"
id="accepted-meal-alert">
<button type="button" class="close">×</button>
<p>Genial que te haya gustado la idea!</p>
</div>
The CSS code:
#accepted-meal-alert {
display: none;
}
And the JavaScript logic. I am using jQuery to toggle the visibility of the div:
function acceptOrGetAnotherMeal(acceptOrReject) {
if (acceptOrReject == 'accept-btn') {
showMealAccepted();
} else {
const alternativeTextPrefix = 'Entonces pidamos';
let mealType = $("input[name='categorias']:checked").val();
console.log(`mealType: ${mealType}`);
getFromEndpoint(mealType, alternativeTextPrefix);
}
}
function showMealAccepted() {
console.log('showMealAccepted');
$('#accepted-meal-alert').show(); // `toggle` didn't work as well.
// $('#accepted-meal-alert').css({
// display: 'block',
// });
$('#accept-btn').prop('disabled', true);
$('#reject-btn').prop('disabled', true);
}
$(document).ready(function () {
$('.categorias').click(function () {
let endpoint = $(this).attr('id');
getFromEndpoint(endpoint, defaultTextPrefix);
});
$('.accept-reject-btn').click(function () {
let acceptOrReject = $(this).attr('id');
console.log('Clicked categories with value: ' + acceptOrReject);
acceptOrGetAnotherMeal(acceptOrReject);
});
$('.alert .close').click(function (e) {
$(this).parent().hide();
});
});
If it matters, these files are being served from a public folder in Sinatra.