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.

August 19, 2016
·
Answer
·
Like
0
·
Follow
1

Ajay 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.

August 19, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

how to pass Javascript Variable Name to the Controller Class

You need to sign in to do that.