Stylize return message

Navigation
1

I would like to style the return messages of a newsletter 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 been very messed up.

What I have 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 success message in a% green and the error in a red% and both of them disappearing after a period, this I have already been able to do, but I do not know if correctly.

The definition of the messages is thus in my div : 

<?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, by subscribing to an email newsletter:

Insert an email such as: [email protected]

    
asked by anonymous 04.02.2015 / 20:10

2 answers

1

This is an example of a javascript function that I use to send the messages
Library Toastr link 

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

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

Remembering that the library javascript needs to be loaded.

    
04.02.2015 / 20:28
0

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

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

I hope I have helped!

    
04.02.2015 / 22:38
Navigation Drawer Activity Problem with SESSION in php