jQuery-UI 確認ダイアログを必要な方法で動作させるのに問題があります。Visual Studio に C# コード ビハインドを含む .aspx フォームがあります。送信ボタンでユーザーに確認を求めたいのですが、RadioButtonList コントロールで特定のラジオ ボタンが選択されていて、かつ整数値 (コード ビハインドの public 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>