Изменение цвета заголовка диалогового окна jquery, когда другие диалоговые окна открыты, и мы не хотим, чтобы они менялись

0

У меня есть диалоговое окно редактирования/обновления, которое создается jquery и открыто, и после того, как пользователь нажимает кнопку отправки, я хочу показать результат действия с другим диалоговым окном jquery. Проблема заключается в том, что я хочу изменить цвет заголовка диалогового окна результатов на основе результата (успешный или неудачный). И он либо работает, либо делает цвета всех диалоговых окон, которые в настоящее время открываются, изменяется на этот конкретный цвет или вообще не работает. здесь код:

Это css:

<style type="text/css">
.ui-widget-header {
    color:white;
    background:#012567;
    font-family:Tahoma;
    font-weight:bold;
}

.ui-exclamation-message{
    background:#c2c80d;
}

.ui-success-message{
    background:#066417;
}

.ui-failed-message{
    background:#670500;
}
</style>

Это часть jQuery:

function message_dialog_open() {

    switch ($("#messageType").attr("value").toString())
    {
        case "Exclamation":
            $(".ui-widget-header").addClass("ui-exclamation-message");
            break;
        case "Failed":
            $(".ui-widget-header").addClass("ui-failed-message");
            break;
        case "Success":
            $(".ui-widget-header").addClass("ui-success-message");
            break;
    }

    $(".message-dialog-window").dialog("open");
}

Это бритвенная часть:

@using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "message-dialog-window", HttpMethod = "POST", OnSuccess = "message_dialog_open" }))

Это часть контроллера/действия:

[HttpPost]
public PartialViewResult Edit(T_account newAccount)
{
            var _result = new account().UpdateAccount(newAccount);
            if (_result == false)
                return PartialView("_Message", new Message { type = MessageType.Failed, text = "failure message" });
            return PartialView("_Message", new Message { type = MessageType.Success, text = "success message" });

И, наконец, здесь часть html:

<div class="dialog-window edit-dialog-window" id="edit-dialog-window" title="update account information"></div>

<div class="dialog-window message-dialog-window" id="message-dialog-window" title="Request result"></div>

Атрибут типа сообщения будет храниться в скрытом входе на частичном представлении _Message. и в jquery на основе этого значения я пытаюсь изменить цвет ui-widget-header, добавив соответствующий класс. проблема заключается в том, что я пытаюсь добавить класс этим selectot: $ (". ui-widget-header"). addClass ("ui-success-message");

Программа добавит этот класс к каждому элементу с классом "ui-widget-header". что означает, что все ранее открытые диалоговые окна также изменили цвет заголовка. и при попытке использовать этот селектор: $ ("div # message-dialog-window.ui-widget-header"). addClass ("ui-success-message"); он не работает, потому что элементы заголовка не являются частью диалогового окна div #. которые они должны быть из-за ajaxOption: UpdateTargetId = "message-dialog-window", которое я использовал, когда я хотел использовать форму ajax.

Буду признателен, если кто-нибудь сможет сказать, что происходит. или как я могу получить то, что хочу, любым другим способом.

PS: извините за мой длинный пост и плохой английский :)

Теги:
asp.net-mvc
asp.net-mvc-4

1 ответ

0

Я нашел ответ. похоже, что это работает. но я не уверен в нескольких вложенных сообщениях. здесь решение. Я изменил функцию jQuery, чтобы добавить/удалить класс только до последнего элемента "ui-widget-header", который должен быть последним/текущим сообщением, отображаемым пользователю:

function message_dialog_open() {

    $(".ui-widget-header").last().removeClass("ui-exclamation-message");
    $(".ui-widget-header").last().removeClass("ui-failed-message");
    $(".ui-widget-header").last().removeClass("ui-success-message");

    switch ($(".messageType").last().attr("value").toString())
    {
        case "Exclamation":
            $(".ui-widget-header").last().addClass("ui-exclamation-message");
            break;
        case "Failed":
            $(".ui-widget-header").last().addClass("ui-failed-message");
            break;
        case "Success":
            $(".ui-widget-header").last().addClass("ui-success-message");
            break;
    }

    $(".message-dialog-window").dialog("open");
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню