我有编辑/更新对话框,由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's 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#message-dialog-window的一部分。它们应该是因为ajaxOption:UpdateTargetId =“message-dialog-window”,当我想使用ajax表单时我使用它。
如果有人知道发生了什么,我将不胜感激。或者我怎样才能以任何其他方式获得我想要的东西。
PS:对不起我的长篇文章和糟糕的英语:)
答案 0 :(得分: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");
}