How can I fade out a user notification rendered by HtmlHelper on page load?

Question

I am using a HtmlHelper to display an update to a user as follows:

In webpage:

<%=Html.CourseUpdateNotification() %>

In my controller:

public ActionResult UpdateOnceOnlyCourseRecord(some parameters)
{
    //validation code etc...
    //Save to database etc...

    TempData["CourseUpdateNotification"] = "Success";
    return RedirectToAction("ShowCourses", "Course");
}

At the moment, the notification to the user remains on the screen until the user navigates away from the page or refreshes the page (as expected).

The effect I would like to achieve is to display the notification but then fade it out after 3 seconds.

I tried to achieve this with the following jQuery:

(NOTE - The HtmlHelper uses TagBuilder to create a div with the class attribute feedback-complete)

$(document).ready(function() {
    $(function() {
        if ($('div.feedback-complete').length > 0) //Check if exists
        {
        setTimeout(function() { $('div.feedback-complete').fadeOut(); }, 3000);
        }
    });
});

Unfortunately this does not work for me and I cannot work out why. I have tried a few variations, including $(window).load, etc. but to no avail.

Am I missing something more fundamental regarding HtmlHelper and how it can be accessed after the page load?

Insights always appreciated.

Answer 1

Try taking out the additional $(function() { lines.

E.g.

$(document).ready(function() {
    if ($('div.feedback-complete').length > 0) //Check if exists
    {
        setTimeout(function() { $('div.feedback-complete').fadeOut(); }, 3000);
    }
});

HTHs,
Charles

EDIT: Ok, if that doesn't work try this.

setTimeout(function() { jQuery('div.feedback-complete').fadeOut(); }, 3000);

If that doesn't work then you need to find out where the issue it. I would suggest strip it back to basics and moving from there.

So try this first:

setTimeout("alert('I am displayed after 3 seconds!')", 3000);

If that works as expected, try this:

setTimeout(function () { alert('I am displayed after 3 seconds!'); }, 3000);

Or this:

setTimeout("jQuery('div.feedback-complete').fadeOut()", 3000);

Etc etc

Answer 2

As an alternative, if you are using jQuery 1.4 you could use the new .delay() method.

I haven't tried it at all myself but I think might be able to do something like this.

$(document).ready(function() {
    $('div.feedback-complete').delay(3000).fadeOut();
});

HTHs,
Charles

Answer 3

After some research I think the issue was how the return string from my HtmlHelper was formatted.

Initially I had this in the HtmlHelper:

    public static class NotificationHelper
    {
        public static string PasswordNotification(this HtmlHelper html)
        {
        //Other code...
        return "<div class=feedback-complete><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>";

Which rendered like this in Html (note the lack of apostrophes around the class name):

<div class=feedback-complete><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>

Instead, I changed the HtmlHelper to format the string as follows:

    public static class NotificationHelper
    {
        public static string PasswordNotification(this HtmlHelper html)
        {
        //Other code...
        return String.Format("<div class='{0}'></label><img src=/Images/SuccessTick.png class='{1}'alt=success>Your password has been succesfully saved</div>", "feedback-complete", "notification-icon");

This then rendered Html that had ' around the class name...

<div class='feedback-complete'><img src=/Images/SuccessTick.png class=notification-icon alt=success>Your password has been succesfully saved</div>

Once I changed the above I got the fade-out effect I was looking for after a 3 second delay using the following jQuery (Hat tip to Charlino)

setTimeout("jQuery('div.feedback-complete').fadeOut()", 3000);

Finally, I find it interesting that the the lack of apostrophes around the class name did not stop the CSS from rendering the Html correctly. I (naively) assumed at the outset that the fact that the html fragment rendered correctly without the apostrophes meant that this couldn't be the issue of why the jQuery fadeout effect wasn't working for me...