+ Start a Discussion
ArpiArpi 

Scroll the page to the outputPanel from commandlink

Hello,

 

I have a visualforce page with partial code below. I want to scroll my page to the outputpanel position when the user clicks the commandLink. I tried using onclick event and setting the focus but it didnt work.

 

<apex:commandLink reRender="questiondetail">
{!section.Section_Label__c}
<apex:param name="sectionId" value="{!section.id}"/>
</apex:commandLink>

--

---

 

<apex:outputPanel id="questiondetail" >

---

</apex:outputPanel>

 

 

Please guide.

thanks

ArpiArpi

Hi Sureka,

 

I tried this solution but it doesn't scroll ,on the click of <commandLink> below I want the output to scroll to outpanel id ie questiondetail. I am also rerendeing on commandLink click to this id. Please see my code below

 

 

<apex:page showHeader="false" sidebar="false" standardController="Main_questionaire__c" extensions="QuestionnaireFields" id="thePage" recordSetVar="sitem" action="{!sectionStatus}">

<script language="JavaScript" type="text/javascript">

function focu(){
var e = document.getElementById('{!$Component.templateForm.questiondetail}');//alert(e);
e.focus();
}
</script>
<apex:form id="templateForm">
<br></br>

<apex:pageBlock >
<apex:pageBlockSection id="sectionBlock" title="{!templateName}" columns="1">

<apex:repeat value="{!sectionsStatusLists}" var="section">

<apex:commandLink reRender="questiondetail" onclick="focu()">
<h3>{!section.Section_Template__r.Section_Label__c}
</h3>
<apex:param name="sectionId" value="{!section.Section_Template__r.id}"/>
</apex:commandLink>
</apex:repeat>
</apex:pageBlockSection>
</apex:pageBlock>


<apex:outputPanel id="questiondetail" >
<apex:pageBlock >
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Save" action="{!Save}" oncomplete="saveDone();"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/>
</apex:pageBlockButtons>
<apex:repeat value="{!questionsList}" var="question" >
<apex:pageBlockSection columns="1" rendered="{!question.newquestFormat.Question_Type__c=='Text'}" >
<apex:outputPanel rendered="{!NOT(ISNULL(question.newquestFormat.HelpText__c))}"><b>Q.{!qnum} {!question.newquestFormat.Question_Label__c}</b>
</apex:outputPanel>
<!-- some other data here-->
</apex:pageBlockSection><br></br>


</apex:repeat>
</apex:pageBlock>
</apex:outputPanel>

</apex:form>
</apex:page>

 

 

Any help would be graetly appreciated.

 

Thanks

Arpi