p:imageCropper doesn't work

shinzey · 02 Sep 2010, 11:15

Code:

<h:form>
    <p:imageCropper value="#{dataBean.croppedImage}" image="http://www.primefaces.org/showcase/ui/barca/campnou.jpg"/>
</h:form>

The image displays without cropping tool, and 3 errors are reported from Firebug's console:

Code: Select all

jQuery is not defined
[Break on this error] jQuery(document).ready(function(){jQue...on(){return this.requests.length==0}};
core.js (line 1)

PrimeFaces is not defined
[Break on this error] PrimeFaces.widget.ImageCropperUtils={a...lementById(d.hiddenFieldId).value=c}};
imagecropper.js (line 1)

PrimeFaces is not defined
[Break on this error] widget_j_idt9_j_idt10.on('moveEvent', ...denFieldId:"j_idt9:j_idt10_coords"});
imageC...r.xhtml (line 17)

From the generated HTML I can see jquery.js is not imported:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="/pfs/primefaces_resource/2.1/skins/sam/skin.css" /><link type="text/css" rel="stylesheet" href="/pfs/javax.faces.resource/style.css.xhtml?ln=css" />
<link rel="stylesheet" type="text/css" href="/pfs/primefaces_resource/2.1/yui/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="/pfs/primefaces_resource/2.1/yui/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="/pfs/primefaces_resource/2.1/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="/pfs/primefaces_resource/2.1/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="/pfs/primefaces_resource/2.1/yui/imagecropper/imagecropper-min.js"></script>
<script type="text/javascript" src="/pfs/primefaces_resource/2.1/primefaces/core/core.js"></script>
<script type="text/javascript" src="/pfs/primefaces_resource/2.1/primefaces/imagecropper/imagecropper.js"></script>
        <title>Image Cropper</title></head><body>

        <h1>Image Cropper</h1>
<form id="j_idt9" name="j_idt9" method="post" action="/pfs/primefaces/imageCropper.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt9" value="j_idt9" />
<script type="text/javascript">YAHOO.util.Event.addListener(window, 'load', function() {
widget_j_idt9_j_idt10 = new YAHOO.widget.ImageCropper('j_idt9:j_idt10_image');
widget_j_idt9_j_idt10.on('moveEvent', PrimeFaces.widget.ImageCropperUtils.attachedCroppedArea, {hiddenFieldId:"j_idt9:j_idt10_coords"});
});
</script><div id="j_idt9:j_idt10"><img id="j_idt9:j_idt10_image" src="http://www.primefaces.org/showcase/ui/barca/campnou.jpg" /><input type="hidden" id="j_idt9:j_idt10_coords" name="j_idt9:j_idt10_coords" value="" /></div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7847266364872200376:-2897026023824462246" autocomplete="off" />
</form></body>
</html>

02 Sep 2010, 11:52

I guess you haven't read the forum guideline; #5

http://primefaces.prime.com.tr/forum/vi ... f=3&t=1194

callahan · 02 Sep 2010, 12:04

It looks as if the imageCropper in 2.1 forgot about the resource jquery.js. In 2.2M1 it takes it into account. You can include it manually using something like this <p:resource name="/jquery/jquery.js" /> in <h:head>, or use another component on the page that does take it into account, for example p:growl.

02 Sep 2010, 12:16

2.2.M1 should work just fine yes, also it is a brand new imagecropper widget now compared to 2.1.

p:imageCropper doesn't work

Who is online