function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

focus() don't work

In my pageBlockTable, when the "Quantity" is changed, it would be a action and reRender this table,

when the table is rerenderd, the focus in this table would be lost, so i'm trying to re-focus the last element.

here is my code:

<apex:page controller="Mycontroller">
<script type="text/javascript">
   var elementFocus = null;
   function setFocus(){
       elementFocus = document.activeElement;
   }
   function retainFocus(){
       elementFocus.focus();
   }
</script>
 <apex:form >
   <apex:pageBlock>
      <apex:pageBlockTable value="{!wrappers}" var="wrapper" id="wtable">
         <apex:column headerValue="Quantity">
             <apex:inputField value="{!wrapper.sub.Quantity__c}" id="Quantity__c">
                 <apex:actionSupport event="onchange" action="{!doSomething}"

                     <!-- before take action, set current focus. oncomplete, retain that focus -->
                     onbeforedomupdate="return setFocus()" rerender="wtable" oncomplete="return retainFocus()">
                 </apex:actionSupport>
             </apex:inputField>
         </apex:column>
         <apex:column headerValue="SalesPrice">
            <apex:inputField value="{!wrapper.sub.SalesPrice__c}" id="SalesPrice__c"/>
         </apex:column>
      </apex:pageBlockTable>
   </apex:pageBlock>
 </apex:form>
</apex:page>

 i use javascript to retain focus, and the alert also shows the right id, but elementFocus.focus(); just don't work.

should i include some other script?

<script type="text/javascript">
   var elementFocus = null;
   function setFocus(){
       elementFocus = document.activeElement;
       alert(elementFocus.id);
   }
   function retainFocus(){
       alert(elementFocus.id); //when debug, it shows the same value as the id in setFocus()
       elementFocus.focus();
   }
</script>

 Any help would be much appreciated!

Best Answer chosen by Admin (Salesforce Developers) 
Maros SitkoMaros Sitko
Probably after reRender it is not the same DOM element, so you should work with id, or styleClasses (i recomand jquery and set focus on qunatity. Or second option:
function retainFocus(){
document.getElementById("{$Component.Quantity__c}").focus();
}

All Answers

Maros SitkoMaros Sitko
Probably after reRender it is not the same DOM element, so you should work with id, or styleClasses (i recomand jquery and set focus on qunatity. Or second option:
function retainFocus(){
document.getElementById("{$Component.Quantity__c}").focus();
}
This was selected as the best answer
IceEngineIceEngine

yes, it's not the same DOM element, but id works. Thanks!

here is my code

<script type="text/javascript">
   var elementId = null;
   function setFocus(){
       elementId = document.activeElement.id;
   }
   function retainFocus(){
       document.getElementById(elementId).focus();
   }
</script>

 
NikiVankerkNikiVankerk

I'm trying to do the same thing - on change of a field in a pageblocktable should rerender the list but leave the focus there.  Can you show more of your page so I can see where you put the script block and how you are calling it from the action:support?  I tried to play with this but the retainFocus method is not keeping the elementId value.

 

Thanks.
IceEngineIceEngine

to @NikiVankerk :

i use two events to set and retain focus : onbeforedomupdate, oncomplete

hope that would help

 

<apex:inputField id="quantityid" value="{!item.Quantity__c}" onchange="doaction();">
</apex:inputField>

<apex:actionFunction name="doaction" action="{!doaction}" onbeforedomupdate="return setFocus()" rerender="list,messagesPanel" oncomplete="retainFocus()">
</apex:actionFunction>


<script type="text/javascript" import="true">
   var elementId = null;
   function setFocus(){
       elementId = document.activeElement.id;
   }
   function retainFocus(){
       document.getElementById(elementId).focus();
   }
</script>

 
NikiVankerkNikiVankerk

Thanks for the quick reply.  I tried that for my button that adds a new line into the table - it finds the right elementId values now but the table flickers and the new line is not showing.  In the log I can see it has been added to the list but does now show on the page.  I added rerender to both the commandbutton and the action:Function but no luck.

I'm going to stop for tonight as I have been working on this issue for too long toinght.  Thanks for the code snippet.  I'll let you know if I sort it out.
IceEngineIceEngine

to NikiVankerk :

i have done an editlist implement that require add and delete lineitems,

Bob Buzzard worte a good article about this

 http://bobbuzzard.blogspot.jp/2011_07_01_archive.html

 
Eric Clay!Eric Clay!
Great script! I added one little thing on the 'retainFocus' function:
  
function retainFocus(){
        document.getElementById(elementId).focus();
        document.getElementById(elementId).select();
    }

We have a list of line items that users can update the quantity or price and using jQuery and jsremote do a background update but the rerender was causing us to lose focus which was less than idea. So using this script we are able to let the user keep their place on the form and with the additional 'Select' can update the cell they've tabbed to that caused the update to fire.