+ Start a Discussion
Raghu Rao 12Raghu Rao 12 

Accessing Javascript variable from Visualforce page

Hi 
I have incorporated a Javascriipt Credit Card reader. I am able to read in the credit care information from the reader into Javascript variables. However I am not able to map these variable values and display them in Visualforce page.
Here is the visualforce page and the apex controller snippets:
Controller Code:
public String getJSStart(){return '<script>document.write(';}
public String getJSEnd(){return ')</script>';}
public PageReference sendCardData () {
    if (Apexpages.currentPage().getParameters().containsKey('firstName')){
        String fn=Apexpages.currentPage().getParameters().get('firstName');
        String ln=Apexpages.currentPage().getParameters().get('lastName');
        
        CCName= fn+' '+ln;
        System.Debug('CCName is ::' + CCName);
        
    }//firstName
    if (Apexpages.currentPage().getParameters().containsKey('account')){
        CCNum=Apexpages.currentPage().getParameters().get('account');
        System.Debug('CCNum is ::' + CCNum);
    }//account
    if (Apexpages.currentPage().getParameters().containsKey('expMonth')){
        selectedExpMnth=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expMonth'));
        System.Debug('selectedExpMnth is ::' + selectedExpMnth);
    }//expMonth
    if (Apexpages.currentPage().getParameters().containsKey('expYear')){
        selectedExpYr=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expYear'));
        System.Debug('selectedExpYr is ::' + selectedExpYr);
    }//expMonth
return null;
}//sendCardData

Visualforce Page:
<apex:pageBlockSection title="Enter CREDIT CARD INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}"></apex:pageBlockSection>
<apex:pageBlockSection title="Enter CHECK INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Check'),true,false)}"></apex:pageBlockSection>
<apex:actionFunction action="{!sendCardData}" name="CardInfo" rerender="CC">
  <apex:param name="firstName" value=""/>
  <apex:param name="lastName" value=""/>
  <apex:param name="account" value=""/>
  <apex:param name="expMonth" value=""/>
  <apex:param name="expYear" value=""/>
  <apex:param name="type" value=""/>  
</apex:actionFunction>
  
<apex:panelgrid id="CC" columns="4" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}">
 <!-- rendered="{IF(!selectedPT == 'CREDIT CARD', true, false)}" -->
      <apex:outputLabel style="font-weight:bold;" value="Name as in Credit Card"></apex:outputLabel>
       <apex:inputText value="{!CCName}" id="lastName"/>
       <!-- required="{!IF(CONTAINS(selectedPT,'CREDIT'),true,false)}" -->
      <apex:outputLabel style="font-weight:bold;" value="Card Number (16 Digits):"></apex:outputLabel>
       <apex:inputText value="{!CCNum}" id="CRNUM" maxlength="19"/>
       <apex:outputText value="{!JSStart}account{!JSEnd}" escape="false"/>
       
      <apex:outputLabel style="font-weight:bold;" value="Card Exp Month : "></apex:outputLabel>
      <apex:selectList value="{!selectedExpMnth}" id="expMonth" multiselect="false" size="1">
           <apex:selectOptions value="{!TmplCEM}"/>
          <!--   <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
      </apex:selectList> 
      <apex:outputLabel style="font-weight:bold;" value="Card Exp Year : "></apex:outputLabel>
     <apex:selectList value="{!selectedExpYr}" id="expYear" multiselect="false" size="1">
           <apex:selectOptions value="{!TmplCEYOptions}"/>
         <!--    <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
      </apex:selectList>    
     <apex:outputLabel style="font-weight:bold;" value="3 Digit Card CVC Code"></apex:outputLabel>
       <apex:inputText value="{!CCCVC}" maxlength="3"/>
 </apex:panelgrid> 
<script type="text/javascript">

        // Called by plugin on a successful scan.
        var complete = function (data) {

            // Is it a payment card?
            if (data.type == "generic")
                return;

            // Copy data fields to form
            //$("#firstName").val(data.firstName);
            //document.getElementById("lastName").value = data.firstName+" "+data.lastName;
            //$("#lastName").val(data.lastName);
            //$("#fullName").val(data.fullName);
            //$("#account").val(data.account);
            //$("#expMonth").val(data.expMonth);
            //$("#expYear").val(data.expYear);
            //$("#type").val(data.type);
            //var lastName=data.lastName;
            
            var firstName=data.firstName;
            var lastName=data.lastName;
            var account=data.account;
            var expMonth=data.expMonth;
            var expYear=data.expYear;
            var type=data.type;
            document.getElementById('{!$Component.thepage.theform.CC.CRNUM}').value = account;
            //document.write("You have entered credit card number:"+ account);
            
            //document.getElementById("expMonth").value = expMonth;
            
            //document.getElementById("expYear").value = expYear;
            
            function sendCardData(){
            CardInfo(firstName,lastName,account,expMonth,expYear,type);
            }
            

        };

        // Event handler for scanstart.cardswipe.
        var scanstart = function () {
            $("#overlay").fadeIn(200);
        };

        // Event handler for scanend.cardswipe.
        var scanend = function () {
            $("#overlay").fadeOut(200);
        };

        // Event handler for success.cardswipe.  Displays returned data in a dialog
        var success = function (event, data) {

            $("#properties").empty();

            // Iterate properties of parsed data
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var text = key + ': ' + data[key];
                    $("#properties").append('<div class="property">' + text + '</div>');
                }
            }


            $("#success").fadeIn().delay(3000).fadeOut();
        }

        var failure = function () {
            $("#failure").fadeIn().delay(1000).fadeOut();
        }

        // Initialize the plugin with default parser and callbacks.
        //
        // Set debug to true to watch the characters get captured and the state machine transitions
        // in the javascript console. This requires a browser that supports the console.log function.
        //
        // Set firstLineOnly to true to invoke the parser after scanning the first line. This will speed up the
        // time from the start of the scan to invoking your success callback.
        $.cardswipe({
            firstLineOnly: true,
            success: complete,
            parsers: ["visa", "amex", "mastercard", "discover", "generic"],
            debug: false
        });

        // Bind event listeners to the document
        $(document)
            .on("scanstart.cardswipe", scanstart)
            .on("scanend.cardswipe", scanend)
            .on("success.cardswipe", success)
            .on("failure.cardswipe", failure)
        ;
    </script>
</apex:page>
Raghu Rao 12Raghu Rao 12
AS you can see above I tried the Action function approach as well as another approach with JSStart and JSEnd public methods in the controller and trying to display in VF page. But apparently both these methods do not work and the VF Page does not refresh with these new JS variable values.
Will Javascript remoting help me in this case? Any input will be appreciated.