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

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 2

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);
    }

}