Home / Questions / 456883
Accepted
John Doe
Asked: 2022-06-03 07:18:53 +0800 CST 2022-06-03 07:18:53 +0800 CST

How to make use of Bootstrap alerts (v3)

  • 772

I would like to stop using these annoying type messages alertthat the browser generates at the top and use the alerts that the Bootstrap library contains, in this case I want to use them in some input filelike the example below:

 <form action="" enctype="multipart/form-data">
          <div class="form-group row">
                        <label for="fileToUpload" class="col-sm-3 col-form-label"> Archivo XML:</label>
              <div class="col-sm-8">
                <input type="file" name="fileToUpload" id="XmlToUpload" class="btn" accept=".xml" onchange="ValidarArchivos()" required="">
              </div>
                    </div>
                    <div class="form-group row">
                         <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivo PDF:</label>
              <div class="col-sm-8">
              <input type="file" name="pdfToUpload" id="pdfToUpload" class="btn" accept=".pdf" onchange="ValidarArchivos()" required="">
              </div>
                    </div>      
              </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="button" id="upload" class="btn btn-success" disabled="">Subir Documentos</button>
          </div>
      </form>

The messages that I would be interested in showing in the alerts of the Bootstrap library are the ones that I contain in the following Javascript function as alerttraditional browser

function ValidarArchivos(){
  
    var ValorPDF = $('#pdfToUpload').val();
    var ValorXML = $('#XmlToUpload').val();
    if(ValorPDF != "" && ValorPDF != undefined && ValorXML != "" && ValorXML != undefined ){
        var ValidarNombrePDF = document.getElementById('pdfToUpload').files[0].name;
        var ValidarNombreXML = document.getElementById('XmlToUpload').files[0].name;


        var arcPDF = ValidarNombrePDF.replace(/^.*[\\\/]/,'');
        var arcXML = ValidarNombreXML.replace(/^.*[\\\/]/,'');

        var regex = /([^-\w.]*)/gm; 

        var arcPDF2  = arcPDF.replace(regex, ''); 
        var  arcXML2  = arcXML.replace(regex, '');

        if( !(arcPDF==arcPDF2)  || !(arcXML==arcXML2)) {
            alert("Favor de validar que el nombre de los documentos no tengan espacios ni caracteres especiales.");
            $('#XmlToUpload').val('');
            $('#pdfToUpload').val('');
            return;
        }

        var NombrePDF= ValidarNombrePDF.substring(0, ValidarNombrePDF.length - 4);
        var NombreXML= ValidarNombreXML.substring(0, ValidarNombreXML.length - 4);
        if(NombrePDF == NombreXML){
            //alert("Los datos son correctos. ");
           
        }else{
            alert("Favor de validar que los documentos correspondan con el mismo nombre. ");
            $('#XmlToUpload').val('');
            $('#pdfToUpload').val('');
        }
    }
}

As additional information I am using version 3.3.7 of Bootstrap.

I hope someone can guide me in the correct use of thesealert

javascript

2 Answers

  1. You can have a section at the top of the site to display the alerts , which you can create as you need them with a function like the one I include in the example below:

    function agregarNuevaAlerta(clase, mensaje) {
  let alertasDiv = document.getElementById("alertas");
  
  let alerta = document.createElement("DIV");
  alerta.innerHTML = mensaje
  + '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'
  + '<span aria-hidden="true">&times;</span>'
  + '</button>';
  alerta.classList.add('alert');
  alerta.classList.add(clase);
  alerta.classList.add('alert-dismissible');
  alerta.classList.add('fade');
  alerta.classList.add('show');
  alerta.setAttribute("role", "alert");

  alertasDiv.appendChild(alerta);
  $(alerta).toggleClass('in out'); 
}

function generarNuevasAlertas() {
  agregarNuevaAlerta('alert-success', '<strong>¡Éxito!</strong> todo salió bien.');
  agregarNuevaAlerta('alert-warning', '<strong>¡Advertencia!</strong> parece que algo salió mal y estoy aquí para decirtelo.');
  agregarNuevaAlerta('alert-danger', '<strong>¡Problemas!</strong> algo salió mal.');
  agregarNuevaAlerta('alert-info', '<strong>Información</strong> ni bien ni mal, tú ¿cómo estás?.');
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" id="cnt">
  <div id="alertas">
  </div>
  <div id="contenido">
    <h1>Contenido</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    <button onclick="generarNuevasAlertas()">Generar alertas</button>
</div>

</body>
</html>

    You can test it right here in the answer by clicking first the "Run" button to execute the code snippet, and then the "Generate Alerts" button .

    In the end, the function agregarNuevaAlerta()does the dirty work , its code is pretty simple, so I hope it's self-explanatory, but if not, feel free to leave a comment.

    • 2
  2. Best Answer

    Very well. After working through this code, I achieved something close to what you're looking for.

    First, I added divthe alert one just below your input:

    <input type="file" name="fileToUpload" id="XmlToUpload" class="btn" accept=".xml" onchange="ValidarArchivos()" required=""> 
      
<div class="alert alert-danger alert-dismissible" role="alert">  
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
 <strong>Texto</strong> y enlace <a href="#" class="alert-link">info</a>.
</div>

    Now in CSS I added a new style for this alert:

    .alert {
 display: none;
}

.alert.visible {
 display: block;
}

    Then in the jQuery where the form actions are defined:

    // Antes de todos
var alerta = $(".alert");

// Y donde llama la alerta
alerta.addClass("visible");

    And that's it! Works like a charm! You can edit the text of the alert in the HTML, and choose various types here . And you don't need to add another event on to close in jQuery for alertbecause this one already has its own closure: alert-dismissible.

    • 1