function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Dhananjay Patil 12Dhananjay Patil 12 

how to pass Javascript Variable Name to the Controller Class

Hi--I have a requirement where I have to create custom button that unchecks the checkbox value if the checkbox is already checked.
Somehow I am able to check the checkbox value to false by click on custom button.but the biggest showstooper that I am facing in my requirement is we have 5 tabs & if I click on  any one of the tabs then I have to caputure the ID or the name of the tab that i clicked on it.
I have write the following code;


​For Button:
{!REQUIRESCRIPT("/soap/ajax/25.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/25.0/apex.js")}
sforce.connection.sessionId = '{!$Api.Session_ID}';
var Result = sforce.apex.execute("OutcomeController","checkboxFalse", {opportunityId: "{!Opportunity.Id}"});
alert('Result:'+Result);
if(Result=='false'){
window.location.reload();
}


 
Controller Class:
 
global with sharing class OutcomeController {
    public string myStage{get; set;}
    ......................
 
  public Map<String, List<VerifiableOutcome__c>> OutcomesByStage {
        get {
            if (OutcomesByStage == null) {
                OutcomesByStage = new Map<String, List<Outcome__c>>();
            }
            return OutcomesByStage;
        }
        private set;
    }

 
    public void StageNme()
    {
        system.debug('myStage:'+myStage);
    }
 
 
   
        webservice static boolean checkboxFalse(Id opportunityId)
    {
    Opportunity currentOpportunity = OpportunityServices.getOpportunity(opportunityId);
      Outcome__c voi1= VerifiableOutcome__c.getValues('Solution Implemented');  
     Outcome__c voi2= VerifiableOutcome__c.getValues('Schedule Created');     
      system.debug('voi1 stage NAme:'+voi1.StageName__c);
       system.debug('voi2 stage NAme:'+voi2.StageName__c);
  
          
                //system.debug('vo name:'+vo);
                if (currentOpportunity.get(voi1.FieldName__c) == true && voi1.StageName__c=='Implement') {
                currentOpportunity.SolutionImplemented__c=false;
                update currentOpportunity;  
                }
                if(currentOpportunity.get(voi2.FieldName__c) == true && voi2.StageName__c=='Cause')
                {
                currentOpportunity.ScheduleCreated__c=false;
                update currentOpportunity; 
                }
                else{
                    return true;
                }
               
                return false;
       
    }
}


VF Page:
 
<apex:page docType="html-5.0" standardController="Opportunity" extensions="OutcomeController" showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
<html>
<head>
<script>
var j$ = jQuery.noConflict();

j$(function() {

  
    j$('.voCheckbox').click(function() {
        j$('[id$=":selectedVerifiableOutcomeIdInput"]').val(j$(this).data("outcome"));
        j$('[id$=":currentStageInput"]').val(j$(this).data("stage"));
        completeVOActionJSCheck();
       
    });     
    // get tab container
    var container = document.getElementById("tabcontainer");
    var tabcon = document.getElementById("tabscontent");
    var navitem = document.getElementById("tabheader_{!SUBSTITUTE(currentStage,' ','')}");
  
    if (navitem != null) {
        //store which tab we are on
        var ident = navitem.id.split("_")[1];
        navitem.parentNode.setAttribute("data-current",ident);
       //set current tab with class of activetabheader
        navitem.setAttribute("class","active");
       
    }
    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
    console.log('tabdata8:'+tabs);
    for (var i = 0; i < tabs.length; i++) {
    tabs[i].onclick=displayPage;
    console.log('tabdata9:'+tabs[0]);
   
    }
    // show active panel
  
    var curTab = document.getElementById("tabpage_{!SUBSTITUTE(currentStage,' ','')}");
    console.log('tabdata10:'+curTab);
    if (curTab != null) {
        curTab.style.display='block';
    }
});

// on click of one of tabs
function displayPage() {
   
    var current = this.parentNode.getAttribute("data-current");
    console.log('current tab name'+current);
    if (current != null) {
        //remove class of activetabheader and hide old contents
        document.getElementById("tabheader_" + current).removeAttribute("class");
        document.getElementById("tabpage_" + current).style.display="none";
    }
    ident = this.id.split("_")[1];
    console.log('ident:'+ident);
   
    //add class of activetabheader to new active tab and show contents
    this.setAttribute("class","active");
    document.getElementById("tabpage_" + ident).style.display="block";
    this.parentNode.setAttribute("data-current",ident);
}

 /*function dosomejavascript()
 { // set up my param to pass to action function
 var myParam = 'abc';
 //call my action function - myParam variable should be set to 'somevariable' in my controller
 StageNme(myParam);
 console.log('myParam Name:'+myParam);
 }*/
 

</script>

</head>

<body>

<!-- variables -->
<apex:variable value="{!Opportunity.Tender__c}" var="oppTender" />
<apex:variable value="{!Opportunity.AccountId}" var="oppAccId" />

<apex:form id="mainForm">

<apex:actionFunction action="{!completeVOActionKP}" name="completeVOActionJSKP" />
<apex:actionFunction action="{!completeVOActionDoc}" name="completeVOActionJSDoc" />
<apex:actionFunction action="{!completeVOActionCheck}" name="completeVOActionJSCheck" />
<apex:actionFunction action="{!StageNme}" name="StageNme"  rerender="">
<apex:param name="v" value="" assignTo="{!myStage}" />
</apex:actionFunction>


<apex:inputHidden value="{!selectedVerifiableOutcomeId}" id="selectedOutcomeIdInput" />
<apex:inputHidden value="{!currentStage}" id="currentStageInput" />

<!-- Error window -->
<apex:outputPanel rendered="{!isError}">
    <div class="modal" id="errorMessage" tabindex="-1" role="dialog" aria-labelledby="errorMessageModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Error</h4>
                </div>
                <div class="modal-body">
                    <p>{!errorMessage}</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        j$('#errorMessage').modal('show');
    </script>
</apex:outputPanel>

<apex:outputPanel rendered="{!doParentReload && !isError}" layout="none">
    <script>
        // Go back to the opportunity detail page
        if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
            // Salesforce1 navigation
            //sforce.one.navigateToSObject(aId);
        }
        else {
            // Set the window's parent URL using a Visualforce expression
            window.top.location.href = '/{!Opportunity.Id}';
        }
    </script>
</apex:outputPanel>

<apex:outputPanel id="allTabs" layout="block">

    <!-- Steps -->
    <div id="tabcontainer">
        <div id="tabs">
            <ul class="stackedProgress">
            <apex:repeat value="{!stageNames}" var="stage">
                <li id="tabheader_{!SUBSTITUTE(stage,' ','')}" >
                    <div class="content">
                        <div class="ico">
                            <i class="{!verifiableOutcomesUI[stage].Icon__c} icon"></i>
                                <apex:outputPanel layout="none" rendered="{!stageCompletedOutcomes[stage] == true}">
                                    <i class="fa fa-check green secondaryIcon"></i>
                                </apex:outputPanel>
                                <apex:outputPanel layout="none" rendered="{!stageInWarningOutcomes[stage] == true}">
                                    <i class="fa fa-exclamation-triangle orange secondaryIcon"></i>
                                </apex:outputPanel>
                        </div>
                        <div class="stepText">
                            <span style="float:left; margin-right:5px;">
                                <apex:outputPanel layout="none" rendered="{!stageCompletedOutcomes[stage] == true}">
                                    <i class="fa fa-check green"></i>
                                </apex:outputPanel>
                                <apex:outputPanel layout="none" rendered="{!stageInWarningOutcomes[stage] == true}">
                                    <i class="fa fa-exclamation-triangle orange"></i>
                                </apex:outputPanel>
                            </span>
                            <strong style="overflow: hidden;">{!stage}</strong>
                            <div class="descr"><apex:outputText value="{!OutcomesUI[stage].Description__c}" /></div>
                        </div>
                    </div>
                </li>
            </apex:repeat>
            </ul>
        </div>

        <div id="tabscontent">

        <apex:repeat value="{!stageNames}" var="stage">
            <div class="tabpage" id="tabpage_{!SUBSTITUTE(stage,' ','')}" data-style="tab">

                <div class="leftCol">

                <h4 class="secondaryTitle">
                    <apex:outputPanel layout="none" rendered="{!stageCompletedOutcomes[stage] == true}">
                        <i class="fa fa-check green"></i>
                    </apex:outputPanel>
                    <apex:outputPanel layout="none" rendered="{!stageInWarningOutcomes[stage] == true}">
                        <i class="fa fa-exclamation-triangle orange"></i>
                    </apex:outputPanel>
                    {!stage}
                </h4>

                <h4>{!$Label.VO_Expected_Milestone_Completion_Date}:<span style="white-space: pre"> </span>
                    <span style="white-space: nowrap">
                    <apex:outputText value="{0,date,dd MMM YYYY}">
                        <apex:param value="{!currentOpportunity[stageToEndDate[stage]]}" />
                    </apex:outputText>
                    </span>
                </h4>

                <!-- <p class="secondaryDescription"><apex:outputText value="{!verifiableOutcomesUI[stage].Description__c}" /></p> -->

                <apex:repeat var="outcome" value="{!OutcomesByStage[stage]}">

                    <!-- INFO BLOCK -->
                    <apex:outputPanel layout="block" rendered="{!outcome.Type__c == 'CLASSIFICATION'}">
                        <p>
                            <label class="outcome-name">{!outcome.Name}:</label>
                            <apex:outputPanel layout="none" rendered="{!currentOpportunity[outcome.FieldName__c] == true}">
                                <i class="fa fa-check green"></i>
                            </apex:outputPanel>
                            <apex:outputPanel layout="none" rendered="{!currentOpportunity[outcome.FieldName__c] == false}">
                                <i class="fa fa-times red"></i>
                            </apex:outputPanel>
                        </p>
                    </apex:outputPanel>

            
                    <!-- CHECKBOX BLOCK -->
                    <apex:outputPanel layout="block" rendered="{!outcome.Type__c == 'CHECKBOX'}">
                        <p>
                            <label class="outcome-name">{!outcome.Name}:</label>
                            <apex:outputPanel layout="none" rendered="{!currentOpportunity[outcome.FieldName__c] == true}">
                                <i class="fa fa-check green"></i>
                            </apex:outputPanel>
                            <apex:outputPanel layout="none" rendered="{!currentOpportunity[outcome.FieldName__c] == false}">
                               
                                <apex:outputPanel rendered="{!isEditAllowed}" layout="none">
                                    <input type="checkbox" class="voCheckbox" data-outcome="{!outcome.Id}" data-stage="{!stage}" style="vertical-align: middle" />
                                </apex:outputPanel>
                                <apex:outputPanel rendered="{!!isEditAllowed}" layout="none">
                                    <input type="checkbox" style="vertical-align: middle" disabled="true" />
                                </apex:outputPanel>

                            </apex:outputPanel>
                        </p>
                    </apex:outputPanel>

                </apex:repeat>

            </div>

            <div class="rightCol">
                <apex:outputText escape="false" value="{!$Label[verifiableOutcomesUI[stage].HelpLabel__c]}" rendered="{!oppTender=false}" />
                <apex:outputText escape="false" value="{!$Label[verifiableOutcomesUI[stage].HelpLabelTender__c]}" rendered="{!oppTender=true}" />
            </div>

            </div>
        </apex:repeat>
        </div>
    </div>
</apex:outputPanel>
</apex:form>

</body>
</html>
</apex:page>


if u have referred the VF code,there is a function called as 'Display Page' inwhich there is a variable called as 'Ident' that gives me the exact value of the tabs that i clicked and I must pass the Variable 'Ident' value to the controller class which i am trying to pass by using following syntax
 
<apex:actionFunction action="{!StageNme}" name="StageNme"  rerender="">
<apex:param name="v" value="Ident" assignTo="{!myStage}" />
</apex:actionFunction>



whatever the Stage Value I get in the Ident variable I have to pass the value and assign to the  Variable 'myStage' of the controller but I am not able to pass it out not sure why??
Can somebody please help me how can i pass the variable value to the controller class so that I can use it in my If() of Weservice method?
because right now the problem that I am facing while unchecking the checkbox is I am not able uncheck the exact checkbox of the current tab,it randomly executes the condition and randomly uncheck the checkbox and this is true because I am not able to pass the value of click event in my controller class.

Your Help is really appreciate for me to fix this issue.
 
Ajay Nagar 7Ajay Nagar 7
To pass Javascript Variable Name to the Controller Class : You can bind the string variable in class with hidden field on page and set the value of that hiden field (any Javascript Variable Name) using jquery on any event.