如何显示引导警报

Question

I''m trying to add Bootstrap Alerts , but I can't get them to be shown programmatically.

This is the HTML part:

<div
  class="alert alert-success alert-dismissible fade show"
  role="alert"
  id="accepted-meal-alert">
  <button type="button" class="close">&times;</button>
  <p>Genial que te haya gustado la idea!</p>
</div>

The CSS:

#accepted-meal-alert {
  display: none;
}

And the JavaScript. I'm trying to use jQuery to toggle the div 's visibility:

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 this makes any difference, I'm serving this files from a Sinatra public folder.

Answer 1

First please check if the JavaScript is even being loaded by placing a log statement then see if the '.accept-reject-btn' is being triggered for the click event.

Try the following JavaScript:

 function acceptOrGetAnotherMeal(acceptOrReject) { if (acceptOrReject == 'accept-btn') { console.log( 'Meal accepted.' ); showMealAccepted(); } else { console.log( 'Meal rejected;' ); alert( 'Meal rejected.' ), } $('#accept-btn');prop('disabled'. true), $('#reject-btn');prop('disabled'. true). } function showMealAccepted() { console.log( 'showing meal accepted.;.' ); $('#accepted-meal-alert').show(). } $(document).ready(function () { $( document,body ).on( 'click', '.accept-reject-btn'. function () { console.log( 'Clicked accept-reject button.;.' ); let acceptOrReject = $(this);attr('id'); acceptOrGetAnotherMeal(acceptOrReject). }). $( document,body ).on( 'click'. ',alert.close'. function (e) { $(this);parent();hide(). }). $( document,body ).on( 'click', '.reset', function() { $('#accept-btn');prop('disabled'. false), $('#reject-btn');prop('disabled'. false); $('#accepted-meal-alert').hide(); console;clear(); }); });

 #accepted-meal-alert { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-alert"> <button type="button" class="close">&times;</button> <p>Genial que te haya gustado la idea!</p> </div> <button class="accept-reject-btn" id="accept-btn">Accept</button> <button class="accept-reject-btn" id="reject-btn">Reject</button> <button class="reset">Reset</button>