1

这个过程需要大量代码，但让我们看看我是否不能只给出我的问题的实质。首先，一切最终都会奏效，使用 IE 浏览器时填充 ListBox 会有延迟。没有抛出任何错误，但在发生任何事情之前有 5 秒的时间。

所需功能的描述：我使用 qTip2 上的 Jquery 添加创建了一个模式弹出窗口。此模式由 3 个主控件和两个按钮组成。这些控件是一个文本框，用户可以在其中键入一个单词，该单词将填充将填充第一个 ListBox 的所有对象。有两个列表框。第一个填充所有可用对象，第二个填充在用户单击第一个 ListBox 中的对象时。

这是我调用来构建模式弹出窗口的两个函数。当用户单击 LinkBut​​ton 时刚刚完成。

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。这会创建表单而不是调用 BuildAnalyteForm 方法，该方法会触发 qTip 以制作模式。当用户在“txtAnalytesTypeAhead”文本框中键入时，分析物应填充“lbAnalyteMatches”框。在 AJAX 中调用的分析物被缓存并很快返回。这不是延迟，并且 ListBox 会在 FF 中快速填充。此外，当用户单击“lbAnalyteMatches”列表框中的分析物时，填充“lbSelectedAnalytes”列表框时也会发生相同类型的延迟。当用户单击“lbSelectedAnalytes”列表框时调用 AddAnalyte() 函数。

4

0 回答 0