I have a scrollable table with some account records. Once any record is edited and save button is clicked/rerenders the focus auto scrolls to top of the Scrollable Table. I am trying to set the focus to the last edited record's row instead of top of the scrollable table.
<apex:page sidebar="false" controller="Test" standardStylesheets="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" />
<style>
.table-container {
Width: 100.5%;
height: 400px;
border: 1px solid black;
margin: 10px auto;
background-color: #FFFFED;
position: relative; /* or absolute */
padding-top: 30px; /* matches height of header */
}
.table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
Width: auto;
}
.heading-bg {
background-color: #66C87D;
height: 30px; /* matches padding of table-container */
position: absolute;
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid black;
}
table {
width: auto;
}
.heading {
position: absolute;
top: 0;
font-weight: bold;
text-align: center;
}
</style>
<apex:form id="formId">
<apex:pageMessages id="msgId"/>
<apex:pageBlock Title="Accounts List" mode="inlineEdit" id="acc_list" >
<apex:pagemessages />
<apex:pageBlockButtons >
<apex:commandButton action="{!Edit}" id="editButton" value="Edit"/>
<apex:commandButton action="{!save}" id="saveButton" value="Save"/>
<apex:commandButton action="{!cancel}" onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
</apex:pageBlockButtons>
<!-- ***Detail Mode*** -->
<apex:outputpanel rendered="{!view}" id="view">
<apex:actionStatus id="loading" >
<apex:facet name="start" >
<center><img src="/img/loading32.gif" /> Loading.... Please Wait... </center>
</apex:facet>
</apex:actionStatus>
<div class="table-container">
<div class="heading-bg"></div><div class="table-container-inner">
<table id="schTable" >
<thead><tr><td><div class="heading" style="width: 60px;word-wrap:break-word;">Activity Date</div></td></tr></thead>
<tbody>
<apex:repeat value="{!lstaAccs}" var="a"><tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
<td><div style="width: 80px;word-wrap:break-word;">
<apex:outputField value="{!a.Acc.Due_Date__c}" title="Due Date">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField></div>
</td></tr></apex:repeat>
</tbody>
</table>
</div></div>
</apex:outputpanel>
</apex:pageBlock>
</apex:form>
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#toggleId").click(function(){
$("#detailTblId").toggle();
if($("#detailTblId").css('display')=='none'){
$('#linkTextId').html('Click here to show the Contact information in the Tabular form.');
}else{
$('#linkTextId').html('Click here to Hide.');
}
});
}); </script> </apex:page>