Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ThathulaThathula 

Use javascript in <apex:repeat>

Hi all .

I've used <apex:repeat> and following structure is iterated :
Please provide the the model of printer field and Please specify field

In below image when i select Other for 'Please provide the model of printer' only i should display please specific Text box.
But  since this block created dynamically i can not use javascript. How can i handle this situation??

note that i've used  pageblocksection between please specific Text box.


This image is not available because: You don’t have the privileges to see it, or it has been removed from the system


Please help me.


Best Answer chosen by Thathula
CheyneCheyne
Well, if Salesforce is automatically adding unique IDs, then maybe it will work. It looks like you'e misspelled style. Could that be the problem?

All Answers

ThathulaThathula
User-added image
CheyneCheyne
Can you post the Visualforce markup/javascript that you have so far?
ThathulaThathula
function changeScannersModel(obj){
var value=obj.value;
var repeatId=0;
hideArea='mainPage:mainForm:pageBlock3:pageBlockSection5:scanner1Section:scannerList:'+repeatId+':scannerPageBlockSection:scannerModelsOther';

if(value=='Other'){

document.getElementById(hideArea).stlye.display='block';

}
else{

document.getElementById(hideArea).stlye.display='none';
}

}

This is the function i used,  for var repeateid i can extract the value from current field and assign to hideara.. Before extract the valuei just hardcoded 0 (which is existing) 
But we can not hide an area in this way.. 

Please help me 
CheyneCheyne
It would be helpful if you could post the Visualforce markup as well.

One thing to note is that, if you are using <apex> tags, you need to use the {!$Component} global merge field to reference an element's ID. If your markup looks like this

<apex:outputPanel id="panel">
  <apex:outputText id="text">Some text</apex:outputText>
</apex:outputPanel>

Then you would reference the apex:outputText element in javascript like this

document.getElementById("{!$Component.panel.text}");
ThathulaThathula
Hi ,THANKS FOR YOUR quick reply.. This is my VF 

There are several pageblocks and i have this code in a middle of such a pageBlock. 

please help me Thanks a lot

<div id="scannersDiv">
     <apex:variable value="2" var="num"/>
        <apex:repeat value="{!Scanner_List}" var="scanner" id="scannerList">
       
        <apex:pageBlockSection id="scannerPageBlockSection" title="Scanner {!num}" columns="1" collapsible="false">
         <apex:variable var="num" value="{!VALUE(num) + 1}"/>
        <apex:inputField id="scannerModel" onclick="changeScannersModel(this)" value="{!scanner.Model_of_Scanner__c}" label="Please provide the model of scanner:"/>
       
        <apex:pageblockSection id="scannerModelsOther">
      <apex:inputField value="{!scanner.Specify_Model__c}" label="Please Specify:"/>
      </apex:pageblockSection>
       </apex:pageBlockSection>
      
      
        </apex:repeat> 
       
        </div>
CheyneCheyne
First off, the ID of your input field should be unique. Since you are rendering multiple inputs in a loop, they will not be unique when there is more than one scanner (since the ID of each one will be "scannerModel"). Maybe you should make scannerModel a class instead, and then add the scanner ID as a custom attribute: <apex:inputField styleClass="scannerModel" html-scannerId="{!scanner.Id}"...>. Same issue with the scannerPageBlockSection. I would just add the scanner ID to the end of that one: <apex:pageBlockSection id="scannerPageBlockSection-{!scanner.Id}"...>.

Next, I would try adding an ID attribute to the Specify Model inputField, so that your javascript can get at it: <apex:inputField id="{!scanner.Id}".../>. Then, your javascript can look something like this

function changeScannersModel(obj){
  var scannerId = obj.getAttribute("scannerId");
  var scannerModel=obj.value;
  var repeatId=0;
  hideArea='{!$Component.mainPage.mainForm.pageBlock3.pageBlockSection5.scanner1Section.scannerList.scannerPageBlockSection-'+scannerId+'.'+scannerId;

  if(scannerModel=='Other'){
    document.getElementById(hideArea).style.display='block';
  }
  else{
    document.getElementById(hideArea).style.display='none';
  }
}

Putting your Visualforce together, you'll have something like this

<div id="scannersDiv">
      <apex:repeat value="{!Scanner_List}" var="scanner" id="scannerList">
      
      <apex:pageBlockSection id="scannerPageBlockSection-{!scanner.Id}" title="Scanner {!num}" columns="1" collapsible="false">
        <apex:inputField styleClass="scannerModel" html-scannerId="{!scanner.Id}" onclick="changeScannersModel(this)" value="{!scanner.Model_of_Scanner__c}" label="Please provide the model of scanner:"/>
      
        <apex:pageblockSection id="scannerModelsOther-{!scanner.Id}">
          <apex:inputField id="{!scanner.Id}" value="{!scanner.Specify_Model__c}" label="Please Specify:"/>
        </apex:pageblockSection>
      </apex:pageBlockSection>
    </apex:repeat>  
</div>
ThathulaThathula
Thanks a lot for your reply.. I'll try your way and let you know thanks a lot :) (y)
ThathulaThathula
<apex:pageblockSection id="scannerModelsOther-{!scanner.Id}"> I GET an error saying 
Error: Literal value is required for attribute id in <apex:pageblockSection>
CheyneCheyne
Can you try removing the pageblocksections inside of the apex:repeat tag? Since you can't use a merge field as an id, you'll have to remvoe the id from other model inputField as well, but you should just be able to use the javascript nextSibling property, like this

if(scannerModel=='Other'){
    this.nextSibling.style.display='block';
  }
  else{
    this.nextSibling.style.display='none';
  }
ThathulaThathula
I tried nextSibling but it does not work for me :(
CheyneCheyne
What does not work? What is it doing? Are you getting any errors in the javascript console?
ThathulaThathula
When iteration happens SF makes unique ids for all inputs by adding 0,1,2 ..
But i can not hide the sectionwith that logic. 

Thathula
function changeScannersModel(obj){
var value=obj.value;
var repeatId=0;
hideArea='mainPage:mainForm:pageBlock3:pageBlockSection5:scanner1Section:scannerList:'+repeatId+':scannerPageBlockSection:scannerModelsOther';

if(value=='Other'){

document.getElementById(hideArea).stlye.display='block';

}
else{

document.getElementById(hideArea).stlye.display='none';
}

}

Have i done any wrong somewhere???
CheyneCheyne
Well, if Salesforce is automatically adding unique IDs, then maybe it will work. It looks like you'e misspelled style. Could that be the problem?
This was selected as the best answer