AsyncFileUpload在AjaxControlToolkit中有逻辑错误,当组件在不同的选项卡中时,因此不显示

时间:2010-01-22 02:44:08

标签: javascript ajaxcontroltoolkit

我正在使用11月版的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类中编写一个新的原型函数,并修复逻辑错误,这比重新编译要好。如果我在代码中修复它,那么每当我进行更新时,我都需要继续替换该行,直到它在代码库中得到修复。

但是,我试图找出一个元素是否有办法知道它刚刚变得可见,因为任何时候你需要知道一个元素的实际宽度然后你不能真正设置它它显示。我想不出有办法知道这一点,所以我倾向于在第一次选择选项卡时修复选项卡上的元素,但是,对于不是可能的解决方案的通用库。

主要问题的位置

所以,在我发送有关此问题的错误报告之前,我很好奇是否是一种更好的方法,而不是在加载页面时完成它,并假设最小宽度那可能是错的。 < - 问题在这里

我使用以下代码创建元素:

                   <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是否有用,但我相信我希望在实际加载脚本之前完成UI。

我觉得有趣的是,当dom树完成时,我设置的宽度实际上并未设置。

4 个答案:

答案 0 :(得分:3)

尝试将此属性添加到您的scriptmanager

LoadScriptsBeforeUI =“true”

我已经下载了源代码并修复了代码行,但它仍然无法正常工作, 然后我将这个attr添加到scriptmanager,它可以工作!!

如果您想更改源代码,请查看此页面以获取详细信息 http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

答案 1 :(得分:1)

这是对我有用的解决方案:

  1. ajaxToolkit:AsyncFileUpload上应用CssClass,例如“imageUploaderField”

  2. 写Css .imageUploaderField input{width:100%!important;}

  3. 来源:http://ajaxcontroltoolkit.codeplex.com/workitem/27429

答案 2 :(得分:0)

这不是理想的解决方案,但它确实有效,希望有人会有更好的解决方案,因为这是我无法提交修复错误的内容。我把它添加到我的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);
        });
    }

答案 3 :(得分:0)

我的解决方案......可能不是最好的但是有效。

 _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