2

Preciso de uma ajuda referente ao alert() do js, no qual estou retornando alguns valores apenas informação para o usuário.

Hoje estou retornando apenas um alert(), porém andei pesquisando e achei algumas alternativas (modal, bootbox, etc...), porém tive dificuldade para trabalhar com ambas.

Gostaria de uma solução.

Estou usando desta maneira:

echo "<script>alert('Protocolo incorreto, favor informar um valido.');
	window.location.replace('consulta.php');
</script>";

2
  • "Gostaria de uma solução" me parece que você quer algo pronto. Commented 9/01/2018 às 15:22
  • Coloca na pergunta o HTML para que vejamos como é retornado o alerta e possamos produzir uma solução para seu caso.
    – user60252
    Commented 9/01/2018 às 15:41

3 Respostas 3

8

Não é possível customizar o alert, mas você pode utilize o SweetAlert.

Basta adicionar o jQuery e o SweetAlert no seu HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Depois basta utilizar:

swal("Hello world!");

$("#btn1").click(function() {
  swal("Mensagem!");
});

$("#btn2").click(function() {
  swal("Mensagem!", "Corpo da Mensagem");
});

$("#btn3").click(function() {
  swal("Mensagem de Erro!", "Corpo da Mensagem", "error");
});

$("#btn3").click(function() {
  swal({
    title: "Atenção!",
    text: "Clique no botão para fechar!",
    icon: "warning",
    button: "Clique Aqui!",
  })
});

$("#btn4").click(function() {
  swal({
    title: "Atenção!",
    text: "Clique no botão para ser redirecionado!",
    icon: "warning",
    buttons: true,
  }).then(function(result) {
    if (result) {
      alert("Coloque aqui o window.location.href");
    } else {
      alert("Você não será redirecionado pois clicou em \"Cancel\"");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<button id="btn1">Forma 1</button>
<button id="btn2">Forma 2</button>
<button id="btn3">Forma 3</button>
<button id="btn4">Forma 4 - Callback</button>

3
  • Obrigado!!! Porém estou com outra duvida agora, não consigo puxar outra function após o swal(), procurei nas documentações do swal e mesmo assim não consigo retornar outra function, segue me código como exemplo: echo " <script> $(function(){ swal({'Mensagem de Erro!', 'Protocolo incorreto, favor informar novamente', 'error'}, function(){ window.location.href = 'consulta.php' }); }); </script>"; Commented 9/01/2018 às 18:08
  • @GabrielBarreto adicionei um novo exemplo, a Forma 4 - Callback Commented 10/01/2018 às 1:09
  • Muito obrigado!!! Deu certinho!!! Commented 11/01/2018 às 17:24
0

Você pode usar um box que simula um alert sem usar bibliotecas. O box é como o mostrado abaixo, e você pode customizar como quiser:

inserir a descrição da imagem aqui

Ao clicar em OK, será redirecionado para a página que você colocar no atributo onclick do botão.

Script + CSS:

let msg_alerta = '<div class="alert-box">'
+'<h1>Aviso</h1>'
+'<p>Protocolo incorreto, favor informar um valido.</p>'
+'<input style="padding:5px 10px;" type="button" value="OK" onclick="this.parentNode.outerHTML=\'\';window.location.href=\'consulta.php\';" />'
+'</div>';

document.write(msg_alerta);
.alert-box{
   display:block;
   position:fixed;
   width:200px;
   padding:5px 20px 20px;
   background:#ddd;
   border:1px solid #999;
   text-align:center;
   transform:translate(-50%,-50%);
   top:50%;
   left:50%;
   z-index:99999;
   -webkit-box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
   -moz-box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
   box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
}

0

Não há como personalizar um alert javascript, mas você pode utilizar Ajax com PHP e jQuery, e ao invés de alerta apresentar um modal, um excelente que eu recomendo é o bootstrap.

O código está todo comentado

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script language="javascript">

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado

  $("#form").on("submit", function(e){
    // está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
    e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
    var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
    $.ajax({
      // está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
      url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
      data:  data, // aqui vai os dados para o servidor, geralmente é os inputs do form
      method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
      dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
      success: function(data){
        // essa é a function success, ela ira ser executada se a requisição for feita com sucesso
         // a variavel data, veio do parametro da function, e será a resposta do php.

         if (data=="Protocolo Invalido"){
            $("#myModalError").modal('show');
         }else{
            $("#myModalSucess").modal('show');
                /*
                se o usuario clicar no button close do modal
                ou em qualquer parte do documento será redirecionado
                */
                $(document).click(function(){
                    window.location.href = "http://pt.stackoverflow.com";
                });
         }
      },
      error: function(){
        // essa é funcion error, ela será executada caso ocorrer algum erro na requisição
        alert("erro na requisição");
      }
    });
  });

});

</script>

<fieldset style="width:50%; margin: 0px auto; ">
    <legend>Colocando PONTO no CPF</legend>
    <form id="form">
        <label for="protocolo">Protocolo</label>
        <input type="number" name="protocolo" placeholder="Numero do protocolo" required />
        <input type="submit" value="ENVIAR" name="button"/><br/><br/>
    </form>
</fieldset>

<!-- Modal HTML Sucesso -->
<div id="myModalSucess" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Sucesso </h4>
            </div>
            <div class="modal-body">
                <p>Tarefa Adicionada com sucesso. </p>
                <p class="text-warning"><small>Sucesso Sucesso Sucesso Sucesso Sucesso Sucesso .</small></p>
            </div>
            <div class="modal-footer">
                <button onclick="location.href='http://pt.stackoverflow.com';" type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Erro</h4>
            </div>
            <div class="modal-body">
                <p class="text-warning"><small>Protocolo incorreto, favor informar um valido. </small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Também é possível redirecionar automaticamente em caso de sucesso:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script language="javascript">

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado

  $("#form").on("submit", function(e){
    // está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
    e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
    var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
    $.ajax({
      // está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
      url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
      data:  data, // aqui vai os dados para o servidor, geralmente é os inputs do form
      method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
      dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
      success: function(data){
        // essa é a function success, ela ira ser executada se a requisição for feita com sucesso
         // a variavel data, veio do parametro da function, e será a resposta do php.

         if (data=="Protocolo Invalido"){
            $("#myModalError").modal('show');
         }else{
            window.location.href = "http://pt.stackoverflow.com";
         }
      },
      error: function(){
        // essa é funcion error, ela será executada caso ocorrer algum erro na requisição
        alert("erro na requisição");
      }
    });
  });

});

</script>

<fieldset style="width:50%; margin: 0px auto; ">
    <legend>Protocolo válido 1234</legend>
    <form id="form">
        <label for="protocolo">Protocolo</label>
        <input type="number" name="protocolo" placeholder="Numero do protocolo" required />
        <input type="submit" value="ENVIAR" name="button"/><br/><br/>
    </form>
</fieldset>

<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Erro</h4>
            </div>
            <div class="modal-body">
                <p class="text-warning"><small>Protocolo incorreto, favor informar um valido. </small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Em ambos os casos requer a seguinte página:

validaProtocolo.php

<?php
$protocolo = $_POST['protocolo'];

/*
código para validar protocolo
exemplos:

 1 -um select no banco where coluna = $protocolo
    if ($row[0] > 0) {
       echo json_encode("Protocolo OK");
   }else{
       echo json_encode("Protocolo Invalido");
   }

 2- se um valor existe em um array
 */
       //utilizado nos exemplos funcionais
       $protocolosValidos = array("1234", "5678", "9012", "3456");
       if (in_array($protocolo, $protocolosValidos)) { 
          echo json_encode("Protocolo OK");
       }else{
          echo json_encode("Protocolo Invalido");
       }


?>

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 .