Can jQuery's fadeIn work without AJAX?

Question

I'm submitting a form, sometimes I have some messages that I want to show to the user. I want those messages to jQuery fadeIn after they click on the submit button. Is it possible to achieve that if the submission doesn't involve any AJAX?

Here's a sample Django/Python code:

# View code
message = 'feedback to user'

# Template
<div id="messages">{{ message }}</div>

The equivalent PHP code of the above might be:

<?php
$message = 'feedback to user';
?>
<div id="messages"><?= $message ?></div>

I want #messages above to fade in after a POST. How can I achieve that?

Answer 1

Just have it in your document.ready event handler, like this:

$(function() {
  $("#messages").fadeIn();
});

If there's a id="messages", it'll find it and fade it in...if it's not there, that's fine and it won't error. If you wanted to check if it had any test before fading it in, you can do that too, like this:

$(function() {
  $("#messages").filter(function() { return $(this).text() != ""; }).fadeIn();
});

In this approach <div id="messages"> is always present, but only fades in if there's some text in it.

Answer 2

You're causing a page refresh after posting the form, typical of most forms on the Web, right?

Sure, that's fine. With progressive enhancement in mind, keep #messages visible with CSS , then hide it in jQuery and fade it in:

$(function()
{
    $('#messages').hide().fadeIn();
});

fadeIn() is merely a function for you to animate elements on your web page. It has absolutely nothing to do with Ajax requests.

Answer 3

First off, I know this is not "exactly" what you ordered/asked for, I started out like you, then I wanted to show some "canned" stuff for ajax calls as well as timed message in it for different messages so I came up with this: ( note for yours change errorMessage.show(); to errorMessage.fadein();)

    <div class="myErrorContainer">
        <div class="myErrorStatus ajaxLoading " id="myErrorStatus">
            <span id="Errorstatus" class="ui-state-error-text myErrorStatusText"></span>
        </div>
    </div>

show a little ajax loading (if you want that) using CSS

.ajaxLoading
{
    width: 100%;
    background-image: url("../Images/ajax-loader.indicator.gif");
    background-repeat: no-repeat;
    background-position: left middle;
}
.myErrorStatus
{
    text-align: center;
    width: 100%;
}
.myErrorStatusText
{
    color: #FF0000;
    font-weight: bold;
}

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

then, I put in this to show on ALL ajax calls:(where a myUserName javascript variable has the users name)

/* Ajax methods */

/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for ' + myUserName;
$(function()
{
    $("#Errorstatus")
    .bind("ajaxSend", function()
    {
        $(this).text(loadingMessage);
        $(this).show();
    })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

Then, you can use it like so:

ShowStatus(true, 'Update Failed with unknown Error', 4000);

NOTE: IF you don't want the ajax background indicator you can do a $('#myErrorStatus').removeClass('ajaxloading'); then replace it with $('#myErrorStatus').addClass('ajaxloading'); later.