У меня есть диалоговое окно редактирования/обновления, которое создается 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: извините за мой длинный пост и плохой английский :)
Я нашел ответ. похоже, что это работает. но я не уверен в нескольких вложенных сообщениях. здесь решение. Я изменил функцию 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");
}