jQuery 对话框在屏幕上闪烁而不是等待用户输入
Posted
技术标签:
【中文标题】jQuery 对话框在屏幕上闪烁而不是等待用户输入【英文标题】：jQuery Dialog Flashes On Screen Instead of Staying Put for User Input 【发布时间】：2018-07-07 14:22:18 【问题描述】：在这个 Asp.net webform 应用程序中，我必须添加一个 jQuery 对话框，因为客户端需要一个自定义弹出确认框。我必须在后面的代码中附加对话框，因为对话框只会添加到 GridView 的某些行中的按钮。当单击按钮以显示对话框时，它只是在屏幕上闪烁，用户没有时间单击按钮。认为这是导致此问题的 GridView_RowCommand 事件末尾的重定向，但是一旦将其注释掉，它仍然会在屏幕上闪烁。认为它与按钮本身的回发功能有关，但似乎无法解决这个问题。尝试通过 jQuery 而不是后面代码中的 OnClientClick 属性附加对话框的打开，但这似乎也不起作用。有人可以看一下代码 sn-ps 看看我做错了什么或建议另一种方法来完成我需要做的事情吗？这是阻止我完成这个项目的唯一障碍。非常感谢您的帮助。
对话框的 html：
<div style="display:none" id="dialog-warning" title="Out of Network">
<p class="CallOut">
<asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
</p>
<p style="text-align:center;">
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="return true;" CausesValidation="false" /><br /><br />
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" runat="server" OnClientClick="return false;" CausesValidation="false" />
</p>
</div>
用于设置对话框样式、打开对话框并将其附加到所需按钮的 jQuery：
$(function ()
var dlg = $("#dialog-warning").dialog(
resizable: false,
height: 200,
width: 300,
modal: true,
autoOpen: false,
open: function (event, ui)
$(".ui-dialog-titlebar-close", ui.dialog).hide();
).prev(".ui-dialog-titlebar").css("background", "#A0A0A0").css("font-family", "Arial").css("font-weight", "bold").css("color", "white").css("text-align", "center").css("font-size", "11px");
dlg.parent().appendTo(jQuery("form:first"));
);
function OpenDialog()
$("#dialog-warning").dialog("open");
$(document).ready(function ()
$('[outofnetwork=true]').click(function ()
OpenDialog();
)
)
GridView_RowDataBound事件（添加属性标识哪些行需要附加对话框，然后在$(document).ready()中使用jQuery附加函数打开对话框）：
else
e.Row.Cells[11].Style.Add("color", "#ff0000");
if (string.IsNullOrEmpty(ss.PhysicalServices))
//btn.OnClientClick = "OpenDialog();";
btn.Attributes.Add("outofnetwork", "true");
GridView_RowCommand 事件（点击按钮后执行的代码）：
if (e.CommandName == "Navigate")
//CommandArgument comes in as XXX|YYY|ZZZ where XXX is the SiteID and YYY is the Network
//and ZZZ is the NetworkSort value. We parse out the values by splitting the CommandArgument on the pipe symbol
//Element 0 (zero) is the siteid and element 1 (one) is the network and element 2 (two) is the NetworkSort value.
oEventFlow.ClinicDetails.SiteID = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[0].ToString());
oEventFlow.ClinicDetails.Network = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[1].ToString());
oEventFlow.ClinicDetails.NetworkSort = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[2].ToString());
Session[EventFlow.cEVENTFLOWSessionKey] = oEventFlow;
//Redir(oEventFlow.SiteSelectionRedirect);
//int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
//GridViewRow selectedRow = gridResults.Rows[selectedIndex];
//if (selectedRow.Cells[11].Text != "OUT OF NETWORK")
//
// Redir(oEventFlow.SiteSelectionRedirect);
//
希望这很清楚我想要完成的工作。如果没有，请发表评论，我会更正。再次感谢。
【问题讨论】：
【参考方案1】：我不得不使用一些技巧来使用 jQuery、另一个服务器控制按钮和几个隐藏字段来解决这个问题。
GridView_RowDataBound 事件处理程序中的代码，用于将类添加到符合条件的 asp 按钮。
if ((PhysicalNetworkTypes)ss.PhysicalNetworkType == PhysicalNetworkTypes.ContractedInNetwork)
e.Row.Cells[11].Style.Add("color", "#63d834");
else
e.Row.Cells[11].Style.Add("color", "#ff0000");
if (string.IsNullOrEmpty(ss.PhysicalServices))
btn2.CssClass += " outofnetwork";
我在与原始 OneClickButton 相同的列中添加了一个 asp:Button，最终我将其隐藏了。新按钮将处理确定对话框何时显示或不显示的所有前端功能。
<ItemTemplate>
<cc2:OneClickButton Text='Select' CssClass='NavButton' runat='server' ID='btnGetReport' CausesValidation='false'
CommandName='Navigate' Width="100" style="display:none;" />
<asp:Button Text="Select" CssClass="NavButton network" runat="server" ID="btnDummy" CausesValidation="false" CommandName="Navigate" Width="100" OnClientClick="return false;" />
</ItemTemplate>
我添加了一个隐藏字段，其中包含 OneClickButton 的相应名称，以及另一个隐藏字段，如果单击对话框中的“继续下一步”按钮，则该隐藏字段的值将保持为 true。对话框中的 Back to Search Clinic 按钮只会关闭对话框。对话框中的“继续下一步”按钮将调用保存在 btnToClick 隐藏字段中的相应 OneClickButton 的 Click 事件。
<input type="hidden" id="btnProceedClicked" runat="server" />
<div style="display:none" id="divWarning" title="Out of Network">
<p class="CallOut">
<asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
</p>
<p style="text-align:center;">
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="$('#divWarning').dialog('close');" CausesValidation="false" /><br /><br />
<Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" CausesValidation="false">Proceed to Next Step</Button><input type="hidden" id="btnToClick" />
</p>
</div>
在 $(document).ready() 中，我通过替换 Asp.net 按钮的名称并将该值放在 btnToClick 隐藏字段中来获取 OneClickButton 的 ID。该对话框仅针对具有 outofnetwork 类的 asp 按钮显示，该类在后面代码的 GridView_RowDataBound 事件处理程序中设置。否则，为相应的 OneClickButton 调用 click() 方法。此外，如果在对话框中单击了继续下一步按钮，则值 true 将存储在 btnProceedClicked 隐藏字段中。此值在 GridView_RowCommand 事件处理程序中用于确定是否应该发生重定向。
$(function ()
var dlg = $("#divWarning").dialog(
resizable: false,
height: 200,
width: 300,
modal: true,
autoOpen: false,
open: function (event, ui)
$(".ui-dialog-titlebar-close", ui.dialog).hide();
).prev(".ui-dialog-titlebar")
.css("background", "#A0A0A0")
.css("font-family", "Arial")
.css("font-weight", "bold")
.css("color", "white")
.css("text-align", "center")
.css("font-size", "11px");
dlg.parent().appendTo(jQuery("form:first"));
);
$(document).ready(function ()
$('.network').click(function ()
console.log(this);
var btnID = '#' + $(this).attr("id").replace("btnDummy", "btnGetReport");
if ($(this).hasClass('outofnetwork'))
$('#btnToClick').val(btnID);
$("#divWarning").dialog("open");
else
$(btnID).click();
return false;
);
$('#btnProceed').on('click', function ()
console.log($('#btnToClick').val());
$('#ctl00_ContentPlaceHolder1_btnProceedClicked').val("true");
$($('#btnToClick').val()).click();
);
)
在 GridView_RowCommand 事件处理程序中添加的代码以确定是否应该发生重定向。
//Grabs the index from the end of the CommandArgument and uses to get the selected row in the GridView.
int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
GridViewRow selectedRow = gridResults.Rows[selectedIndex];
//Redirects if an "IN NETWORK" row was selected or and "OUT OF NETWORK" row was selected and the user clicked on Proceed to Next Step button in the popup dialog.
if (selectedRow.Cells[11].Text != "OUT OF NETWORK" || (selectedRow.Cells[11].Text == "OUT OF NETWORK" && btnProceedClicked.Value == "true"))
Redir(oEventFlow.SiteSelectionRedirect);
【讨论】：
【参考方案2】：所以我认为你的问题是事件默认是点击 asp 按钮的回发。这就是模式在打开时闪烁的原因，因为它打开然后页面重新加载。你可以解决这个问题
1) 在 openDialog() 函数结束时或使用 e.preventDefault 时返回 false。这与以下堆栈溢出有关question
2) 使用更新面板
3) 使用普通html按钮（需要指定type="button"）
preventDefault
所以你会在 aspx 中的服务器上运行对话框
<div style="display:none" id="dialog_warning" title="Out of Network" runat="server">
<p class="CallOut">
<asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
</p>
<p style="text-align:center;">
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="return true;" CausesValidation="false" /><br /><br />
<asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" runat="server" OnClientClick="return false;" CausesValidation="false" />
</p>
</div>
<script>
// your js code
// etc
function OpenDialog(e)
$("#dialog-warning").dialog("open");
// prevent default
e.preventDefault();
</script>
然后在GridView_RowDataBound
btn.Click += new EventHandler(delegate (object _s, EventArgs _e)
// your code
// etc
// add client click
dialog_warning.OnClientClick = "OpenDialog()";
);
更新面板
您只需将按钮包装在更新面板中以及任何将由代码隐藏更新的内容，但由于除了模式弹出窗口之外没有任何变化，您可以将按钮留在面板中
<asp:UpdatePanel id="UpdatePanel1" runat="server" updatemode="Conditional">
<ContentTemplate>
<asp:Button id="button1" runat="server" Text="Click me!" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger controlid="button1" eventname="Click" />
</Triggers>
</asp:UpdatePanel>
html 按钮
在行数据绑定中动态添加一个带有 onclick 设置的 html 按钮
e.Row.Cells[i].Controls.Add(
new LiteralControl("<button type='button' onclick='OpenDialog()'></button>")
);
【讨论】：
感谢您的回复。忘了说这个项目中的代码是旧的......C# 2.0，所以不允许使用 var。此时升级不是一个选项。无论如何，在我的代码中，dialog_warning 实际上是对话警告，它会抛出一个错误，说“对话”在当前上下文中不存在。知道这是怎么回事吗？后面的标记和代码中的名称相同。甚至把“-”改成“_”还是一样。 @cnotes 我更新了答案，让我知道这是否适合你 @Johnathan Portorreal 感谢您的更新。我尝试了 PreventDefault 解决方案，它甚至没有显示对话框。我玩了一点也没用。 HTML Button 解决方案行不通，因为 GridView 中的按钮是我工作的公司创建的专有按钮。我尝试了 UpdatePanel 解决方案，它确实阻止了对话框闪烁，但即使对于没有附加弹出窗口的按钮，它也会导致进入下一页的时间很长。此外，对话框中的返回真/假按钮无法正常工作......尽管这可能是预先存在的。以上是关于jQuery 对话框在屏幕上闪烁而不是等待用户输入的主要内容，如果未能解决你的问题，请参考以下文章