Home/ Questions/Q 1008523
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:47:03+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0