1

I have a page that I use to search Entries in a Journal in our Salesforce Communities visualforce page. The system works just fine, except that I have been asked to make it search upon keyup. This was obviously easy, but presented a problem that I can't seem to figure out! If you type the text quickly, you can type whatever you want, but if there is even the slightest pause, the search happens and focus is lost from the input field. I kinda expected focus to be lost, but what I didn't anticipate, was not being able to use JS or apex:actionFunction to regain focus. I have tried JS to give focus upon load of the page, but it wont, I have tried creating a simple button that gives focus to the inputfield, but it wont. If you click on the input field, it will hold focus until the action is performed, but otherwise, it will not "take focus". Would you please look at my code and tell me where I'm going wrong?

The visualforce page:

<apex:page showHeader="false" standardStylesheets="false" controller="SOSLController" cache="false" action="{!soslLoad_method}" docType="html-5.0" applyHtmlTag="false">
<head>
<meta charset="utf-8"/>
<title>My Journal</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="generator" content="Webflow"/>
<link href="{!URLFOR($Resource.Webflow_CSS, 'css/normalize.css')}" rel="stylesheet"/>
<link href="{!URLFOR($Resource.Webflow_CSS, 'css/webflow.css')}" rel="stylesheet"/>
<link href="{!URLFOR($Resource.Webflow_CSS, 'css/eyes2cNoLinks.css')}" rel="stylesheet"/>


<script type="text/javascript" src="{!URLFOR($Resource.Webflow_JS, 'js/modernizr.js')}"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://s3.amazonaws.com/eyes2c/Images/favicon-32x32.png"/>
<link rel="apple-touch-icon" href="https://s3.amazonaws.com/eyes2c/Images/Eyes2CLogo.png"/>

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
    google: {
      families: ["Droid Serif:400,700","Roboto:300,regular,500","Roboto Slab:regular"]
    }
  });
</script>

</head>



<!--This is what I use to toggle through detailed and simple version of Table--> 
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="none")
which.style.display="block"
else
which.style.display="none"
}
</script>


<body  id="TheTop" class="BG">

<apex:form >

<!--The focus part of this does not work-->

<apex:actionFunction name="saveUpdates" focus="myAnchor" action="{!soslDemo_method}"/>

<script>
saveUpdates();
</script> 

<script>
function getfocus() {
document.getElementById("myAnchor").focus();
}
</script>

<!--I made this button to test the function, and it does not work-->

<input type="button" onclick="getfocus()" value="Get focus"/>


<!--This is the input field that loses focus-->

  <apex:inputText id="myAnchor" tabindex="1" styleClass="inputField"  onkeyup="saveUpdates()" value="{!searchStr}" />


<!--I have two of these for toggling between 
detailed and simple versions of table-->

<div id="but1" style="display: block" class="ck-button" onclick="javascript:hideshow(document.getElementById('but1')); javascript:hideshow(document.getElementById('but2')); javascript:hideshow(document.getElementById('adiv1')); javascript:hideshow(document.getElementById('adiv2'))"><label><input style="display: none" type="checkbox" value="1" onclick="javascript:hideshow(document.getElementById('but1')); javascript:hideshow(document.getElementById('but2')); javascript:hideshow(document.getElementById('adiv1')); javascript:hideshow(document.getElementById('adiv2'))">Browse</input></label>    </div>

<apex:actionStatus id="actStatusId">
            <apex:facet name="start" >
                <img src="/img/loading.gif"/>                    
            </apex:facet>
</apex:actionStatus>
</apex:form>

 <apex:outputPanel title="" id="error">
 <apex:pageMessages ></apex:pageMessages>
 </apex:outputPanel>

<div id="adiv1" style="display: block">
<apex:repeat value="{!entlist}" id="entr" var="ent" rendered="true">

<!--All of my table data Simple View-->

</apex:repeat>
</div>


<div id="adiv2" style="display: none">
<apex:repeat value="{!entlist}" id="entr1" var="ent" rendered="true">

<!--All of my table data for Detailed View-->

</apex:repeat>
</div>




<footer>


<script type="text/javascript">
function addLoadEvent(func) { 
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function setFocus() {
    document.getElementById('{!$Component.myAnchor}').focus();
}
addLoadEvent(setFocus);
</script>
</footer>


</body>
</apex:page>

My Controller

Public with sharing class SOSLController{
Public List<Journal_Entry__c> entList {get;set;}

Public String searchStr{get;set;}

Public void SOSLController(){
}
Public void soslLoad_method(){

        List<List <sObject>> searchList = [FIND 'All' IN ALL FIELDS RETURNING 
                                           Journal_Entry__c (Id,Name,Color__c,ShowTrueFalse__c,ShowTrueFalse2__c,Context__c,Entry_Series__c,SelfID__c,Related_to_Previous_Dream__c,Scene_One__c,Scene_Two__c,Self_Interp__c,CreatedDate,DateText__c,Submitted_for_Interp_Count__c,Classification__c,Created_Self_Interp__c,Haven__c,UserID__c 
                                                             WHERE UserID__c = :UserInfo.getUserId() ORDER BY CreatedDate Desc)];
            entList = ((List<Journal_Entry__c>)searchList[0]);

}

Public void soslDemo_method(){


    if(searchStr.length() < 2)
    {
        List<List <sObject>> searchList = [FIND 'All' IN ALL FIELDS RETURNING 
                                           Journal_Entry__c (Id,Name,Color__c,ShowTrueFalse__c,ShowTrueFalse2__c,Context__c,Entry_Series__c,SelfID__c,Related_to_Previous_Dream__c,Scene_One__c,Scene_Two__c,Self_Interp__c,CreatedDate,DateText__c,Submitted_for_Interp_Count__c,Classification__c,Created_Self_Interp__c,Haven__c,UserID__c 
                                                             WHERE UserID__c = :UserInfo.getUserId() ORDER BY CreatedDate Desc)];
            entList = ((List<Journal_Entry__c>)searchList[0]);

    } else {
        String searchStr1 = '*'+searchStr+'*';
        List<List <sObject>> searchList = [FIND :searchStr1 IN ALL FIELDS RETURNING 
                                           Journal_Entry__c (Id,Name,Color__c,ShowTrueFalse__c,ShowTrueFalse2__c,Context__c,Entry_Series__c,SelfID__c,Related_to_Previous_Dream__c,Scene_One__c,Scene_Two__c,Self_Interp__c,CreatedDate,DateText__c,Submitted_for_Interp_Count__c,Classification__c,Created_Self_Interp__c,Haven__c,UserID__c 
                                                             WHERE UserID__c = :UserInfo.getUserId() ORDER BY CreatedDate Desc)];
        entList = ((List<Journal_Entry__c>)searchList[0]);
        if(entList.size() == 0){
            apexPages.addmessage(new apexpages.message(apexpages.severity.Error, 'Sory, no results returned with matching string..'));
        }
    }            
}
}

I suspect that the problem with all of this has something to do with the rerendering after each onkeyup, but that wouldn't explain why other functions such as on page load and apex:actionFunction don't work...

I would greatly appreciate any insight!

  • Using an apex input field means the ID will actually be different than that in the DOM. What happens if you switch your selector to document.getElementsByClassName("inputField")[0].focus() – cricketlang Apr 8 '16 at 1:00
  • Where is saveUpdates(); function defined? – itzmukeshy7 Apr 8 '16 at 5:04
  • @cricketlang that worked! it now gives focus to the inputField upon load and rerender! Brilliant! Now, could you submit your comment as an answer and I will mark it, and also, would you please note on how to make the cursor end up at the end of the text rather the beginning? – anotherSFguy Apr 8 '16 at 15:17
  • Yeah just give me a bit. Need to get behind a computer. Lol. – cricketlang Apr 8 '16 at 19:15
  • @cricketlang I simply put onfocus="this.value = this.value;" in the inputfield and it works fine! Still need your answer to mark it as best. I already made a copy of this, with your answer on salesforce developer forum. I really appreciate your help!! – anotherSFguy Apr 8 '16 at 23:53
1

The issue here is that when using an Apex inputfield in your page, the actual ID of the element in the DOM will be different than the one you specifically state. Because of this, you cant use your specified static ID in your element selector. Also, because you only have one input field on this particular page, you can use a css selector because it will be the only element holding that particular class on the page. The example below should appropriately find your input element and give it focus.

document.getElementsByClassName("inputField")[0].focus()
| improve this answer | |
0

if you're not using jQuery, then you need to use something like this to find your "myAncor" input element:

var elems = document.querySelectorAll('input[id^="myAnchor"]');
var myAnchor = elems[0];

If you view the source of you input field, the Id will be some generated text and then "myAnchor", so you need to do a different type of search for finding the element.

https://stackoverflow.com/questions/22442808/can-you-use-a-wildcard-in-getelementbyid

| improve this answer | |
  • What we can't select an element using document.getElementById('id here')? – itzmukeshy7 Apr 8 '16 at 6:11
  • @itzmukeshy7 because it's an apex input and will get a Salesforce auto generated ID, not the one defined. Have to use a different selector than static ID. – cricketlang Apr 8 '16 at 18:49
0

Try this ;)

The problem statement is this: saveUpdates(); it is throwing error because this function is not defined and you are calling it;

To be able to use getfocus(); either remove this function call saveUpdates(); or add definition for this function saveUpdates(); may be something like this:

function saveUpdates(){
  /* your code to save update; */
}
| improve this answer | |
  • The save Updates is defined using apex... ' <apex:actionFunction name="saveUpdates" focus="myAnchor" action="{!soslDemo_method}"/> <script> saveUpdates(); </script> ' – anotherSFguy Apr 8 '16 at 15:11
  • But in the code you posted it doesn't have definition for saveUpdates(); can you see this function definition in your code may be you didn't posted that code here? – itzmukeshy7 Apr 11 '16 at 3:50

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.