Как я могу скрыть пользовательское уведомление от HtmlHelper при загрузке страницы? - PullRequest
Новая
       6

Как я могу скрыть пользовательское уведомление от HtmlHelper при загрузке страницы?

1 голос
/ 17 августа 2010

Я использую HtmlHelper для отображения обновления для пользователя следующим образом:

На веб-странице: 

<%=Html.CourseUpdateNotification() %>

В моем контроллере: 

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

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

В данный момент уведомление пользователю остается на экране до тех пор, пока пользователь не уйдет со страницы или не обновит страницу (как и ожидалось).

Эффект, которого я хотел бы достичь, состоит в отображении уведомления, нозатем исчезнуть через 3 секунды.

Я попытался добиться этого с помощью следующего jQuery:

(ПРИМЕЧАНИЕ. - HtmlHelper использует TagBuilder для создания div с классоматрибут feedback-complete) 

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

К сожалению, это не работает для меня, и я не могу понять, почему.Я пробовал несколько вариантов, в том числе $(window).load и т. Д., Но безрезультатно.

Мне не хватает чего-то более фундаментального в отношении HtmlHelper и как к нему можно получить доступ после загрузки страницы?

Проницательность всегда ценится.

Ответы [ 3 ]

1 голос
/ 17 августа 2010

Попробуйте удалить дополнительные $(function() { строки.

Например, 

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

HTH,
Charles

РЕДАКТИРОВАТЬ: Хорошо, если это неработа попробуйте это. 

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

Если это не сработает, вам нужно выяснить, в чем проблема.Я бы посоветовал раздвинуть его до основы и перейти оттуда.

Так что попробуйте сначала: 

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

Если это работает, как ожидалось, попробуйте это:* Или это: 

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

и т. Д.

0 голосов
/ 18 августа 2010

После некоторых исследований я думаю, что проблема заключалась в том, как была отформатирована строка возврата из моего HtmlHelper.

Первоначально у меня было это в 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>";

Который выглядит так в HTML (обратите внимание на отсутствие апострофов вокруг имени класса): 

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

Вместо этого я изменил HtmlHelper, чтобы отформатировать строку следующим образом: 

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

Затем он рендерил HTML, который имел ' вокруг имени класса ... 

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

Как только я изменил вышеупомянутое, я получил эффект затухания, который я искал после 3-секундной задержки, используя следующий jQuery (подсказка для Hat Charlino) 

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

Наконец, мне интересно, что отсутствие апострофов вокруг имени класса не помешало CSS правильно отобразить HTML. Вначале я (наивно) предположил, что тот факт, что HTML-фрагмент правильно отображался без апострофов, означал, что это не могло быть причиной того, почему эффект затухания jQuery не работал для меня ...

0 голосов
/ 18 августа 2010

В качестве альтернативы, если вы используете jQuery 1.4, вы можете использовать новый метод .delay () .

Я сам не пробовал, но думаю, что смогу сделать что-то подобное. 

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

HTHS
Charles

...