Displaying a notification with jQuery after a form have been submited and the page reloaded?

I know that using .submit will trigger an event when the submit button is clicked. But I would like to trigger the event when the submit button have been clicked and the page reloaded (I think every page reloads after a form have been submitted).

This is an example:

    // Registration
$j("#r开发者_开发问答egister-form form").submit(function() {
          window.alert("submitted");
    $j("#registration-notification").animate({
            height: "21px",
            opacity: 1,
            'padding-top': "8px"
        }, 800 );
    return true;
});

    $j("#close-button").click( function() {
        $j("#registration-notification").animate({
          height: "0px",
          opacity: 0,
          'padding-top': "0px"
        }, 800 );
    });

with that code a notification appears, but the page immediately refreshes. What I want is to make the notification appear after the page refreshes).

Any suggestions to accomplish this?

Use a simple cookie to store when a page is submitted, and read that cookie on load and if it exists, show the notification and then delete the cookie.

EDIT: Sample solution, using jQuery Cookie plugin:

See the jsFiddle simple example here: http://jsfiddle.net/8952S/

This is a simple example, adapt it to your needs.

$(document).ready(function() {
    // check if user just submitted this page
    var justSubmitted = $.cookie('just_submitted');
    if (justSubmitted) {
        $("#registration-notification").show();
        // delete the cookie
        $.cookie('just_submitted', null);
    }

    // Registration
    $("form").submit(function() {
        // create a cookie, then let it submit normally
        $.cookie('just_submitted', 'true');
    });
});

Would you consider an approach that doesn't require a page refresh? A more elegant solution would be to return false from the submit button click event handler which means the page would not refresh and before this, inside the click event handler make an ajax request to submit the form, then handle the response and animate the registration-notification element. This way a server round trip for the whole page is not required. This code snippet should help you if you do decide to follow this route (I'm not sure of your markup so cannot guarantee that this will work).

$j('#register-form form').submit(function() {

    // disable the submit button to avoid duplicate submits
    $j('#submit').attr('disabled', true);

    // send registration request to the server
    $j.ajax({
        url: "URL/To/My/RegistrationPage.php",
        type: "post",
        async: false,
        success: function (data) {
            $j("#registration-notification").animate({
                'height': '21px',
                'opacity': '1',
                'padding-top': '8px'
            }, 800);
        },
        error: function (data) {
            // something bad happened - must deal with it
            alert(data.responseText);
        }
    });

    // return false so that the page does not reload
    return false;
});

Also, refer to the jquery documentation, it's always a huge help to me: http://api.jquery.com/jQuery.ajax/

If it absolutely must be after a page reload then GregL's answer is probably more suitable.