このプロセスには多くのコードが必要ですが、問題の本質を説明できないかどうか見てみましょう。まず、最終的にはすべてが機能します。IE ブラウザを使用している場合、ListBox への入力が遅れるだけです。エラーはスローされませんが、何かが起こるまでに 5 秒ほどかかります。
必要な機能の説明: qTip2 の Jquery アドオンを使用してモーダル ポップアップを作成します。このモーダルは、3 つのメイン コントロールと 2 つのボタンで構成されています。コントロールは、ユーザーが単語を入力するための TextBox であり、最初の ListBox に入力されるすべてのオブジェクトに入力されます。2 つのリスト ボックスがあります。1 つ目は使用可能なすべてのオブジェクトを設定し、2 つ目はユーザーが最初の ListBox のオブジェクトをクリックしたときに設定します。
モーダル ポップアップを作成するために呼び出す 2 つの関数を次に示します。ユーザーが LinkButton をクリックしたときに実行されます。
function CreateAnalyteForm(newRegulatory) {
var AnalyteWrapperDiv = $('<div class="ta-analyteWrapper" />');
var MessageDiv = $('<div class="ta-orderCenterDiv">Start typing the Analyte name in the text box below to populate the first list box, then click on the Analyte name to move it over to the selected box, or click on the selected box to remove them. Once you’ve made your selections, click the Submit button to continue to the next step.</div>');
var AnalyteTypeAheadDiv = $('<div class="ta-analyteTypeAheadDiv" />');
var AnalyteFormDiv = $('<div class="ta-analyteSelectWrapper" />');
var AnalyteListBox = $('<div class="ta-analyteListBox" />');
var AnalyteSelectBox = $('<div class="ta-analyteSelectBox" />');
var ButtonHolder = $('<div class="ta-buttonCenterDiv" />');
var Submit = $('<a class="ta-button" onclick="javascript:AddNewAnalytes(' + newRegulatory + ');"><span>Submit</span></a>');
var Cancel = $('<a class="ta-button" onclick="javascript:CancelAddAnalytes();"><span>Cancel</span></a>');
var TypeAheadInput = $('<input id="txtAnalytesTypeAhead" />');
var ListAnalyte = $('<select id="lbAnalyteMatches" name="lbAnalyteMatches" multiple="multiple" size="10" onchange="javascript:AddAnalyte();" ></select>');
var SelectAnalyte = $('<select id="lbSelectedAnalytes" name="lbSelectedAnalytes" multiple="multiple" size="10" onchange="javascript:RemoveAnalyte();" ></select>');
AnalyteTypeAheadDiv.append(TypeAheadInput); AnalyteFormDiv.append(AnalyteListBox.append(ListAnalyte)).append(AnalyteSelectBox.append(SelectAnalyte));
ButtonHolder.append(Submit).append(Cancel);
AnalyteWrapperDiv.append(MessageDiv).append(AnalyteTypeAheadDiv).append(AnalyteFormDiv).append(ButtonHolder);
BuildAnalyteControl(AnalyteWrapperDiv);
}
function BuildAnalyteControl(OrderForm) {
$('#lnkAddAnalytes').qtip({
content: {
title: {
text: "Select Analytes",
button: "Close"
},
text: OrderForm
},
position: {
target: $('BODY'),
my: "center center",
at: "center center"
},
show: {
ready: true,
solo: true,
event: "click",
modal: true
},
hide: {
event: false
},
style: {
classes: 'ui-tooltip-light'
},
events: {
show: function(event, api) {
$(function() {
$('#txtAnalytesTypeAhead').autocomplete({
source: function(request, response) {
var data = new Array();
$('select[id$=lbAnalyteMatches]').empty();
$.ajax({
type: "POST",
url: GetULRCall() + "RegulatoryTool/GetAnalyteList",
dataType: "json",
data: { analyteName: request.term },
success: BuildOptionSucceed
})
}
})
});
},
hide: function(event, api) {
$('#lnkAddAnalytes').qtip('destroy');
$("#hdfAnalyteValues").val('');
}
}
});
}
function BuildOptionSucceed(response) {
var listItems = [];
for (var i = 0; i < response.length; i++) {
listItems.push('<option value="' + response[i].Value + '">' + response[i].Text + '</option>');
}
$("#lbAnalyteMatches").append(listItems.join(''));
}
function AddAnalyte() {
var analyteId = $("#hdfAnalyteValues").val();
var analyteIds = analyteId.split(',');
var anlyteIdDup = "1";
$("#lbAnalyteMatches option:selected").each(function() {
analyteId = (analyteId == "") ? this.value : analyteId + "," + this.value;
$("#hdfAnalyteValues").val(analyteId);
anlyteIdDup = GetUniqueId(this.value);
$("#lbSelectedAnalytes").append('<option value="' + this.value + '-' + anlyteIdDup + '">' + this.text + '</option>');
});
$('select[id$=lbAnalyteMatches] option:selected').attr('selected', false);
}
createAnalyteForm は、ユーザーがページ上のボタンをクリックすると呼び出されます。これにより、qTip を起動してモーダルを作成する BuildAnalyteForm メソッドを呼び出すよりもフォームが作成されます。ユーザーが「txtAnalytesTypeAhead」TextBox に入力すると、検体が「lbAnalyteMatches」ボックスに入力されます。AJAX で呼び出された分析物はキャッシュされ、非常に迅速に返されます。これは遅延ではなく、ListBox は FF にすばやく取り込まれます。また、ユーザーが「lbAnalyteMatches」ListBox 内の分析物をクリックすると、「lbSelectedAnalytes」ListBox に入力するときに同じ種類の遅延が発生します。AddAnalyte() 関数は、ユーザーが「lbSelectedAnalytes」ListBox をクリックすると呼び出されます。