0

I am trying to set the focus on my visualforce page input field. I've tried using:

jQuery(document).ready( function() { 
var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}");
 jQuery(myElement).focus();  

I've also tried as suggested here set Focus on Visualforce Page :

var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}");
window.addEventListener("load", function() {
setTimeout(function() {
    document.querySelector(myElement).focus();
}, 100);  // 0.1 seconds after load time.
);

However neither seem to be working. I'm probably missing something simple? Below is my page:

<apex:page standardController="Task" extensions="SaveAndReturnTaskExtension" tabStyle="Account" id="caretask">
<apex:form id="form" >
    <apex:outputPanel id="op">
        <apex:pageBlock id = "pb" >
            <apex:pagemessages />
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!saveAndReturn}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>                
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="pbs1" columns="2" title="Task Information">
                <apex:inputField id="owner" value="{!Task.OwnerId}" /> 
                <apex:inputField value="{!Task.WhatId}" /> 
                <apex:inputField id="subject" value="{!Task.Subject}" />
                <apex:inputField value="{!Task.WhoId}"/>                         
                <apex:repeat value="{!$ObjectType.Task.FieldSets.CARETaskInformation}"  var="f">
                <apex:inputField value="{!Task[f]}" required="{!OR(f.required, f.dbrequired)}"/>
                </apex:repeat>
                <apex:outputText />
                <apex:inputField value="{!Task.CallDisposition__c}"> 
                <apex:actionSupport event="onchange" rerender="t1" />
                </apex:inputField>
                <apex:inputField value="{!Task.Description}" style="width: 600px; height: 200px" /> 
                <apex:inputField value="{!Task.LiveCallVMEmailColdReason__c}" rendered="{!IF( Task.CallDisposition__c == 'Live Call/VM/Email (Cold)', true, false )}" >
                </apex:inputField>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Appointment">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Appointment}"  var="apt">
                <apex:inputField value="{!Task[apt]}" required="{!OR(apt.required, apt.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Additional Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.AdditionalInformation}"  var="add">
                <apex:inputField value="{!Task[add]}" required="{!OR(add.required, add.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="From Template">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.FromTemplate}"  var="tem">
                <apex:inputField value="{!Task[tem]}" required="{!OR(tem.required, tem.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Other Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.OtherInformation}"  var="oi">
                <apex:inputField value="{!Task[oi]}" required="{!OR(oi.required, oi.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="System Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.SystemInformation}"  var="si">
                <apex:outputField value="{!Task[si]}" />
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Dial Source Info">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.DialSourceInfo}"  var="dsi">
                <apex:inputField value="{!Task[dsi]}" required="{!OR(dsi.required, dsi.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Recurrence">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Recurrence}"  var="rec">
                <apex:inputField value="{!Task[rec]}" required="{!OR(rec.required, rec.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Reminder">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Reminder}"  var="rem">
                <apex:inputField value="{!Task[rem]}" required="{!OR(rem.required, rem.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock> 
    </apex:outputPanel>
</apex:form>  
<script>
 jQuery(document).ready( function() { 
 var myElement = document.getElementById("{!$Component.caretask.form.pb.subject}");
 jQuery(myElement).focus(); 
</script >

  • what part of your code is not working exactly? what does your browser console say? any debugging info? errors? – glls Sep 14 '17 at 20:05
  • No errors, jut the field focus is staying on the first input field rather than highlighting the subject field. – Starley Flynn Sep 14 '17 at 20:06
  • 1
    did you try removing the focus from the first field before setting focus() on the later? – glls Sep 14 '17 at 20:08
  • 1
    When you inspect the rendered HTML in the browser (view source), what does this line from your markup look like? var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}"); does it render as var myElement = document.getElementById(""); ? – Mark Pond Sep 15 '17 at 4:41
1

I created a simple fiddle HERE that should outline a very simple way to do this. you don't need anything really special just because it is a visual force component, just be sure that you have the id set and be sure that of course no others are similar

| improve this answer | |
1

Just use and ends with selector

jQuery("[id$=subject]").focus();

Much easier to select that way as long as you are careful no other ids end with subject

| improve this answer | |
1

Have you tried just using "{!$Component.subject}"?

Also you could add an extra data- attribute on the element and query for that instead (it doesn't have to be "role", it can be anything):

<apex:inputField id="subject" value="{!Task.Subject}" html-data-role="subject" />

Then to find it with jQuery:

var myElement = jQuery('[data-role=subject]');
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.