8 Replies Latest reply on May 6, 2009 5:51 AM by Ilya Shaikovsky

    JavaScript Error When Uploading in IE

    Tim Lawson Newbie

      Hi all,

      I'm trying to eliminate everything from the richfaces fileupload except the Add button but I've run into a problem in Internet Explorer 7. If you create a page using the code below, load it in your browser, and click the "Add Test..." button in IE7 it will give you a JavaScript error. This doesn't happen in Firefox or Safari, and if you changed the listWidth attribute to 122px IE no longer gives the error.

      Any ideas how I can fix this? Or is this something I have to wait for RichFaces to fix? Or maybe suggestions on a different way to go about eliminating everything except the Add button?

      Cheers!

      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html>
       <head>
       <style type="text/css">
       .hiddenButton {
       display: none;
       }
       </style>
       </head>
       <body>
       <f:view>
       <h:form>
       <rich:fileUpload
       addControlLabel="Add Test..."
       immediateUpload="true"
       listHeight="0px"
       listWidth="121px"
       stopButtonClass="hiddenButton"
       cleanButtonClass="hiddenButton"/>
       </h:form>
       </f:view>
       </body>
      </html>
      


        • 1. Re: JavaScript Error When Uploading in IE
          Nick Belaevski Master

          Hello,

          What is RF version?

          • 3. Re: JavaScript Error When Uploading in IE
            Jonas Buechel Novice

            I'm facing exactly the same problem.

            Did you get it working somehow?

            • 4. Re: JavaScript Error When Uploading in IE
              Nick Belaevski Master

              Hello,

              I couldn't reproduce the issue. Can you please post complete page code you are having problems with?

              • 5. Re: JavaScript Error When Uploading in IE
                Jonas Buechel Novice

                Sure. I simplyfied the page but it's still quite a bunch of code. Hopefully it helps.
                Richfaces: 3.3.0.GA
                Seam: 2.1.1.GA

                /modules/myportal/profile/uploadPicture.xhtml:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib"
                 xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich"
                 xmlns:a4j="http://richfaces.org/a4j" xmlns:c="http://java.sun.com/jstl/core">
                
                 <ui:param name="capoRenderTransformWidth"
                 value="#{pictureUtil.transformWidth(capoPictureData, capoPictureWidth, capoPictureHeight)}" />
                
                 <s:div id="uploadPictureContainer" style="text-align: center;">
                
                 <!-- Display picture -->
                 <s:div rendered="#{not empty capoPictureData and not pictureUploadAction.editPicture}"
                 style="position: relative; width: #{capoPictureWidth}px; height: #{capoPictureHeight}px;">
                
                 <s:graphicImage id="uploadPicture" value="#{capoPictureData}">
                 <s:transformImageSize rendered="#{capoRenderTransformWidth}" width="#{capoPictureWidth}"
                 maintainRatio="true" />
                 <s:transformImageSize rendered="#{!capoRenderTransformWidth}" height="#{capoPictureHeight}"
                 maintainRatio="true" />
                 </s:graphicImage>
                
                 <s:div id="uploadPictureControls" styleClass="portal-change-picture-controls">
                 <div><a4j:commandLink value="#{messages.controls_change_uploadPicture}"
                 action="#{pictureUploadAction.setEditPicture(true)}" reRender="uploadPictureContainer" /></div>
                 </s:div>
                
                 </s:div>
                
                 <s:div style="" rendered="#{empty capoPictureData or pictureUploadAction.editPicture}">
                 <h:outputText value="#{capoPictureUploadInfo}" />
                 </s:div>
                
                 <s:div rendered="#{empty capoPictureData or pictureUploadAction.editPicture}"
                 style="text-align: left;">
                 <rich:fileUpload uploadData="#{pictureUploadAction.uploadItems}"
                 fileUploadListener="#{pictureUploadAction.uploaded}" acceptedTypes="png, jpeg, jpg, gif"
                 listWidth="121px" listHeight="0px" addControlLabel="#{messages.controls_upload_uploadPicture}"
                 immediateUpload="true" autoclear="true">
                 <a4j:support event="onuploadcomplete" oncomplete="reRenderPictureContainer();" />
                 <f:param name="pictureType" value="#{capoPictureType}" />
                 </rich:fileUpload>
                 </s:div>
                
                 <s:div style="margin-top: 5px;"
                 rendered="#{not empty capoPictureData and pictureUploadAction.editPicture}">
                 <div><a4j:commandLink value="#{messages.controls_remove}"
                 action="#{pictureUploadAction.removePicture}" reRender="uploadPictureContainer" /></div>
                 <div style="margin-top: 3px;"><a4j:commandLink value="#{messages.controls_cancel}"
                 action="#{pictureUploadAction.setEditPicture(false)}" reRender="uploadPictureContainer" /></div>
                 </s:div>
                
                 <a4j:jsFunction name="reRenderPictureContainer" reRender="uploadPictureContainer" />
                 </s:div>
                
                </ui:composition>
                


                test.html (referenced page using test.seam):
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.org/rich"
                 xmlns:fwc="http://www.frox.com/jsf/froxwebcomponents" xmlns:a4j="http://richfaces.org/a4j">
                 <head>
                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                 <meta name="description" content="#{messages.metatag_description}" />
                 <meta name="keywords" content="#{messages.metatag_keywords}" />
                 <meta name="robots" content="index,follow" />
                 <title>
                 <ui:insert name="fwcPageTitle">#{fwcWindowTitle}</ui:insert>
                 </title>
                
                 <!-- Loads all required css using the FwcResource loader. Could be done through the
                 a4j:loadStyle, but then a change in the css file would require a AppServer restart.
                 <link href="#{facesContext.externalContext.request.contextPath}#{fwcResource.resourcePathWeb}#{theme.css}" rel="stylesheet" type="text/css" /> -->
                 <link href="#{facesContext.externalContext.request.contextPath}#{fwcResource.resourcePathWeb}/common/css/fwcComponents.css" rel="stylesheet" type="text/css" />
                
                 <link href="#{facesContext.externalContext.request.contextPath}/layout/reset-fonts-grids.css" type="text/css" rel="stylesheet" />
                 <link href="#{facesContext.externalContext.request.contextPath}/layout/custom.css" type="text/css" rel="stylesheet" />
                 <ui:insert name="fwcHead" />
                 </head>
                
                 <body>
                 <f:view contentType="text/html">
                
                 <ui:define name="fwcContent">
                
                 <a4j:form enctype="multipart/form-data">
                 <s:decorate template="/modules/myportal/profile/uploadPicture.xhtml">
                 <ui:param name="capoPictureData" value="#{memberHome.instance.personalData.profilePicture}" />
                 <ui:param name="capoPictureType" value="PROFILE_PICTURE" />
                 <ui:param name="capoPictureWidth" value="102" />
                 <ui:param name="capoPictureHeight" value="136" />
                 <ui:param name="capoPictureUploadInfo" value="#{messages.member_uploadPictureMember_text}" />
                 </s:decorate>
                 </a4j:form>
                
                 </ui:define>
                
                 </f:view>
                
                 </body>
                </html>
                


                • 6. Re: JavaScript Error When Uploading in IE
                  Mikhail Vitenkov Newbie

                  Reproducible under 3.3.0.GA - JS error appears in IE.
                  Under 3.3.1.CR2 - example, listed above, works fine.
                  jbuechel, try to use the latest RF snapshot. Let us know, if problem remains.

                  • 7. Re: JavaScript Error When Uploading in IE
                    Jonas Buechel Novice

                    Hi mvitenkov,

                    thanks for your quick response!

                    I tried 3.3.1.CR2 and snapshot 3.3.1-20090506.040410-81.
                    Unfortunately with both releases I still got the JS error...

                    I double-checked if the new richfaces jar files has been deployed correctly.

                    The IE version: 7.0.5730.11

                    IE8 (8.0.6001.18702) says as detailed error message:

                    Webpage error details
                    
                    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322)
                    Timestamp: Wed, 6 May 2009 09:15:29 UTC
                    
                    
                    Message: Invalid argument.
                    Line: 16
                    Char: 48
                    Code: 0
                    URI: http://192.168.81.215/a4j/g/3_3_1-SNAPSHOTorg/richfaces/renderkit/html/js/FileUpload.js
                    


                    Am I doing something wrong?