Jump to content

Alerta personalizado não está a funcionar


fcastro

Recommended Posts

Boas pessoal, estou aqui com uma duvida simples penso eu mas já dei voltas e voltas e não consigo resolver o problema:confused:

 

É o seguinte, quero que apareça um alerta personalizado usando biblioteca sweetalert quando o mail for enviado com sucesso. Antes de passar para a condição do mail enviado estou a testar apenas se clicar no botao enviar, mostrar o alerta mas mesmo assim sem resultado.

 

<?php

    if(isset($_POST['acao']) && $_POST['acao'] == 'enviar') {

        require('enviar.php');

    }


?>


<!doctype html>


<html lang="pt-pt">



<head>

    <?php require_once ("../libraries/head.php"); ?>

    <title>teste</title>

   

    <script src="../libraries/jquery.cycle.lite.js"></script>
    
    <script src="../libraries/sweetalert.min.js"></script>
 
    <link rel="stylesheet" type="text/css" href="../libraries/sweetalert.css">
    
    





</head>

<body background="../images/padraosite.jpg">



<header>

    <?php require_once ("../libraries/body.php"); ?>


</header>



<main>





    <div class="ind-formulario">


        <div class="ind-formulario-imagem">
            <picture>

                <img src="../images/imagem1.png" alt="nr1" title="n1">

            </picture>

        </div>

            <div class="ind-formulario-esquerda">

        <form name="Formularioimpressao" id="Formularioimpressao" method="post" action="" enctype="multipart/form-data">
            <div class="Formulario">

                <label for="nome">Nome: <h7 style="color:#FF0000;">*</h7></label><br>
                <input type="text" id="nome" name="nome" required>
            </div>




            <div class="Formulario">

                <label for="email">Email: <h7 style="color:#FF0000;">*</h7></label><br>
                <input type="email" id="email" name="email" required>
            </div>



            <div class="Formulario">

                <label for="telefone">Telefone: <h7 style="color:#FF0000;">*</h7></label><br>
                <input type="tel" id="telefone" name="telefone" required>
            </div>

            <div class="Formulario">
                <Label for="Imagem">Escolha o ficheiro: <h7 style="color:#FF0000;">*</h7></Label><br>
                <input type="file" name="imagem" id="imagem" required>

            </div>


            <div class="Formulario">


                <input type="hidden" name="acao" value="enviar" />
                <input type="submit" id="botao" name="botao" value="Confirmar" onclick="EventoAlert()"/>
                
                <script>
            
                    function EventoAlert(){
                    
                    swal("Tudo bem", "Email enviado com sucesso", "sucess");
                    }
                    
                </script>
                
                

            </div>


                       </form>

            </div>

        


    <div class="ind-formulario-direita">
    
    
           



        <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <h7 style="color:#FF0000;">*</h7>Os campos selecionados são obrigatórios.  <br> <br><br> <br><br> <br><br>
      

        <br><br> <br> <br> <br> <br>
        Tipos de ficheiros permitidos: JPG, JPEG, PNG, DOC. <br> <br>
        A imagem não deverá ultrapassar de 1,25 MB.


    </div>



    </div>









</main>



<footer>

    <?php require_once ("../libraries/footer.php"); ?>


</footer>




</body>

</html>

O problema entra na parte do script, penso que não está a chamar a função. Alguem tem ideia do que está errado? 

PS: a parte de validar se o mail foi enviado está noutra pagina php, não vou postar aqui, pois penso que não vale a pena visto que o mail é enviado e mostra um alerta defaut do navegador, pois meu objectivo é substituir pelo personalizado assim que conseguir chamar a minha função neste teste. Desde já obrigado a todos e bom natal :cheesygrin:

Link to post
Share on other sites

Uma solução seria tratar o erro/sucesso de envio no ficheiro enviar.php

Seria algo assim:

<?php

	//tratamento do envio de email
	// ...

  if(true){

    echo "<script type='text/javascript'>";
    echo "alert('Mensagem enviada com sucesso! Obrigado');";
    echo "history.back();"; 
    echo "</script>"; 

  }else{
	
	echo "<script type='text/javascript'>";
    echo "alert('Sua mensagem não foi enviada! Por favor tente novamente');";
    echo "history.back();"; 
    echo "</script>";

  }

No form não seria necessário essa função EventoAlert().

Caso pretendas a tua solução, quase de certeza que o problema esta aqui:

<script src="../libraries/jquery.cycle.lite.js">
</script> <script src="../libraries/sweetalert.min.js">
</script> <link rel="stylesheet" type="text/css" href="../libraries/sweetalert.css">

Tenta seguir este tópico: https://limonte.github.io/sweetalert2/

 

ALLTECH

 

 

Edited by Alltech
Link to post
Share on other sites

Olá Alltech, isso do alerta de envio de email eu já tenho, mas o meu objetivo é substituir-la por um alerta personalizado. Vou postar o codigo do ficheiro enviar.php.

<?php


$nome = strip_tags(trim($_POST ['nome']));
$email = strip_tags(trim($_POST ['email']));
$telefone = strip_tags(trim($_POST ['telefone']));
$imagem = $_FILES ['imagem'];


$tamanho = 1024 * 1024 * 1.2;
$tipos = array('image/jpeg', 'image/pjpeg', 'image/gif', 'image/png');


if ($imagem['size'] > $tamanho) {

    echo "<script language=javascript>alert( 'A imagem não pode exceder os 1,25MB!' );</script>";
}

elseif (!in_array($imagem['type'], $tipos)){

    echo "<script language=javascript>alert( 'Tipo de ficheiro não permitido!' );</script>";

}

else {

    require('PHPMailer/class.phpmailer.php');

    $mail = new PHPMailer();
    $mail ->IsSMTP();
    $mail ->SMTPAuth = true;
    $mail ->Port = 587;
    $mail ->Host = 'smtp.teste.pt';
    $mail ->Username = 'admin@teste.pt';
    $mail ->Password = '********';
    $mail ->IsMail();
    $mail ->CharSet = 'UTF-8';
    $mail ->SetFrom('admin@teste.pt', 'Teste');
    $mail ->AddAddress('teste2018@gmail.com', 'Teste');
    $mail ->Subject = 'Teste 1';
    

    $body = "<strong>Nome :</strong>{$nome} <br/>
            <strong>Email :</strong>{$email} <br/>
            <strong> Telefone :</strong>{$telefone} <br/>
     
            

    $mail ->MsgHTML ($body);
    $mail ->AddAttachment($imagem['tmp_name'], $imagem['name']);

    if($mail ->Send())
    
  
    
    echo "<script language=javascript>alert( 'Arquivo enviado com sucesso!' );</script>";

    
    else
    
    echo "<script language=javascript>alert( 'Erro ao enviar, tente mais tarde!' );</script>";


}


?>

Haverá alguma maneira de adicionar a biblioteca no head desta pagina e chamar o alerta personalizado para substituir pelo alerta defaut? Já pesquisei no youtube montes de videos com varios puglins e não estou a conseguir.

Link to post
Share on other sites

Estive a fazer mais testes e reparei que nem com a busca de ficheiros css e javascript online o alerta funciona :confused:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>


</head>



<?php

$imagem = $_FILES ['imagem'];


$tamanho = 1024 * 1024 * 1.2;
$tipos = array('image/jpeg', 'image/pjpeg', 'image/gif', 'image/png');


if ($imagem['size'] > $tamanho) {

   echo "<script language=javascript>bootbox.alert('Hello world!');</script>";
}

elseif (!in_array($imagem['type'], $tipos)){

    echo "<script language=javascript>bootbox.alert( 'Tipo de ficheiro não permitido!' );</script>";

}

else {

    require('PHPMailer/class.phpmailer.php');

    $mail = new PHPMailer();
    $mail ->IsSMTP();
    $mail ->SMTPAuth = true;
    $mail ->Port = 587;
    $mail ->Host = 'smtp.teste.pt';
    $mail ->Username = 'admin@teste.pt';
    $mail ->Password = '*****';
    $mail ->IsMail();
    $mail ->CharSet = 'UTF-8';
    $mail ->SetFrom('admin@teste.pt', 'teste');
    $mail ->AddAddress('teste@gmail.com', 'teste');
     


           
    $mail ->AddAttachment($imagem['tmp_name'], $imagem['name']);

    if($mail ->Send())
    
  
    
    echo "<script language=javascript>alert( 'Arquivo enviado com sucesso!' );</script>";

    
    else
    
    echo "<script language=javascript>alert( 'Erro ao enviar, tente mais tarde!' );</script>";


}


?>

Só funciona o alerta normal do mail enviado com sucesso ou erro de envio. Ninguem tem uma pista?

Edited by fcastro
Link to post
Share on other sites
coxosclassic

boas,

fiz um teste simples com parte do teu codigo e o sweetalert funcionou corretamente:

<input type="submit" id="botao" name="botao" value="Confirmar" onclick="EventoAlert()"/>
<script>
  function EventoAlert(){
    swal("Tudo bem", "Email enviado com sucesso", "sucess"); //OK
  }
</script>

Confirmas que não tens erros na consola?

 

cumps

Cumps,

cc

Link to post
Share on other sites
Em 25/12/2017 às 20:13, coxosclassic disse:

boas,

fiz um teste simples com parte do teu codigo e o sweetalert funcionou corretamente:


<input type="submit" id="botao" name="botao" value="Confirmar" onclick="EventoAlert()"/>
<script>
  function EventoAlert(){
    swal("Tudo bem", "Email enviado com sucesso", "sucess"); //OK
  }
</script>

Confirmas que não tens erros na consola?

 

cumps

Boas coxosclassic,

 

Não dá erro nenhum, simplesmente não aparece o alerta se quiser usar um personalizado. Só me aparece se for o alerta defaut, ou seja assim funciona:

<input type="submit" id="botao" name="botao" value="Confirmar" onclick="EventoAlert()"/>
<script>
  function EventoAlert(){
    alert("Email enviado com sucesso");
  }
</script>

Não faço ideia do que está a acontecer

Link to post
Share on other sites
coxosclassic

Boas,

Realmente é estranho, visto que entras no handler "EventoAlert" e não te aparecerem sequer os elementos do sweetalert.

Já tentaste "debugar" no browser? Acho que seria importante testar se o sweetalert2 estará sequer a funcionar.

Abre uma consola no browser e testa esse objecto "swal", algo tipo:

swal({
  title: 'OK!',
  text: 'Sweet Alert 2 is showing',
  type: 'success',
  confirmButtonText: 'Cool'
});

O Sweet Alert deverá aparecer com a mensagem "Sweet alert 2 is showing". Se não te aparecer nada, procura pelo elemento:

<div class="swal2-container ...

Se o encontrares, confirma que os estilos estão OK (display != none, z-index alto, etc...). Pode ser que tenhas um elemento qq por cima desse SweeAlert e dessa maneira não o consigas ver?

Se nem o elemento encontrares, é muito provável que tenhas outro tipo de erro na consola..

Depois diz se funcionou.

 

P.S- se ainda tiveres problemas, tenta colocar um exemplo online para podermos testar melhor.

Cumps,

 

Edited by coxosclassic

Cumps,

cc

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.