8

Preciso fazer exatamente isso:

Caso o usuário clique em Não, sistema fecha a mensagem e mantém as informações existentes na tela.

Na tela existe um botão limpar e ele chama a função acaoLimpar() porém sem exibir uma caixa de diálogo, simplesmente limpa todos os campos. Agora com essa regra nova, como eu coloco dois botões em um alert() e faço o que está escrito? Abaixo a função 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);
}

Ao executar o códio abaixo ele funciona, no entanto gera botão OK e Cancelar e pela regra deve ser: SIM e 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;
}

Usando confirm, há como trocar o OK pelo Sim e Cancelar pelo Não?

Seguindo o exemplo do colega TobyMosque, fiz isso, mas meu browser é antigo. Tudo deve ser validado a partir do IE 7. Deu erro nos includes passado. Não aceita o 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');
                    }
                }
            });
}
3
  • 1
    Voce não pode usar um input do tipo reset? Ele faz o mesmo que sua função.
    – Cobra
    Commented 15/01/2016 às 13:12
  • Fiz uma edição no post original
    – pnet
    Commented 15/01/2016 às 13:16
  • Pode utilizar o jQuery-UI Dialog ou tantos outros. Commented 15/01/2016 às 13:36

3 Respostas 3

7

Infelizmente você não pode modificar as opções de um confirm, neste caso você terá de usar algum script, como por exemplo o jQUeryUI Dialog, Bootstrap Modal ou 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>

a sua outra opção, é criar o seu próprio dialogo, segue um exemplo que não depende de 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>

1
  • TobyMosque, parabéns por sua resposta. Realmente completíssima, já tinha dado meu +1 e agora deu orgulho rsrs.. Espero que o autor entenda todo o processo dos protótipos. Commented 15/01/2016 às 14:44
5

Você pode usar a tag <dialog> do HTML5 para criar uma window constumizada:

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>

Crindo seu próprio dialog você tem uma possibilidade infinita de constumizações. Olhe um exemplo abaixo (sou um apaixonado por customizações), e outra coisa, muito bem ressaltada pelo TobyNosque é o suporte a tag <dialog>, você pode resolver isso substituindo por uma <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>

4
  • o unico problema do elemento dialog, é que o mesmo não é suportado pela maioria dos browsers, apenas as versões mais recentes dos browsers baseados no Blink tem suporte à ele. CanIUse, em todo caso, +1 por se lembra dele. Commented 15/01/2016 às 13:47
  • @TobyMosque basta usar um div :P, o css cuida do resto, mas obrigado.. Commented 15/01/2016 às 13:54
  • a ideia é boa, atualizei a minha resposta com a criação de um dialog a partir de uma div e estilizando a mesma com CSS. Commented 15/01/2016 às 14:40
  • Estou tentando convecer a área de negócio a aceitar os nome OK e Cancelar. Acho que consigo dobrá-los. Se sim, fica como eu havia feito.
    – pnet
    Commented 15/01/2016 às 15:38
4

Tem a opção de colocar botão confirm

<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>

Segue o link de exemplo: 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

4
  • Mas continua com o botão OK e Cancelar. A regra pede SIM e NÃO. Ou seja, o que eu não estou conseguindo é trocar o nome do botão(Sim e Não).
    – pnet
    Commented 15/01/2016 às 13:23
  • Pelo que estou vendo como é uma função padrao do javascript não teria como modificar o Caption do botão. Commented 15/01/2016 às 13:26
  • Entendo, por isso a pergunta se há outra forma, por jquery e etc...
    – pnet
    Commented 15/01/2016 às 13:27
  • De uma olhada neste site: daviferreira.com/posts/… Vá até a parte "Para finalizar, uma "gambiarra"" Commented 15/01/2016 às 13:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .