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

Problems with RichFaces and JavaScript

lgweb Jun 17, 2009 8:42 PM

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.

1. Re: Problems with RichFaces and JavaScript

lgweb Jun 18, 2009 6:44 AM (in response to lgweb)

Need a hint?
Actions
2. Re: Problems with RichFaces and JavaScript

nbelaevski Jun 18, 2009 2:07 PM (in response to lgweb)

Hi,

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

3. Re: Problems with RichFaces and JavaScript

lgweb Jun 18, 2009 7:15 PM (in response to lgweb)

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

nbelaevski Jun 19, 2009 5:53 AM (in response to lgweb)

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

Go to original post