Putting two Yes and No buttons on a Javascript message

Asked

Viewed 11,523 times

8

I need to do just that:

In case the user click No, system closes the message and keeps the existing information on the screen.

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

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 executing the codex below it works, however generates button OK and Cancelar and by 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, there is how to change the OK for Sim and Cancelar for Não?

Following the example of colleague Tobymosque, I did this, but my browser is old. Everything should be validated from the IE 7. Gave error in past includes. Does not accept the 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
  • 1

    Can’t you use a reset input? It does the same as its function.

  • I edited the original post

  • You can use the jQuery-UI Dialog or so many others.

3 answers

7

Unfortunately you cannot modify the options of a confirm, in this case you will need 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>
<script src="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 dialogue, follows 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>

  • Tobymosque, congratulations on your reply. Really thorough, I had already given my +1 and now gave pride rsrs.. I hope the author understands the whole process of prototypes.

5

You can use the tag <dialog> of HTML5 to create a constumized 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>
<dialog id="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>

Creating your own dialog You have an infinite possibility of constumizations. Look at an example below (I’m a fan of customizations), and another thing, very well highlighted by Tobynosque is the tag support <dialog>, you can solve this by replacing it with a <div>: 

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>
<div id="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>

  • the only element problem dialog, is that the same is not supported by most browsers, only the latest versions of Blink based browsers have support for it. Caniuse, in any case, +1 for remembering him.

  • @Tobymosque just use one div :P, css takes care of the rest, but thanks..

  • the idea is good, updated my response with the creation of a dialog from a div and styling the same with CSS.

  • I’m trying to convince the business area to accept the name OK and Cancel. I think I can fold them. If yes, it looks like I did.

4

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: https://social.msdn.microsoft.com/Forums/pt-BR/219f857e-f5ed-4d74-ab6d-cc42ea5daa9e/como-fazer-um-alert-com-sim-ou-no-no-javascript?forum=aspnetpt

  • But continue with the OK and Cancel button. The rule asks YES and NO. That is, what I’m not getting is to change the name of the button (Yes and No).

  • By what I’m seeing as a default function of javascript would not have to modify the button Caption.

  • I understand, so the question if there is another way, by jquery and etc...

  • Take a look at this site: http://www.daviferreira.com/posts/forgettand-as-funcoes-javascript-alert-e-confirm ""

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.