我在让我的jQuery-UI确认对话框按照我需要的方式工作时遇到问题。我在Visual Studio中有一个.aspx表单,其中包含C#代码。我想要求用户确认提交按钮,但仅当在 RadioButtonList 控件中选择了特定的单选按钮并且整数值(代码隐藏中的公共 int 属性)> 0 时。
这是我的确认对话框的代码:
//Confirm Replace Bill Info dialog
var replConfirmed = false;
function ConfirmReplaceDialog(obj, title, dialogText) {
var rbl = document.getElementsByName("<%= rbReplaceAppend.ClientID %>");
var infoID = parseInt("<%= infoID %>");
//Raise this dialog only if "Replace" is selected and there is existing info
if (rbl[0].checked && infoID > 0) {
if (!replConfirmed) {
//add the dialog div to the page
$('body').append(String.Format("<div id='confirmReplaceDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
//create the dialog
$('#confirmReplaceDialog').dialog({
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) {
$('body').find('#confirmReplaceDialog').remove();
},
buttons: {
'Yes, replace info': function() {
$(this).dialog('close');
replConfirmed = true;
if (obj) obj.click();
},
'No, cancel': function() {
$(this).dialog('close');
}
}
});
}
return replConfirmed;
}
//if "Replace" is not selected (i.e. "Append" is selected), always return true
return true;
}
这是.aspx页面的部分(太长了,无法发布整个内容),应该调用对话框:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:RadioButtonList ID="rbReplaceAppend" runat="server" Font-Size="X-Small" RepeatDirection="Horizontal">
<asp:ListItem Selected="True">Replace</asp:ListItem>
<asp:ListItem>Append</asp:ListItem>
</asp:RadioButtonList>
</td>
<td rowspan="2">
<asp:Label ID="lblReplaceAppend" runat="server" CssClass="instructions" Text="(select 'Replace' to replace the information here with the Bill Request info, or 'Append' to add the Bill Request info to information already present)"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnGetReqInfo" runat="server" Text="Get Request Info" OnClick="btnGetReqInfo_Click" OnClientClick="return ConfirmReplaceDialog(this, 'Please confirm information replacement', 'Warning: you are replacing existing information. Are you sure you wish to do this (cannot be undone)?');" />
</td>
</tr>
</table>
正在发生的事情是我的对话框从未被引发 - OnClick 事件总是触发并提交表单。
有什么想法吗?
更新(根据要求):以下是浏览器看到的相同代码部分:
Javascript:
//Confirm Replace Bill Info dialog
var replConfirmed = false;
function ConfirmReplaceDialog(obj, title, dialogText) {
var rbl = document.getElementsByName('ctl00_mainContent_rblReplaceAppend');
var infoID = parseInt('10');
//Raise this dialog only if "Replace" is selected and there is existing info
if (rbl[0].checked && infoID > 0) {
alert('conditions exist for confirmation');
if (!replConfirmed) {
//add the dialog div to the page
$('body').append(String.Format("<div id='confirmReplaceDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
//create the dialog
$('#confirmReplaceDialog').dialog({
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) {
$('body').find('#confirmReplaceDialog').remove();
},
buttons: {
'Yes, replace info': function() {
$(this).dialog('close');
replConfirmed = true;
if (obj) obj.click();
},
'No, cancel': function() {
$(this).dialog('close');
}
}
});
}
return replConfirmed;
}
//if "Replace" is not selected (i.e. "Append" is selected), always return true
return true;
}
.aspx:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="ctl00_mainContent_rblReplaceAppend" border="0" style="font-size:X-Small;">
<tr>
<td><input id="ctl00_mainContent_rblReplaceAppend_0" type="radio" name="ctl00$mainContent$rblReplaceAppend" value="Replace" checked="checked" /><label for="ctl00_mainContent_rblReplaceAppend_0">Replace</label></td>
<td><input id="ctl00_mainContent_rblReplaceAppend_1" type="radio" name="ctl00$mainContent$rblReplaceAppend" value="Append" /><label for="ctl00_mainContent_rblReplaceAppend_1">Append</label></td>
</tr>
</table>
</td>
<td rowspan="2">
<span id="ctl00_mainContent_lblReplaceAppend" class="instructions">(select 'Replace' to replace the information here with the Bill Request info, or 'Append' to add the Bill Request info to information already present)</span>
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$mainContent$btnGetReqInfo" value="Get Request Info" onclick="return ConfirmReplaceDialog(this, 'Please confirm information replacement', 'Warning: you are replacing existing information. Are you sure you wish to do this (cannot be undone)?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$mainContent$btnGetReqInfo", "", true, "valGetRequest", "", false, false))" id="ctl00_mainContent_btnGetReqInfo" />
</td>
</tr>
</table>
我刚刚找到了答案 - 无论出于何种原因,我都必须在这里使用 UniqueID 而不是 ClientID(我需要了解区别是什么,以及何时适合使用每个)。用document.getElementsByName('<%= rblReplaceAppend.UniqueID %>')
替换document.getElementsByName('<%= rblReplaceAppend.ClientID %>')
后,它可以正常工作。