テキストボックスの値が空のままで、ユーザーがテレリックのRadリボンバーボタンの「保存」をクリックするかどうかを選択するラジオボタンとして表示される可能性のある値(JavaScript配列に保存されている)をユーザーに表示したいマスターページに敷設。
私の問題は、[保存] をクリックすると、サーバー側のメソッドが jQuery UI ダイアログが閉じるのを 待たないことです。ダイアログ ボックスが消えるまでここで待機するという while ループを試しましたが、突然スパイクしてページがハングアップしました:-(
- 私のシナリオでは、他のアプリケーションからデータをインポートしているため、on change イベントを使用できません
- 要件:保存中にボックスに使用可能な値を入力し、選択した値を取得して選択した値で保存を続けるため、ボタンを追加して非表示にして.click()イベントをトリガーすることはできません
- 私のクライアントは「return false;」を歓迎しないかもしれません。彼らはただ節約を続けたいだけです
私は次の作業をしています
- 保存ボタンが呼び出されると、クライアント側のイベント ハンドラーがコンテンツ ページから呼び出されます
- 上記の JavaScript 関数は、値が空かどうかをチェックします
- サーバー側から利用可能な値を取得し、配列に格納する
- HTMLの作成とオンザフライ(以下のコード)
コード スニペット 1 (コンテンツ ページで jQuery UI ダイアログの div を宣言するため)
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Scripts/JQueryUI/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<link href="../Scripts/JQueryUI/css/smoothness/jquery-ui.min.css" rel="stylesheet"
type="text/css" />
<link href="../Scripts/JQueryUI/css/smoothness/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<div id="dialog-confirm" title="Tracking #">
<span style="float: left; margin: 0 7px 20px 0; z-index: 999999 !important"></span>
<p>
</p>
</div>
コード スニペット 2 (保存時に Click イベントがトリガーされたときにクライアント側関数を起動します)
function onSave(sender, args) {
var sButtonText = args.get_button().get_text();
if (sButtonText == "Save") {
var
trackingIDs = $('#<%=_tbPrevtrackerID.ClientID %>').val(),
$trackerIDInputControl = $('#<%= tbtrackerID.ClientID %>'),
currenttrackerIDValue = $trackerIDInputControl.val(),
trackerIDs = trackingIDs.split(',').clean(''), //Extension Method
noOftrackerIDsAvailable = trackerIDs.length,
markup = 'trackerID is empty : <br/><br/><input type="radio" name="trackerIDGroup" value="" >Leave Empty</input><br/>';
for (var i = 0; i < noOftrackerIDsAvailable; i++) {
markup += '<input type="radio" name="trackerIDGroup" value="' + trackerIDs[i] + '">' + trackerIDs[i] + '</input><br/>';
}
if (currenttrackerIDValue == '') {
$('#dialog-confirm').css({ 'display': 'block' });
$("input:radio[name=trackerIDGroup]").click(function () {
$trackerIDInputControl.val($(this).val());
trackerIDChecked = true;
});
//Please note, if I'd use following it does work, but I am going to have multiple values
//$trackerIDInputControl.val(prompt(markup, trackerIDs[0]));
if ($("#dialog-confirm") != null) {
$("#dialog-confirm p").html(markup);
$("#dialog-confirm").dialog({
resizable: false,
height: 300,
width: 300,
closeOnEscape: false,
modal: false,
buttons: {
"Ok": function () {
if ($trackerIDInputControl.val() != '') {
$('#dialog-confirm').css({ 'display': 'none' });
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
$('#dialog-confirm').css({ 'display': 'none' });
}
}
}).parent().appendTo(jQuery("body form"));
}
}
}