How can I get a jquery css container to pop up letting the user know data was successfully entered?

Question

When a user inserts data into a form and then submits it, it goes to my php script and inserts the data. The script will return a value letting the user know if the data was inserted or not. Since I am using JQuery, I have no idea how to do this. Can someone please point me in the right direction? All I'm after here is a nice, neat little 200px by 25px container that will fade in and the user MUST click it to acknowledge it.

Now that I think about it, since users are not the brightest lights in the harbor, it would be really cool if I could not only show then this css box letting them know if the insert was successful but also show them the customer that was inserted in case they forgot where they left off.

Thanks.

Answer 1

I'm not going to mark this as a duplicate, but you are essentially asking the best way to show notifications using jQuery. And that has been asked before . In a nutshell, in your basic setup all you need to do is show a div and fade it in, but there are a lot of plugins out there that handle more situations.

As far as showing them the customer that was inserted or whatever, all you have to do is return a JSON response from the server and handle it with the success callback of your AJAX request. You will have access to the data passed back from the server then.

To explain a little further: What you seem to be asking to do is how to send a request to a server using Ajax, get a notification that everything went as expected, and then show a notification in the webpage depending on what happened. If that is correct, I'm going to move on with these assumptions.

Let's put together a simple form to add a new customer to a fictional website. It might look like this:

<form action='add_customer.php' method='POST' id='add_customer_form'>
    First Name: <input type='text' name='first_name'><br>
    Last Name: <input type='text' name='last_name'><br>
    Email: <input type='text' name='email'><br>
    <input type='submit' value='Add Customer'>
</form>

Now, our naive, insecure PHP code to handle this form submission (through AJAX) might look something like this. I say naive and insecure because you would do more data validation (as you never trust anything coming from the client) and would certainly need to clean the data to prevent SQL injections. This is an example, however, so it might look like this:

$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
if(mysql_query("
    INSERT INTO customers
    (first_name, last_name, email)
    VALUES 
    ('$first_name','$last_name','$email')
   ")) {
    $success = 1;
    $message = 'Customer ' . $first_name . ' successfully added!';
} else {
    $success = 0;
    $message = 'Something went wrong while adding the customer!';
}
print json_encode(array('success' => $success, 'message' => $message));

We might then handle the sending of this form and the receiving of data from the server, using jQuery, with code that looks a little something like this:

$(function() {
    $('#add_customer_form').submit(function() { // handle form submit
        var data = $(this).serialize(); // get form's data
        var url = $(this).attr('action'); // get form's action
        var method = $(this).attr('method'); // get form's method
        $.ajax({
            url: url, // where is this being sent to?
            type: method, // we're performing a POST
            data: data, // we're sending the form data
            dataType: 'json', // what will the server send back?
            success: function(data) { // the request succeeded, now what?
                // here data is a JSON object we received from the server
                // data.success will be 0 if something went wrong
                // and 1 if everything went well. data.message will have
                // the message we want to display to the user
                // at this point you would use one of the techniques I linked
                // to in order to display a fancy notification

                // the line below will dynamically create a new div element,
                // give it an ID of "message" (presumably for CSS purposes)
                // and insert the message returned by the server inside of it
                var $div = $('<div>').attr('id', 'message').html(data.message);

                if(data.success == 0) {
                    $div.addClass('error'); // to personalize the type of error
                } else {
                    $div.addClass('success'); // to personalize the type of error
                }
                $('body').append($div); // add the div to the document
            }
        });
        return false; // prevent non-ajax form submission.
    });
});

I haven't tested any of this code but the idea is there. You return a format, JSON, from the server, with data, and handle the success callback jQuery fires when the request is complete, and add an element to your document you can style however you want (and show with things like fadeIn() if you want) with a message describing what happened. You might also need to catch the error callback (which fires if your server doesn't respond for whatever reason) and firing off another alert in that situation.

Answer 2

Fading effects can be accomplished by doing one of the following:

jQuery(myDiv).fadeIn()
jQuery(myDiv).fadeOut()
jQuery(myDiv).fadeTo()

I'd recommend you first create this css box - create the html and the css. Then you can experiment with fading - jQuery lets you specify arguments like fade color, fade duration, etc.

Answer 3

Here is something to work from...

Your PHP script outputs this depending on results

$json = array(
    'success' => $insertSuccess,
    'message' => $numRecords . ' records inserted in ' . $insertTime . 's'
);

echo json_encode($json);

Then, in the callback of your JSON, you determine from parsing the JSON object if the insert was successful or not. Your callback might look something like this

function(data) {

    success = data.insertedSuccess;

    if (success) {
         $('#success').fadeIn(1000);
    } else {
         $('#failure').fadeIn(1000);
    }

}