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

 

 

JohnSchultzJohnSchultz

If you just want the contents of the element that was clicked on you could do something like the following:

 

<script>
function expandDetails(el) {
  alert(el.innerHTML);
}
</script>

<apex:outputLabel value="{!sp.name}" onclick="expandDetails(this); return true;" id="tex1" />

 

AduttAdutt
No John ,its doesn't work...
Puja_mfsiPuja_mfsi

Hi,

you need to change some line of code :

 

<apex:outputLabel value="{!sp.name}" onclick="expandDetails('{!$Component.tex1}');return true;" id="tex1">

<!-- Send the Id parameter from the component. -->

 

And in java script :

<script type="text/javascript">
         function expandDetails( labelId ){
                alert(labelId); // u get the label Id 
                details();
         }
</script>

 

please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.

AduttAdutt
Hi Puja ,

I am not able to fetch the individual record id . By this way its only returning the id of the output panel , not that of the individual product record...
Puja_mfsiPuja_mfsi

Hi,
No,it gives the id of individual label.Please check it again.

u need to check in alert.

 

<script type="text/javascript">
function expandDetails( labelId ){
    alert(labelId); // u get the label Id
    var  val = document.getElementById(labelId).innerText; // this will give the value of outputLabel.
}
</script>


please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.

AduttAdutt

Yes Puja...it gives me the value of the outputlabel (i.e. the product's name) . But what i want is the sfdc id of the corresponding product name , instead of just the name. Is that possible??