Apex Code Development You need to sign in to do that
Don't have an account?
Ginger What am I doing wrong?
Dear Friends:
I am trying to invoke an apex method from javascript but some reason it's not. I must be doing bluder mistake which I could not figure out so I woule like request the member to review the below given code and let me know what am I doing wrong.
Thank you very much inadvance for your time.
VF Page:
<apex:page showheader="false" controller="CaptureSignature">
<head>
<link rel="stylesheet" href="{!URLFOR($Resource.jsSignature,'build/jquery.signaturepad.css')}" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="{!URLFOR($Resource.jsSignature, 'build/jquery.signaturepad.min.js')}"></script>
<script src="{!URLFOR($Resource.jsSignature, 'build/json2.min.js')}"></script>
</head>
<body>
<form method="post" class="sigPad" >
<apex:form >
<apex:actionFunction action="{!capSig}" name="capSignature"/>
<ul class="sigNav">
<li class="drawIt"><a href="#draw-it">Draw your signature</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<div class="sig sigWrapper">
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output" class="output"/>
</div>
<button name="submit" onClick="saveImg(output);">Submit</button>
</apex:form>
</form>
<script>
function saveImg()
{
var api = $('.sigPad').signaturePad();
var sigPad;
var sig = '';
if(api.validateForm())
{
sig = api.getSignatureImage();
alert('sig = ' + sig);
// document.getElementById('submit').innerHTML = sig;
}
capSignature();
return sig;
}
$(document).ready(function() {
sigPad = $('.sigPad').signaturePad({drawOnly:true});
});
</script>
</body>
</apex:page>
Controller:
public class CaptureSignature {
public string SignatureImage{get; set;}
public PageReference capSig() {
System.debug('**** SignatureImage:' + SignatureImage);
//create sample signature attachment image
Attachment newAttachment = new Attachment();
newAttachment.ParentId = 'TestSigCap';
String imageBody = SignatureImage.replaceAll('data:image/png;base64,', '');
newAttachment.body = Encodingutil.base64Decode(imageBody);
newAttachment.name = 'sampleSignature.png';
insert newAttachment;
return null;
}
}
Do you have any javascript errors when you click the button?
Also, have you tried adding some javascript alerts to see if you are getting to the point of executing the actionfunction?
No, I don't have any javascript errors.
Yes, I added an alert in script and it's getting there.
I think I may be doing something stupid, which I can't figure out.
Thanks
If the javascript executes but the method isn't called, the only other thing I can think of is an exception. Try adding an <apex:pagemessages/> component to the page.
It looks like something is weird for sure.
I added the <apex:pageMessages /> component and changed the controller class version still no luck.
Have you put some debug in the apex method itself to see what happens there? I.e. is it definitely that the method isn't getting called, or is the behaviour not what you are expecting?
For sure the method is not getting invoked it's because I have System.debug('**** SignatureImageFirst:' ) statement in my method and I don't see anything in debug logs.
Does your saveimage function get called correctly? In your onclick handler you have specified a parameter, but the function signature doesn't have one.
Put an alert in within action function as....
<apex:actionFunction.....>
<script>
alert('Action function called');
</script>
</apex:actionFunction>
Check whether the action function is being called or not if not then try putting the script in the apex form.and do specify the rerender attribute in actionfunction
Hi Samreet-
I tried your recommendation and noticed that the alert script is getting executed but not the action. When add the reRender attribute after moving the fuction into apex from the page layout is not showing up as it supposed to be.
Thanks
Ginger
Try adding action region tag around the action function to be called