Stylize a return message

Asked

Viewed 1,076 times

1

I would like to stylize the return messages of a Newsletter that I have on my site, the attempts I made did not give the expected result and I believe that the lack of knowledge in the subject has hindered much.

What I got today is this:

<script type="text/javascript">

$(document).ready(function(){

    $("#newsletter-form").submit(function(){

        var valor = $("input[name=newsletter]").val(); 

        if (valor != "" ) {

            $.ajax({
            type: "POST",
            url: "newsletter.php",
            data: $("#newsletter").serialize(),
            dataType: "json",

            success: function(msg){
                $("#Resposta").removeClass('sucesso');
                $("#Resposta").addClass(msg.status);
                $("#Resposta").html(msg.message);

            },
            error: function(){
                $("#Resposta").removeClass('erro');
                $("#Resposta").addClass('erro');
                $("#Resposta").html(msg.message);
            }
        });
        return false;   
        }   
    });
});

The message of success in a div green and error in a red and that both disappear after a period, I have managed to do this, but I do not know if in a correct way.

The definition of the messages are like this in my .php:

<?php

 require_once('Connections/conexao.php');

// Recebendo o array com os ID´S
$email = $_POST['newsletter'];  

//response array with status code and message
$response_array = array();

// Realiza verificação se já existe e-mail gravado no banco
mysql_select_db($database_conexao, $conexao);
$sql = "SELECT email FROM newsletter WHERE email = '$email'";
$busca = mysql_query($sql,$conexao);
$linhas = mysql_num_rows($busca);

if ( $linhas > 0 ){
    //set the response
    $response_array['status'] = 'erro';
    $response_array['message'] = '<p style="color:#f25824">E-mail já cadastrado em nossa base</p>';

} else {
    $sql = "INSERT INTO newsletter (email, status ) VALUES ('$email', 1)";
    mysql_select_db($database_conexao, $conexao);
    $sql = mysql_query($sql); 

    if ($sql) {
        $response_array['status'] = 'sucesso';
        $response_array['message'] = '<p style="color:#669900">Você se inscreveu com sucesso para a nossa newsletter.</p>';         

    } else {
        $response_array['status'] = 'erro';
        $response_array['message'] = '<p style="color:#f25824">O seu endereço de email não pode ser subscrito porque ocorreu um erro no servidor. Por favor, tente novamente mais tarde.</p>';                      
    }       

}

echo json_encode($response_array);

?>

The result of my last attempt can be seen here, when registering an email for newsletter:

Enter an email such as [email protected]

css

  • I use a quick notification ready library called Toastr by Codeseven, which I recommend and would serve exactly for your purpose. [http://codeseven.github.io/toastr/] I’m going to put an example code as a response to how I use it.

  • Hello @Rafael Withoeft, thanks for the tip but the page is in error.

  • Sorry, here clicked normally... anyway I put an example at your disposal if you find interesting.

2 answers

1


This is an example of a javascript function I use to send messages
Library Toastr http://codeseven.github.io/toastr/

function sendToastr(mensagem, tipo) {
    toastr.options = {
        'closeButton': true,
        'debug': false,
        'progressBar': true,
        'positionClass': 'toast-top-full-width text-center',
        'onclick': null,
        'showDuration': '400',
        'hideDuration': '1000',
        'timeOut': '5000',
        'extendedTimeOut': '1000',
        'showEasing': 'swing',
        'hideEasing': 'linear',
        'showMethod': 'fadeIn',
        'hideMethod': 'fadeOut'
    };
    if (tipo == "success") {
        toastr.success(mensagem);
    } else if (tipo == "error") {
        toastr.error(mensagem);
    } else if (tipo == "info") {
        toastr.info(mensagem);
    }

}

Example of use:

sendToastr('CNPJ Inválido', 'error');

Remembering that the javascript library needs to be loaded.

  • If by any chance the comments made in the question are deleted, that answer loses all meaning. Nor is it mentioned which library this being used, no explanations and references of how to use it Keep in mind that the important thing in this community are the questions and the answers, not the comments.

  • I just edited and mentioned the library and its link.

  • Hello @Rafael Withoeft, would be able to give an example of how to recover error messages or hit from my . php

  • @adventistapr Sorry but what kinds of errors did you mean? If they are PHP you can use error_reporting(E_ALL);&#xA;ini_set('display_errors', '1');, if it is validation of your code (ex: e-mail) would have to be otherwise.... could be more specific?

  • I used @Rafael Withoeft’s tip, I’m still learning, but the tip was very interesting.

0

If I understand correctly, I know Flavr. It’s great, shows a popup alert box, and also has confirmation and prompt buttons, as if it were native functions of javascript "Alert", "confirm" and "prompt", but customized in the style of Flat design. The only problem you have is that you get paid, it costs 6 dollars.

In case you want to take a look: http://dierg.com/flavr/

I hope I’ve helped!

  • Thanks @Haroldo Torres, I’ll take a look, even getting paid may be a future solution.

Browser other questions tagged css

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