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

    JavaScript Error When Uploading in IE

    kruez

      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
          nbelaevski

          Hello,

          What is RF version?

          • 2. Re: JavaScript Error When Uploading in IE
            kruez

            3.3.0

            • 3. Re: JavaScript Error When Uploading in IE
              jbuechel

              I'm facing exactly the same problem.

              Did you get it working somehow?

              • 4. Re: JavaScript Error When Uploading in IE
                nbelaevski

                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
                  jbuechel

                  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

                    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
                      jbuechel

                      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?



                      • 8. Re: JavaScript Error When Uploading in IE
                        ilya_shaikovsky