Put two Yes and No buttons in a Javascript message

Question

Put two Yes and No buttons in a Javascript message

Navigation

#1 by (6 votes)
#2 by (5 votes)
#3 by (4 votes)

7

I need to do just that:

If the user clicks No, system closes the message and keeps the information on the screen.

On the screen there is a limpar button and it calls the acaoLimpar() function but without displaying a dialog, simply clears all fields. Now with this new rule, how do I put two buttons in a alert() and do what is written? Below the acaoLimpar() function:

function AcaoLimpar() {
    $("#txt_dt_ref_inicial").val("");
    $("#txt_dt_ref_final").val("");
    $("#ddl_tipotabela").val("");
    $("#txt_tabela").val("");
    $("#txt_classificacao").val("");
    $("#txt_grupo").val("");
    $("#ddl_autorizacaoprevia").val("");
    limparAutoComplete();
}

function limparAutoComplete() {
    var arrayTemp = [];
    sessionStorage.setItem("tabelas", arrayTemp);
    sessionStorage.setItem("classificacoes", arrayTemp);
    sessionStorage.setItem("grupos", arrayTemp);
    CarregarGridTabela(arrayTemp);
    CarregarGridClassificacao(arrayTemp);
    CarregarGridGrupo(arrayTemp);
}

When running the code below it works, however it generates button OK and Cancelar and the rule should be: SIM and NÃO

function AcaoLimpar() {
    decisao = confirm('Deseja realmente limpar os dados?')

    if (decisao) {
        $("#txt_dt_ref_inicial").val("");
        $("#txt_dt_ref_final").val("");
        $("#ddl_tipotabela").val("");
        $("#txt_tabela").val("");
        $("#txt_classificacao").val("");
        $("#txt_grupo").val("");
        $("#ddl_autorizacaoprevia").val("");
        limparAutoComplete();
    }
    else
        return false;
}

Using `confirm` , how can `OK` be changed by `Sim` and `Cancelar` by `Não` ?

Following the example of colleague TobyMosque, I did this, but my browser is old. Everything must be validated from IE 7. It gave error in the past includes. Does not accept attrProp .

function AcaoLimpar() {

            alert(1);
            var msgExcluir = $("#msgExcluir");
            msgExcluir.dialog({
                modal: true,
                buttons: {
                    "Sim": function () {
                        //alert("Excluido com Sucesso");

                        $("#txt_dt_ref_inicial").val("");
                        $("#txt_dt_ref_final").val("");
                        $("#ddl_tipotabela").val("");
                        $("#txt_tabela").val("");
                        $("#txt_classificacao").val("");
                        $("#txt_grupo").val("");
                        $("#ddl_autorizacaoprevia").val("");

                        limparAutoComplete();

                        $(this).dialog('close');
                    },
                    "Não": function () {
                        return false;
                        $(this).dialog('close');
                    }
                }
            });
}

javascript jquery

asked by anonymous 15.01.2016 / 14:06

3 answers

Get parent div attributes through child elements I can not use boundary (\ b) to validate a word that begins with "@"

score 6 · Answer 1

Unfortunately you can not change the options of a confirm , in this case you will have to use some script, such as jQUeryUI Dialog , Bootstrap Modal or Foundation Reveal .

var msgExcluir = $("#msgExcluir");
msgExcluir.dialog({
  modal: true,
  buttons: {
    "Sim": function () {
      alert("Excluido com Sucesso");
      $(this).dialog('close');
    },
    "Não": function () {
      $(this).dialog('close');
    }
  }
});

.ui-widget {
  font-size: 80% !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="msgExcluir">
  Deseja realmente limpar os dados?
</div>

Your other option is to create your own dialog, follow an example that does not depend on jQuery:

var Dialog = function () {
  this.fragment = document.importNode(this.template, true);
  this.elements = {};
  this.elements.modal = this.fragment.querySelector(".modal");
  this.elements.container = this.fragment.querySelector(".dialog");

  this.elements.icon = this.elements.container.querySelector(".icon");
  this.elements.content = this.elements.container.querySelector(".content");
  this.elements.menu = this.elements.container.querySelector(".menu");  
  this.iconUrl = "";
  
  document.body.appendChild(this.fragment);  
}

Dialog.prototype.template = document.getElementById("tmplDialog").content;
Dialog.prototype.addAcao = function (texto, callback) {
  var self = this;
  var button = document.createElement("button");
  button.textContent = texto;
  button.addEventListener("click", function (event) {
    callback(self);
  });
  this.elements.menu.insertBefore(button, this.elements.menu.children[0]);
}

Dialog.prototype.close = function () {
  document.body.removeChild(this.elements.modal);
  document.body.removeChild(this.elements.container);
}

Object.defineProperty(Dialog.prototype, "icon", {
  get: function () {
    return this.iconUrl;
  },
  set: function (value) {
    this.iconUrl = value;
    this.elements.icon.style.backgroundImage = "url(" + value + ")";
  }
});

Object.defineProperty(Dialog.prototype, "texto", {
  get: function () {
    return this.elements.content.textContent;
  },
  set: function (value) {
    this.elements.content.textContent = value;
  }
});

Object.defineProperty(Dialog.prototype, "modal", {
  get: function () {
    return !this.elements.modal.classList.contains("hidden");
  },
  set: function (value) {
    if (value != this.modal) {
      if (value)
        this.elements.modal.classList.remove("hidden");
      else
        this.elements.modal.classList.add("hidden");
    }
  }
});

var dialog = new Dialog();
dialog.icon = "http://cdn.flaticon.com/svg/1/1653.svg";
dialog.texto = "Deseja realmente limpar os dados?";
dialog.modal = true;
dialog.addAcao("Sim", function (self) {
  alert("Sim");
  self.close();
})
dialog.addAcao("Não", function (self) {
  alert("Não");
  self.close();
})

.modal, .dialog {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

.modal {
  background-color: rgba(0, 0, 0, 0.3);
}

.hidden {
  display: none;
}

.dialog {
  background-color: white;
  box-shadow: 0px 0px 5px black;
  border-radius: 5px;
  width: 448px;
  height: 128px;
  overflow: hidden;
}

.dialog .icon {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: whitesmoke;
  width: 128px;
  height: 128px;
  border-right: 1px solid gainsboro;
  
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
}

.dialog .content {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 35px;
  left: 128px;
  padding: 10px;
}

.dialog .menu {
  position: absolute;
  box-sizing: border-box;
  right: 0px;
  bottom: 0px;
  left: 128px;
  height: 40px;
  border-top: 1px solid gainsboro;
  padding: 5px;
}

.dialog .menu button {
  float: right;
  box-sizing: border-box;
  padding: 5px;
  line-height: 15px;
  background-color: whitesmoke;
  border: 1px solid gray;
}

.dialog .menu button:hover {
  background-color: gainsboro;
}

<template id="tmplDialog">
  <div class="modal hidden">

  </div>
  <div class="dialog">
    <div class="icon">
    </div>
    <div class="content">
    </div>
    <div class="menu">
    </div>
  </div>
</template>

score 5 · Answer 2

You can use the HTML5 tag to create a built-in window:

function AcaoLimpar(){
    $('form input:text').val('');
}

var dialog = $('#window');
$('#show').click(function() {
  dialog.show();
});
$('#exit').click(function() {
  dialog.hide();
});
$('#reset').click(function() {
  AcaoLimpar();
  dialog.hide();
});

dialog {
  display: none;
  position: absolute;
  background: #f1f2f3;
  font-family: sans-serif;
  width: auto;
  max-width: 400px;
  padding: 10px;
  border: 1px solid #999;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 10%;
}

<form action="">
  <input type="text" id="email"><br>
  <input type="text" id="senha"><br>
  <input type="submit" id="Login"><br>
<button id="show">Reset</button>
  
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><dialogid="window">
  <h3>Você desejada limpar o formulário?</h3>
  <p>Caso Sim, os dados preeenchidos serão apagados permanentemente!</p>
  <button id="exit">Não</button>
  <button id="reset">Sim</button>
</dialog>

By creating your own dialog you have an infinite possibility of constumizations. Look at an example below (I'm passionate about customizations), and another thing, very well emphasized by TobyNosque is the support for the tag <dialog> , you can solve this by replacing it with a <dialog> :

var dialog = $('#window');
$('#show').click(function() {
  dialog.fadeIn(100);
});
$('#exit').click(function() {
  dialog.fadeOut('fast');
});
$('#reset').click(function() {
  AcaoLimpar();
  dialog.fadeOut('fast');
});

div#window {
  position: absolute;
  display: none;
  background: #f1f2f3;
  font-family: sans-serif;
  width: auto;
  max-width: 400px;
  border: 1px solid #999;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 10%;
  -webkit-border-radius: 6px;
  border-radius: 6px;
   -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  padding-bottom: 10px;
}

div#window h3{
  position: relative;
  margin: 0;
  top: 0;
  padding: 10px 0;
  background: #333;
  color: #fff;
  max-width: 400px;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  text-align: center;
}

div#window button{
  position: relative;
  border: none; outline: none;
  margin: 0;
  width: 80px;
  height: 30px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  float: right;
  margin-right: 10px;
  text-align: center;
  background: #333;
  color: #fff;
  cursor: pointer;
}
div#window button:hover{
  background: #606060;
  color: #fff;
}
div#window p{
  margin: 20px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="window">
  <h3>Você desejada limpar o formulário?</h3>
  <p>Caso que em Sim os dados preeenchidos serão apagados permanentemente!</p>
  <button id="exit">Não</button>
  <button id="reset">Sim</button>
</div>
<button id="show">Reset</button>

score 4 · Answer 3

You have the option to put confirm button

<script>
function mensagem() {
var name=confirm("Pressione um botão.")
if (name==true)
{
  document.write("Você pressionou o botão OK!")
}
else
{
  document.write("Você pressionou o botão CANCELAR")
}
}
</script>
<html>
<body>
<a href="#" onclick="mensagem()">Mensagem</a>
</body>
</html>

Follow the example link: link

Put two Yes and No buttons in a Javascript message

Using confirm , how can OK be changed by Sim and Cancelar by Não ?

3 answers

Using `confirm` , how can `OK` be changed by `Sim` and `Cancelar` by `Não` ?