Unable to set focus on <apex:inputText> inside an ouput panel of visualforce page

Question

I am quite new to Visualforce and Apex. I am trying to set focus on the apex inputText field, placed inside an ouputpanel, which will be popped up based on an action function. I tried setting focus using javascript function but none works. Can anyone please help me on this?

Visualforce code:

<apex:outputlabel onclick="fnUpdateName('{!ID}','{!Name}');" style="font-weight:normal !important;" > Edit name </apex:outputlabel>
<apex:actionfunction name="actUpdateName" action="{!ShowPopup}" reRender="UpdateName">
                         <apex:param name="Id" value="" assignTo="{!Id}"/>
                         <apex:param name="Name" value="" assignTo="{!Name}"/>                                              
                      </apex:actionfunction>

output panel:

<apex:outputPanel id="UpdateName">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!update}"/> 
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!update}">
<apex:pageBlock id="updatePageBlock">
<div class="panel panel-default">     
<div class="panel-heading">        
<h4><b Style="color:#555">Edit Name</b></h4>
</div> 
<div class="panel-body">
<table class="tblPopUp">  
<tr>    
<td><font style="color:#337ab7">Name: &nbsp;&nbsp;</font></td>
<td> <apex:inputText id="newName" value="{!Name}" styleClass="inputField" onfocus="this.value = this.value;"  /></td> <br/> 
</tr>  
</table>
<br/><br/>
<apex:commandButton value="Update"  action="{!UpdateName}" Render="tblBlock"/>
<apex:commandButton value="Cancel"  action="{!ClosePopup}" />                                                     
</div> 
</div>
</apex:pageBlock> 
</apex:outputPanel> 
</apex:outputPanel>  

JS function:

function fnUpdateName(ID, Name)
{
    document.getElementById('{!$Component.frmid.DetBlock.tblBlock.popUpBlock.updatePageBlock.newName}').focus();
    actUpdateName(ID, Name);     
}

Also,I am getting the below Javascript error, whenever I use setFocus based on component ID, and class name.

Uncaught TypeError: Cannot read property 'focus' of null

Rendered DOM Id:

j_id0:frmid:DetBlock:tblBlock:popUpBlock:updatePageBlock:newName

Also please note, the above output label is located inside dynamically binded list tag.

Any help is really appreciated..!!

Answer 1

apex:actionFunction has an attribute called focus which is meant to specify the ID of the component that is in focus after the AJAX request completes, so you could probably use that with the $Component binding instead of doing it manually in JavaScript.

Oh and I just thought of a couple things that are probably the cause of the Uncaught TypeError:

1. the fully qualified $Component binding is a good call, but I notice that not all of your VF components have Ids to match it
2. even with the fully qualified bind expression, it will still produce an undefined result if the referenced component is not rendered at the time, which it won't be in your case. What you'll want to do here is change the rendered conditions on your popup panels into style conditions, which will set display: none; instead of de-rendering