AsyncFileUpload имеет логическую ошибку в AjaxControlToolkit, когда компонент на другой вкладке, поэтому не отображается

Question

Я использую ноябрьскую версию AjaxControlToolkit и обнаружил логическую ошибку, но пытаюсь найти лучший способ исправить это к субботе, чтобы программа работала в IE.

Эта проблема имеет ошибку только в IE, она работает в Firefox3.5.

У меня есть компонент AsyncFileUpload на вкладке, который кажется невидимым при запуске этой функции, поэтому ширина смещения равна нулю.

Проблема в файле AsyncFileUpload.pre.js, в функции _app_onload и в этой строке: this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";

Я не хочу компилировать его из исходного кода, но это может оказаться моим лучшим вариантом, поэтому я могу исправить ошибку.

Но, возможно, это будет мое исправление: this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";

Но я не знаю, есть ли лучшее решение.

Я мог бы просто написать новую функцию-прототип в своем классе javascript и просто исправить логическую ошибку, которая лучше, чем перекомпиляция. Если я исправлю это в коде, то всякий раз, когда я делаю обновление, мне нужно будет продолжать заменять эту строку, пока она не будет исправлена ​​в кодовой базе.

Но я пытаюсь выяснить, есть ли у элемента способ узнать, что он только что стал видимым, так как в любое время вам нужно знать фактическую ширину элемента, тогда вы не сможете установить его до это отображается. Я не могу придумать, как это узнать, поэтому я стараюсь исправить элементы на вкладке при первом выборе вкладки, но для универсальной библиотеки это не является возможным решением.

Расположение основного вопроса

Итак, прежде чем отправлять отчет об ошибке по этому поводу, мне любопытно, есть ли лучший способ сделать это , а не делать это, когда страница загружена, и предполагая минимальную ширину это, вероятно, неправильно. <- Вопрос находится здесь </p>

Я использую следующий код для создания элемента:

                   <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
                        OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
                        OnClientUploadComplete="UploadComplete" 
                        CompleteBackColor="Lime" UploaderStyle="Modern" Width="400px"
                        ErrorBackColor="Red" ThrobberID="Throbber"  
                        onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
                        UploadingBackColor="#66CCFF" />

И если это имеет какое-то значение, я использую это, поскольку ToolkitScriptManager, казалось, вводил другие ошибки, но это могло быть моей ошибкой:

<ajax:AjaxScriptManager ID="scriptmanager1" runat="server" EnablePartialRendering="true" ></ajax:AjaxScriptManager>

Я не уверен, будет ли полезен LoadScriptsBeforeUI, но я считаю, что хочу, чтобы пользовательский интерфейс был выполнен до фактической загрузки скриптов.

Мне интересно, что ширина, которую я установил, фактически не устанавливается, когда дерево dom завершено.

Answer 1

попробуйте добавить этот атрибут в свой скрипт-менеджер

LoadScriptsBeforeUI = "true"

Я скачал исходный код и исправил кодовую строку, но она все еще не работает, затем я добавляю этот атрибут в менеджер сценариев, он работает !!

проверьте эту страницу для подробностей, если вы хотите изменить исходный код http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

Answer 2

Это решение, которое сработало для меня:

1. Применить CssClass к ajaxToolkit:AsyncFileUpload как "imageUploaderField"

2. Запись Css .imageUploaderField input{width:100%!important;}

Источник: http://ajaxcontroltoolkit.codeplex.com/workitem/27429

Answer 3

Мое решение ... возможно, не самое лучшее, но работает.

 _app_onload: function(sender, e) {
    this.setThrobber(false);
    if (this._inputFile != null) {
        if (this._onchange$delegate == null) {
            this._onchange$delegate = Function.createDelegate(this, this._onchange);
            $addHandlers(this._inputFile, {
                change: this._onchange$delegate
            });
        }
        if (Sys.Browser.agent == Sys.Browser.Firefox) {
            this._inputFile.size = 0;
            var width = this._inputFile.offsetWidth;
            this._inputFile.style.width = "";
            while (this._inputFile.offsetWidth < width) {
                this._inputFile.size++;
            }
        }
        if (this._innerTB != null) {
            this._inputFile.blur();
            var inputFile = this._inputFile;
            setTimeout(function() { inputFile.blur(); }, 0);
            if ((this._inputFile.offsetWidth - 107) >= 1) {
                this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
                this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
            }
            if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
                this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
                $addHandlers(this._inputFile, {
                    mouseup: this._onmouseup$delegate
                });
            }
        }
    }
},

разветвились на http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix

Answer 4

Это не идеальное решение, но оно работает, надеюсь, у кого-то найдется лучшее решение, поскольку я не могу представить это, чтобы исправить ошибку. Я добавил это в мой файл javascript, но это взлом, а не хорошее решение. Мне пришлось заменить вторую функцию из-за закомментированной строки.

$(document).ready(function() {
    Sys.Extended.UI.AsyncFileUpload.prototype._app_onload = function(sender, e) {
        this.setThrobber(false);
        if (this._inputFile != null) {
            if (this._onchange$delegate == null) {
                this._onchange$delegate = Function.createDelegate(this, this._onchange);
                $addHandlers(this._inputFile, {
                    change: this._onchange$delegate
                });
            }
            if (Sys.Browser.agent == Sys.Browser.Firefox) {
                this._inputFile.size = 0;
                var width = this._inputFile.offsetWidth;
                this._inputFile.style.width = "";
                while (this._inputFile.offsetWidth < width) {
                    this._inputFile.size++;
                }
            }
            if (this._innerTB != null) {
                this._inputFile.blur();
                var inputFile = this._inputFile;
                setTimeout(function() { inputFile.blur(); }, 0);
                this._innerTB.style.width = ((this._inputFile.offsetWidth == 0 ? 200 : this._inputFile.offsetWidth) - 107) + "px";
                this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
                if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
                    this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
                    $addHandlers(this._inputFile, {
                        mouseup: this._onmouseup$delegate
                    });
                }
            }
        }
    };

    Sys.UI.DomEvent.prototype._removeHandler = function (elements, eventName, handler) {
        Sys._queryAll(elements, function(element) {
            var browserHandler = null;
//            if ((typeof (element._events) !== 'object') || !element._events) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            var cache = element._events[eventName];
            if (!(cache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            for (var i = 0, l = cache.length; i < l; i++) {
                if (cache[i].handler === handler) {
                    browserHandler = cache[i].browserHandler;
                    break;
                }
            }
            if (typeof (browserHandler) !== 'function') throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            if (element.removeEventListener) {
                element.removeEventListener(eventName, browserHandler, false);
            }
            else if (element.detachEvent) {
                element.detachEvent('on' + eventName, browserHandler);
            }
            cache.splice(i, 1);
        });
    }