Задержка при заполнении JQuery созданного списка в IE 7, 8 или 9. ASP.NET 3.5 и MVC 2.0 - PullRequest
Новая
       16

Задержка при заполнении JQuery созданного списка в IE 7, 8 или 9. ASP.NET 3.5 и MVC 2.0

1 голос
/ 23 февраля 2012

Этот процесс влечет за собой много кода, но давайте посмотрим, не могу ли я просто дать суть моей проблемы. Сначала все в конечном итоге работает, просто происходит задержка заполнения ListBox при использовании браузера IE. Ошибка не выдается, но есть хорошие 5 секунд, прежде чем что-либо произойдет.

Описание желаемой функциональности: я создаю модальное всплывающее окно, используя Jquery add на qTip2. Этот модал состоит из 3 основных элементов управления и двух кнопок. Элементы управления представляют собой TextBox для пользователя, чтобы ввести слово, которое будет заполнять все объекты, которые будут заполнять первый ListBox. Есть два списка. Первый заполняет все доступные объекты, а второй заполняется, когда пользователь нажимает на объект в первом ListBox.

Вот две функции, которые я вызываю для создания модального всплывающего окна. Просто сделано, когда пользователь нажимает кнопку 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 вызывается, когда пользователь нажимает кнопку на странице. Это создает форму, а затем вызывает метод BuildAnalyteForm, который запускает qTip для создания модального стиля. Когда пользователь вводит текстовое поле «txtAnalytesTypeAhead», аналиты должны заполнить поле «lbAnalyteMatches». Аналиты, которые вызываются в AJAX, кэшируются и возвращаются очень быстро. Это не задержка, и ListBox быстро заполняется в FF. Также, когда пользователь щелкает аналит в ListBox «lbAnalyteMatches», такая же задержка происходит при заполнении ListBox «lbSelectedAnalytes». Функция AddAnalyte () вызывается, когда пользователь нажимает на ListBox «lbSelectedAnalytes».

...