Call a bootstrap modal from js function

Question

I have a JavaScript function that does a data validation, the problem is using alerts to warn when data is wrong. What I want to do is show Bootstrap modal windows to see the error. This is what I did, it does not work. var contador = somevalue; window.validar = function (cual){ if(cual.value == -1){

    }
    if($("#muestragrafico1").is(':checked')){
        var cantidad = 3;
    }else{
        var cantidad = 1;
    }
    if(cual.checked){
        contador++;
    }else{
        contador--;
    }
    if(contador <= cantidad){
        return true;
    }else{
        if (cantidad == 3) {
            //alert("Solo puede seleccionar un máximo de "+cantidad+" sensores.");
            $('#myModalExito').modal('show');

        }

        if (cantidad == 1) {
            alert("Solo puede seleccionar un máximo de "+cantidad+" sensores.");
        }
        contador--;
        return false;
    }
}`

    

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title"><?php echo L::Ticket_Succes?></h4> </div>
  </div>

</div>

do you use document.ready() function?

farhadamjady
– farhadamjady

2017-01-11 17:31:23 +00:00
Commented Jan 11, 2017 at 17:31 — farhadamjady
– farhadamjady, Commented Jan 11, 2017 at 17:31
did you assign myModalExito as an id to your modal?

Founded1898
– Founded1898

2017-01-11 17:41:02 +00:00
Commented Jan 11, 2017 at 17:41 — Founded1898
– Founded1898, Commented Jan 11, 2017 at 17:41
Yes, I did. I just only didn't copy that part.

sinaxtis
– sinaxtis

2017-01-12 11:40:42 +00:00
Commented Jan 12, 2017 at 11:40 — sinaxtis
– sinaxtis, Commented Jan 12, 2017 at 11:40

Shalin Patel · Accepted Answer · 2017-01-12 11:59:39Z

You can show error dynamically as below.

Reference to create modal dynamically is here .

function showError(message, type) {

  BootstrapDialog.show({
    title: (type == 1 ? 'Warning' : 'Error') + ' message',
    message: message,
    buttons: [{
      label: 'Close',
      cssClass: (type == 1 ? 'btn btn-warning' : 'btn btn-danger'),
      action: function(dialog) {
        dialog.close();
      }
    }]
  });
}



function validationFunction(i){
  
  if(i==0)
  {
    showError('This is error without type');
    return false;
  }
  else if(i==1)
  {
    showError('This is error with type id 0 (Error)(Default)',0);
    return false;
  }
  else if(i==2)
  {
    showError('This is error with type id 1 (Warning)',1);
    return false;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>





<button onclick="validationFunction(0)">Error modal 1</button>

<button onclick="validationFunction(1)">Error modal 2</button>
<button onclick="validationFunction(2)">Warning modal 1</button>

Collectives™ on Stack Overflow

Call a bootstrap modal from js function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related