How can I get the jquery css container to pop up, letting the user know the data has been entered successfully?

I won't mark this as a duplicate, but you are essentially asking for the best way to show notifications using jQuery. And that was before . In a nutshell, in your basic setup, all you have to do is show the div and fade it out, but there are many plugins out there that handle more situations.

As far as showing them a client that has been inserted or whatever, all you have to do is return a JSON response from the server and process it with a success callback for your AJAX request. Then you will have access to the data transferred from the server.

To explain a little further, what you seem to want to do is how to send a request to the server using Ajax, get notified that everything went as expected, then show a notification on the web page depending on of what happened, If this is correct, I will continue with these assumptions.

Combine 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, unsafe PHP code to handle this form submission (via AJAX) might look something like this. I say naively and insecurely because you will be doing more data validation (since you never trust anything coming from the client) and it is definitely necessary to clean up the data to prevent SQL injection. This is an example, however, 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 can then handle submitting that form and receiving data from the server using jQuery with code that looks something like this:

$(function() {
    $('#add_customer_form').submit(function() { // handle form submit
        var data = $(this).serialize(); // get form data
        var url = $(this).attr('action'); // get form action
        var method = $(this).attr('method'); // get form 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 these codes, but there is an idea. You return the format, JSON, from the server, with the data, and handle the success callback. JQuery runs when the request is complete and adds an element to your document that you can style fadeIn()

however you want (and display with things like if you want) with a message describing what happened. You may also need to catch the error callback (which fires if your server is unresponsive for whatever reason) and disable another warning in this situation.