2

I have created a VF Tab in this tab have a custom button "Sign", when i click on the button it will show popup window and I get the signature from customer and save it as an attachment in Account.When I added this button in datatable it will not show a popup window.How can i show popup window

global with sharing class CustomerSignatureController 
{
public CustomerSignatureController()
{
}
@RemoteAction
global static List<Account> findAccounts(String name)
{
name = '%' + name + '%';
List<Account> accounts = [Select Id, Name from Account where Name like :name];
return accounts;
}
@RemoteAction
global static String saveSignature(String signatureBody, String parentId) 
{
try
{
system.debug('Record Id == ' + parentId);
system.debug(signatureBody);
Attachment a = new Attachment();
a.ParentId = parentId;
a.Body = EncodingUtil.base64Decode(signatureBody);
a.ContentType = 'image/png';
a.Name = 'Signature Capture.png';
insert a;
return '{success:true, attachId:' + a.Id + '}';
}catch(Exception e)
{
return JSON.serialize(e);
}
return null;
}
 //Popup Window display
    public boolean displayPopup {get; set;}     

    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }


}

<apex:page controller="CustomerSignatureController" showheader="false" sidebar="false" standardStylesheets="false">
<script>var $j = jQuery.noConflict();</script>

<style type="text/css">
#popup
{
    display:none;
    position: fixed;
    width:250px;
    height: 550px;
    top: 5%;
    left: 50%;
    margin-left:-155px;
    margin-top:-110px;
    border:5px solid red;
    background-color:#DEDFDE;
    padding:30px;
    z-index:102;
    font-family:Verdana;
    font-size:10pt;
    border-radius:10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    font-weight:bold;
    border-width: 2px;
            border-style: solid;
            z-index: 25;
            left: 50%;
            padding:10px;
            position: absolute;
            margin-left: -250px;
            top:100px;
}
#background{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 20;
        }

#content
{
    height:300px;
    width:250px;
    margin:100px;
}
#popupclose
{
    margin:35px 0 0 80px;
    width:50px;

}
</style>
<apex:form >

   <!-- <apex:commandButton value="Go"  action="{!showPopup}" rerender="tstpopup" />

<apex:outputPanel id="tstpopup"  >
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" > -->
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile132mincss,'styles.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jqueryjs)}"  />
<apex:includeScript value="{!URLFOR($Resource.jquerymobile132minjs)}"/>
<apex:includeScript value="{!$Resource.jqueryminjs}"/>
<input id="popuplink" type="Button" value="Go"/> 



<div id="popup">

<div data-role="page" id="signatureCaptureHome" style="over-flow:auto; width:100px; height:100px"> 
<div data-role="content" id="content">
<input id="accountNameId" type="text" name="accountName"/>
<input type="button" name="findAccountBtn" onclick="findAccounts();" value="Find Accounts"/>
<h1 id="recordSigId">Record Signature:</h1>
<canvas id="signatureCanvas" height="100px" width="150px"/>
 <input type="button" id="clear" value="Clear"/>
<input id="saveSigButton" type="button" name="SigCap" onclick="saveSignature();" value="Capture Signature"></input>
<input id="popupclose" type="Button" value="Close"/>   
 </div> 
</div> 
</div>



<!-- <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>

 </apex:outputPanel>
            </apex:outputPanel>-->
 </apex:form>          

<script>

    var canvas;
    var context;
    var drawingUtil;
    var isDrawing = false;
    var accountId = '';

function DrawingUtil() 
{
    isDrawing = false;
    canvas.addEventListener("touchstart",start,false);
    canvas.addEventListener("touchmove",draw,false);
    canvas.addEventListener("touchend",stop,false);
    context.strokeStyle = "#FFF";  
}

//Start Event for Signature Captuare on HTML5 Canvas
function start(event) 
{
    isDrawing = true;
    canvas = document.getElementById("signatureCanvas");
    context = canvas.getContext("2d");    
    context.strokeStyle = "rgba(155,0,0,0.5)";      
    context.beginPath();
     context.moveTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
}

//Event while someone is drawing to caputre the path while they draw....
function draw(event) {
    event.preventDefault();
    if(isDrawing) {     
        context.lineTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
        context.stroke();
    }
}


//Event when someone stops drawing their signature line
function stop(event) {
    if(isDrawing) {
        context.stroke();
        context.closePath();
        isDrawing = false;
    }
}

canvas = document.getElementById("signatureCanvas");
context = canvas.getContext("2d");
drawingUtil = new DrawingUtil(canvas);
function saveSignature()
{
var strDataURI = canvas.toDataURL();
    // alert(strDataURI);
    strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
//alert(strDataURI);
CustomerSignatureController.saveSignature(strDataURI,accountId,processResult);
}

function processResult(result)
{
alert(JSON.stringify(result));
}

function findAccounts()
{
var nameValue = document.getElementById("accountNameId").value;
CustomerSignatureController.findAccounts(nameValue, processSearchResult);
} 

function processSearchResult(result)
{
$j = jQuery.noConflict();
//$j("#accountList").html("");
$j.each(result, function(i, record) {accountId = record.Id; $j("#recordSigId").html("Record Signature: " + record.Name);});
$j("#recordSigId").trigger("update");
//$j("#accountList").trigger("update");
//alert(JSON.stringify(result));
}
//popup window
$(function(){

    $('#popuplink').click(function(){


        $('#popup').show("slow");

    });

     $('#popupclose').click(function(){

        var text=$('#saveSigButton').val();
        alert(text);
        $('#popup').hide("slow");

    });

});

// bind event handler to clear button
      document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }, false);
</script>


</apex:page>
  • What does it do? – Ray Dehler Aug 9 '16 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.