You need to sign in to do that
Don't have an account?

How to pass output label id to javascript function.
Hi All ,
Please suggest me with the below scenerio.
I have created a vf page , which displays selected products from another vf page . I have used <apex:outputLabel> component to display the selected products names in this page . Based on clicking a certain product from this list , I want to display some xyz output text .
The problem I am facing is :
I am not able to select a particular product out of the many .
Currently , I am using 'onclick' event on output label , which calls the javascript , which as a result calls the action function , and based on true/false value on the action function method , the "xyz" output text is displayed for all the products , irrelevant to the one I am clicking . What my requirement is : the "xyz" output text should only be displayed for the products which I am selecting out of the many.
I am pasting my current code :
VF Page :
<apex:page controller="productSelectController" sidebar="false">
<script type="text/javascript">
function expandDetails(){
alert('test');
<!--var a = document.getElementById('{!$Component.tex1}').value;-->
details();
}
</script>
<apex:form >
<apex:pageBlock >
<apex:outputPanel >
<apex:pageBlockSection title="test" />
<apex:pageBlockTable value="{!selectedProduct}" var="sp">
<apex:column >
<apex:outputLabel value="{!sp.name}" onclick="expandDetails();return true;" id="tex1">
<apex:pageBlock >
<apex:outputPanel id="second" >
<apex:pageBlock rendered="{!IF(proDetails,true,false)}">
<apex:outputText >xyz</apex:outputText>
</apex:pageBlock>
</apex:outputPanel>
</apex:pageBlock>
</apex:outputLabel>
</apex:column>
</apex:pageBlockTable>
</apex:outputPanel>
</apex:pageBlock>
<apex:actionFunction name="details" action="{!expandDetailsAction}" reRender="second" oncomplete="alert('After Apex Method');">
</apex:actionFunction>
</apex:form>
</apex:page>
Controller:
public with sharing class productSelectController {
//public Boolean offPB{get;set;}
//public String searchString{get;set;}
//public Filter thisProduct{get;set;}
//public String oppVar;
//public Opportunity oppId{get;set;}
public list<wrapClass> wrpList=new list<wrapClass>();
//public list<PriceBookEntry>listPE;
public wrapClass wrp ;
//public String par{get;set;}
public list<Product2> selectedProduct{get;set;}
public Boolean proDetails= false;
public String second;
public list<Product2> chooseProduct{get;set;}
public productSelectController ()
{
//thisProduct=new Filter();
}
//////PLEASE NEGLECT THIS PART////// (This controller is shared by 2 pages , this part is for the 1st page)
/*public void Search() {
wrpList.clear();
oppVar=apexPages.currentPage().getParameters().get('oppId');
system.debug('aaaaaaaaa'+oppVar);
String searchLT = '%' + searchString +'%';
system.debug('bbbbbbbb'+searchLT );
oppId=[Select Id, Pricebook2Id,Pricebook2.Name From Opportunity Where Id =: oppVar];
system.debug('ccccccc'+oppId);
if(!offPB){
string strQuery='Select Product2Id,Product2.Name,Product2.Business_Unit__c,Product2.Family from PricebookEntry where Pricebook2Id =\''+oppId.Pricebook2Id+'\' ';
system.debug('dddddddddd'+strQuery);
if(searchString != null && searchString.trim() != ''){
strQuery += 'AND Product2.Name LIKE : searchLT ';
system.debug('eeeeeeeee'+strQuery );
listPE=[select Product2Id,Product2.Name,Product2.Business_Unit__c,Product2.Family from PricebookEntry where Pricebook2Id =:oppId.Pricebook2Id AND Product2.Name LIKE :searchLT AND IsActive = true];
listPE.sort();
system.debug('ffffffff'+listPE);
}
else {
String str_Family;
String str_BU;
if(thisProduct.prdFlter.Business_Unit__c != null && thisProduct.prdFlter.Business_Unit__c != '' )
{
str_BU = '%'+ thisProduct.prdFlter.Business_Unit__c + '%';
system.debug('qqqqqq'+str_BU);
strQuery += 'AND Product2.Business_Unit__c LIKE : str_BU';
system.debug('zzzzzzzz'+strQuery );
}
if(thisProduct.prdFlter.Family != null && thisProduct.prdFlter.Family !='')
{
str_Family = '%' + thisProduct.prdFlter.Family + '%';
system.debug('zzzzzzzz'+str_Family);
strQuery += ' AND Product2.Family LIKE : str_Family';
system.debug('zzzzzzzz'+strQuery );
}
listPE=database.query(strQuery );
system.debug('vvvvvvvvv'+listPE);
}
for(PriceBookEntry pbe : listPE)
{
wrp = new wrapClass(pbe.Product2);
system.debug('xxxxxx'+wrp);
wrpList.add(wrp );
}
system.debug('bbbbbbbbbbbb'+wrpList);
}else{
searchString = '';
string strQuery='Select Product2Id,Product2.Name,Product2.Business_Unit__c,Product2.Family from PricebookEntry where Pricebook2Id != \''+oppId.Pricebook2Id+'\' ';
system.debug('********'+strQuery);
if(searchString != null && searchString.trim() != ''){
strQuery += 'AND Product2.Name LIKE : searchLT ';
system.debug('+++++++++++++'+strQuery);
listPE=[select Product2Id,Product2.Name,Product2.Business_Unit__c,Product2.Family from PricebookEntry where Pricebook2Id !=:oppId.Pricebook2Id AND Product2.Name LIKE :searchLT AND IsActive = true];
system.debug('==========='+listPE);
listPE.sort();
}
else {
String str_Family;
String str_BU;
if(thisProduct.prdFlter.Business_Unit__c != null && thisProduct.prdFlter.Business_Unit__c != '' )
{
str_BU = '%'+ thisProduct.prdFlter.Business_Unit__c + '%';
system.debug('qqqqqq'+str_BU);
strQuery += 'AND Product2.Business_Unit__c LIKE : str_BU';
system.debug('zzzzzzzz'+strQuery );
}
if(thisProduct.prdFlter.Family != null && thisProduct.prdFlter.Family !='')
{
str_Family = '%' + thisProduct.prdFlter.Family + '%';
system.debug('zzzzzzzz'+str_Family);
strQuery += ' AND Product2.Family LIKE : str_Family';
system.debug('zzzzzzzz'+strQuery );
}
listPE=database.query(strQuery );
system.debug('vvvvvvvvv'+listPE);
}
for(PriceBookEntry pbe : listPE)
{
wrp = new wrapClass(pbe.Product2);
system.debug('xxxxxx'+wrp);
wrpList.add(wrp );
}
}
}
*//
/This is the "Next " button on page 1 , based on which , selected products are displayed on the 2nd page.
public PageReference Next() {
selectedProduct = new list<Product2>();
for(wrapClass wc : wrpList)
{
if(wc.chkProduct == true)
{
selectedProduct.add(wc.pbeVar);
system.debug('aaaaaa'+selectedProduct);
}
}
return Page.productDetails;
}
// This is the method to display the output text ////
public void expandDetailsAction()
{
if(!proDetails)
proDetails = true;
else
proDetails = false;
system.debug('eeeessss'+proDetails );
}
///////////// PLEASE NEGLECT THIS PART ///////// This is related to the first page.
/*public String offProducts()
{
if(!offPB)
offPB=true;
else
offPB=false;
return null;
}
public class Filter
{
public Product2 prdFlter{get;set;}
public Filter(){
prdFlter=new Product2();
}
}
*/
public class wrapClass
{
public boolean chkProduct{get;set;}
public Product2 pbeVar{get;set;}
public wrapClass(Product2 p)
{
pbeVar= p;
chkProduct = false;
}
}
public list<wrapClass> getWrpList() {
return wrpList;
}
public list<Product2> getSelectedProduct()
{
return selectedProduct;
}
public Boolean getProDetails()
{
System.debug('999999999'+proDetails );
return proDetails;
}
public void setProDetails(boolean b)
{
this.proDetails = b;
System.debug('mmmmmmmmmmmm'+proDetails );
}
public String getSecond() {
return second;
}
}
Please help!!
Thanks in Advance.
Hi Kamatchi ,
Here is the other page:
<apex:page controller="productSelectController" sidebar="false" tabStyle="Opportunity">
<apex:sectionHeader title="" subtitle="Product Selection"/>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:panelGrid columns="5" >
<apex:panelGrid columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel value="By Keyword" style="font-weight: bold"></apex:outputLabel>
<apex:inputText value="{!searchString}" style="width : 50%"/>
</apex:pageBlockSectionItem>
</apex:panelGrid>
<apex:panelGrid columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel value="{!$ObjectType.Product2.Fields.Business_Unit__c.Label}" style="font-weight: bold"></apex:outputLabel>
<apex:inputField value="{!thisProduct.prdFlter.Business_Unit__c}"/>
</apex:pageBlockSectionItem>
</apex:panelGrid>
<apex:panelGrid columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel value="{!$ObjectType.Product2.Fields.Family.Label}" style="font-weight: bold"></apex:outputLabel>
<apex:inputField value="{!thisProduct.prdFlter.Family}"/>
</apex:pageBlockSectionItem>
</apex:panelGrid>
</apex:panelGrid>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:actionFunction name="method1" action="{!offProducts}"/>
<apex:commandButton action="{!Search}" value="Search"/>
<apex:commandButton action="{!Next}" value="Next"/>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:inputCheckbox label="Off PriceBook" value="{!offPB}" />
</apex:pageBlockSection>
<apex:pageBlockTable value="{!wrpList}" var="wrp" rendered="{!IF(offPB,false,true)}">
<apex:column >
<apex:inputCheckbox value="{!wrp.chkProduct}" styleclass="checkbox"/>
</apex:column>
<apex:column >
<apex:outputText value="{!wrp.pbeVar.Name}"></apex:outputText>
</apex:column>
</apex:pageBlockTable>
<apex:pageBlockTable value="{!wrpList}" var="wrp" rendered="{!IF(offPB,true,false)}">
<apex:column >
<apex:inputCheckbox value="{!wrp.chkProduct}" styleclass="checkbox"/>
<apex:param value="{!wrp.chkProduct}" assignTo="{!par}" name="p"/>
</apex:column>
<apex:column >
<apex:outputText value="{!wrp.pbeVar.Name}"></apex:outputText>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>