4 Replies Latest reply on Jun 19, 2009 5:53 AM by Nick Belaevski

    Problems with RichFaces and JavaScript

    leandro godoy Apprentice

      Hello, I am using a library to crop images, but when the import libraries with <a4j:loadScript src="/view/mootools-for-crop.js" />
      <a4j:loadScript src="/view/UvumiCrop.js" />
      my file upload to work and the following errors in Firebug:

      his._each is not a function
      eachSlice()(function(), undefined)3_3_1.GA...cript.jsf (linha 31)
      implement()()mootools...r-crop.js (linha 9)
      $each([Object], function(), undefined)mootools...r-crop.js (linha 18)
      chain()()mootools...r-crop.js (linha 98)
      set()()mootools...r-crop.js (linha 275)
      mootools-for-crop.js()()mootools...r-crop.js (linha 274)
      [Break on this error] return before+String.interpret(ctx);});}...x++);});}catch(e){if(e!=$break)throw e;}
      3_3_1.GA...cript.jsf (linha 31)
      Element.hide is not a function
      onclick()()FileUpload.js.jsf (linha 35)
      processButtons()()FileUpload.js.jsf (linha 32)
      cancelUpload()("j_id_jsp_786965064_1:upload", "j_id_jsp_786965064_1", "/Crop/view/usuario.jsf", function(), function(), "j_id_jsp_786965064_1:j_id3", Object ADD=Object ADD_CONTENT=Object UPDATE=Object, null, 5, Object, false, Object bmp=true jpg=true png=true gif=true, Object autoclear=false autoUpload=false noDuplicate=false, Object progress=uploading stop=<b>Stop</b>, null, "86BD3956D2287A601DD4730827ACCBF9")FileUpload.js.jsf (linha 12)
      klass()3_3_1.GA...cript.jsf (linha 4)
      usuario.jsf()()usuario.jsf (linha 119)
      [Break on this error] return s;},disableCleanButton:function()...turn;}else{Element.show(d1.parentNode);}
      




      removing the <a4j: loadScript everything works normally, there is a way to overcome this problem and use the library of crop? javascript to use the library and this:
      http://tools.uvumi.com/crop.html, and already used in other projects that used only jsp and worked perfectly.
      Thank you.

        • 2. Re: Problems with RichFaces and JavaScript
          Nick Belaevski Master

          Hi,

          Looks like a conflict with Prototype JavaScript library. What JS files are included on the page?

          • 3. Re: Problems with RichFaces and JavaScript
            leandro godoy Apprentice

            I am including the files are:
            <a4j:loadScript src="js/mootools-for-crop.js" />
            <a4j:loadScript src="js/UvumiCrop.js" />
            These files are from a library to crop the image following the link on the library:
            http://tools.uvumi.com/crop.html.
            Is there a way around this problem?
            My JSF page

            
            <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
            <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
            <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
            <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
            <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
            
            <html>
            <head>
            <link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-crop.css"/>
            
             <script type="text/javascript" >
             new uvumiCropper('myImage',{
            onComplete:function(top,left,width,height){
            $('input_top').set('value', top);
            $('input_left').set('value', left);
            $('input_width').set('value', width);
            $('input_height').set('value', height);
            },
            preview:true,
            coordinatesOpacity:1
            });
            
            window.addEvent('domready',function(){
            $('myForm').addEvent('submit',function(event){
            event.stop();
            myCropper.cropSave();
            });
            });
            </script>
            
            
            
            </head>
            
            <body>
            <f:view>
            
            
             <style>
            .top {
             vertical-align: top;
            }
            
            .info {
             height: 202px;
             overflow: auto;
            }
            </style>
            
             <a4j:form id="myForm">
             <a4j:loadScript src="/js/mootools-for-crop.js" />
             <a4j:loadScript src="/js/UvumiCrop.js" />
             <h:panelGrid columns="2" columnClasses="top,top"
             style=" width : 830px;height : 630px;">
             <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}"
             maxFilesQuantity="#{fileUploadBean.uploadsAvailable}" id="upload"
             immediateUpload="#{fileUploadBean.autoUpload}"
             acceptedTypes="jpg, gif, png, bmp"
             allowFlash="#{fileUploadBean.useFlash}">
             <a4j:support event="onuploadcomplete" reRender="info" />
             </rich:fileUpload>
             <h:panelGroup id="info">
             <rich:panel bodyClass="info" style=" width : 800px; height : 400px;">
             <f:facet name="header">
             <h:outputText value="Uploaded Files Info" />
             </f:facet>
             <h:outputText value="No files currently uploaded"
             rendered="#{fileUploadBean.size==0}" />
             <rich:dataGrid columns="1" value="#{fileUploadBean.files}"
             var="file" rowKeyVar="row" style=" width : 750px;height : 550px;">
             <rich:panel bodyClass="rich-laguna-panel-no-header"
             style=" width : 700px;height : 500px;">
            
             <a4j:mediaOutput element="img" mimeType="#{file.mime}"
             createContent="#{fileUploadBean.paint}" value="#{row}"
             style="width:400px; height:300px;" cacheable="false" id="m">
             <f:param value="#{fileUploadBean.timeStamp}" name="time" />
             </a4j:mediaOutput>
             <h:graphicImage value="/css/b.jpg" id="myImage"></h:graphicImage>
            
             </rich:panel>
             </rich:dataGrid>
             </rich:panel>
             <rich:spacer height="3" />
             <br />
             <a4j:commandButton action="#{fileUploadBean.clearUploadData}"
             reRender="info, upload" value="Limpar"
             rendered="#{fileUploadBean.size>0}" />
             <a4j:commandButton value="Recortar"></a4j:commandButton>
             </h:panelGroup>
             </h:panelGrid>
             <h:inputHidden id="input_top"></h:inputHidden>
             <h:inputHidden id="input_left"></h:inputHidden>
             <h:inputHidden id="input_width"></h:inputHidden>
             <h:inputHidden id="input_height"></h:inputHidden>
            
            
            
             </a4j:form>
            
            </f:view>
            </body>
            </html>
            
            


            • 4. Re: Problems with RichFaces and JavaScript
              Nick Belaevski Master

              rich:fileUpload uses Prototype JS library, that's likely to conflict with MooTools. To clarify this finally, remove all rich:* components from the page and load Prototype script explicitly using a4j:loadScript.