All geek questions in one place

AsyncFileUpload has a logical error in AjaxControlToolkit when the component is on a different tab, therefore it is not displayed

I am using the new version of AjaxControlToolkit and I found a logical error, but I am trying to find the best way to fix this, by Saturday, so that the program works on IE.

This problem has only an error in IE, it works on Firefox3.5.

I have an AsyncFileUpload component in a tab that does not appear to be visible when this function is executed, so the offset width is zero.

The problem is the file AsyncFileUpload.pre.js, the function _app_onload, and this line: this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";

I do not want to compile it from the source, but this may be the best option, so I can fix the error.

But this will probably be my fix: this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";

But I do not know if there is a better solution.

I could just write a new prototype function in my javascript class and just fix a logical error that is better than recompiling. If I fix this in the code, then whenever I do an update, I will need to continue replacing this line until it is fixed in the code base.

But I'm trying to figure out if there is a way for the element to know that it has just become visible, since at any time you need to know the actual width of the element, then you cannot adjust it until it is displayed. I can’t think of a way to find out, so what I usually do is fix items on a tab the first time I select a tab, but for a shared library, which is not a possible solution.

Location of the main question

, , , , , , , . < - ,

:

                   <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 .

+3
4

scriptmanager

LoadScriptsBeforeUI = "true"

, , attr scriptmanager, !!

, http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

+3

, :

  • CssClass ajaxToolkit:AsyncFileUpload "imageUploaderField"

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

: http://ajaxcontroltoolkit.codeplex.com/workitem/27429

+1

This is not an ideal solution, but it really works, I hope someone will have a better solution, because this is something that I can not imagine in order to fix the error. I added this to the javascript file, but this is a hack, not a good solution. I had to replace the second function due to the line I commented out.

$(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);
        });
    }
0
source

My solution ... maybe not the best, but it works.

 _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
                });
            }
        }
    }
},

have a fork in http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix

0
source

Source: https://habr.com/ru/post/1729507/

More articles:


All Articles