AsyncFileUpload a une erreur de logique dans AjaxControlToolkit, quand le composant dans un onglet différent, donc pas affiché

Question

J'utilise la version Nov de AjaxControlToolkit, et j'ai trouvé une erreur de logique, mais j'essaie de trouver la meilleure façon de résoudre ce problème. , d'ici samedi, afin que le programme fonctionne sur IE.

Ce problème a seulement une erreur sur IE, il fonctionne sur Firefox3.5.

J'ai un composant AsyncFileUpload sur un onglet qui semble ne pas être visible lorsque cette fonction s'exécute, et donc la largeur du décalage est zéro.

Le problème est dans le fichier AsyncFileUpload.pre.js, en fonction _app_onload, et cette ligne: this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";

Je ne veux pas le compiler à partir de la source, mais cela peut finir par être ma meilleure option, donc je peut corriger l'erreur.

Mais, cela va probablement être mon fix: this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";

Mais, je ne sais pas s'il y a une meilleure solution.

Je pourrais juste écrire une nouvelle fonction de prototype dans ma classe de javascript et corriger juste l'erreur de logique, qui est meilleure que la recompilation. Si je le répare dans le code, chaque fois que je ferai une mise à jour, je devrai continuer à remplacer cette ligne, jusqu'à ce qu'elle soit corrigée dans la base de code. Mais, j'essaie de comprendre si un élément peut savoir qu'il est devenu visible, car à chaque fois que vous avez besoin de connaître la largeur réelle d'un élément, vous ne pouvez pas vraiment le configurer. jusqu'à ce qu'il soit affiché. Je ne peux pas penser à un moyen de le savoir, donc ce que j'ai tendance à faire est de corriger les éléments sur l'onglet la première fois que l'onglet est sélectionné, mais, pour une bibliothèque générique qui n'est pas une solution possible.

Lieu de la question principale

Alors, avant de l'envoyer dans un rapport de bogue sur ce que je suis curieux de savoir s'il est une meilleure façon de le faire, plutôt que de l'avoir fait lorsque la page a été chargé, et en supposant une largeur minimale qui est probablement faux. < - Question situé ici

J'utilise le code de suivi pour créer l'élément:

    <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" /> 

Et si cela fait une différence que je me sers de ce que le ToolkitScriptManager semblait introduire d'autres erreurs, mais qui peuvent ont été mon erreur:

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

Je ne suis pas certain si LoadScriptsBeforeUI serait utile, mais je crois que je veux l'interface utilisateur fait avant que les scripts sont chargés en fait.

Je trouve intéressant que la largeur que je définis ne soit pas réellement définie lorsque l'arbre dom est terminé.

Answer 1

essayez d'ajouter cet attribut à votre ScriptManager

LoadScriptsBeforeUI = "true"

Je télécharger le code source et fixer la ligne de code, mais il ne fonctionne toujours pas, alors j'ajoute cet attr au scriptmanager, ça marche !!

vérifier cette page pour plus de détails si U voulez changer le code source http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

Answer 2

Ce n'est pas la solution idéale, mais cela fonctionne, j'espère que quelqu'un aura une meilleure solution, car c'est quelque chose que je ne peux pas soumettre pour corriger le bogue. J'ai ajouté ceci à un de mes fichiers javascript, mais c'est un hack, pas une bonne solution. J'ai dû remplacer la deuxième fonction à cause de la ligne que j'ai commentée.

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

Answer 3

Ma solution ... probablement pas le meilleur mais fonctionne.

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

ont bifurqué à http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix

Answer 4

Ceci est la solution qui a fonctionné pour moi:

1. Appliquer CssClass sur ajaxToolkit:AsyncFileUpload comme "imageUploaderField"

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

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