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
AduttAdutt 

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.

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan
Can you provide the other vf page that is used to display the details of this vf page you have given?
AduttAdutt

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>