2

I have this visualforce page and it does not appear to be running the javascript OnKeyUp. Any ideas why this is not calling on each key-up? 

<script type="text/javascript">
      function doSearch() {
        searchServer(
          document.getElementById("clientName").value);
      }
  </script>  

 <apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
      <apex:param name="clientName" value="" />          
  </apex:actionFunction>

<table cellpadding="2" cellspacing="2">
  <tr>
    <td style="font-weight:bold;">Client Name<br/>
    <input type="text" id="clientName" onkeyup="doSearch()"/>
    </td>
  </tr>
</table>
Improve this question
8
  • 1
    it should work. do you see any error in console? can you add console.log before searchServer method call inside doSearch method to make sure it is working ?
    – Himanshu
    Nov 17, 2015 at 18:42
  • Perfect use case for visual force remoting and not an action function.
    – Eric
    Nov 17, 2015 at 18:57
  • @Himanshu like this: function doSearch() { console.log; searchServer( document.getElementById("clientName").value, document.getElementById("clientDOB").value, document.getElementById("benefitAmount").value, document.getElementById("FamilySize").value); }
    – tjcinnamon
    Nov 17, 2015 at 19:19
  • @Eric could you elaborate on this?
    – tjcinnamon
    Nov 17, 2015 at 19:19
  • like following console.log('*******Inside console*************');
    – Himanshu
    Nov 17, 2015 at 19:20

1 Answer 1

Reset to default
0

You are likely to have some problems running an actionFunction on keyup. This is because Salesforce will take longer to process your request than it takes a user to type each letter. This results in a long queue of requests and some odd performance. Ideally, you want to use a timeout via javascript's window.setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) function. Every time you get a keyUp event, cancel the previous event with window.clearTimeout() and add a new event for doSearch() for ~500ms in the future. This way, when the user stops typing for half a second, your actionFunction gets invoked, but it is not continuously invoked as the user types. You can play around with that delay to get your desired behavior.

EDIT - Here is some sample JS code that accomplishes what I was referring to:

<input id="clientName" type="text" onkeyUp="queueSearch()" />
<script>
  var currentQueueId;
  var queueDelay = 500; // in ms
  var queueSearch = function() {

    // clear any old event
    window.clearTimeout(currentQueueId);

    // add a new event
    currentQueueId = window.setTimeout(doSearch, queueDelay);
  }

  var doSearch = function() {
    var searchTerm = document.getElementById("clientName").value;

    actionFunction(searchTerm);
  }

  // This would actually be your apex:actionFunction
  var actionFunction = function(searchTerm) {
    alert(searchTerm);
  }
</script>
Improve this answer
16
  • that's great! However, even if I made these changes to the javascript wouldn't the result be the same because it's not being called?
    – tjcinnamon
    Nov 17, 2015 at 19:20
  • When you say "not being called" do you mean that the function is never invoked? It can sometimes be tricky to determine where the process is actually having an issue. If you add the oncomplete="alert(0);" attribute to your apex:actionFunction, does the alert show? If so, check that your page doesn't contain any required fields that are missing and check that your rerender attribute contains an apex:pageMessages element so that any errors can be updated on the page.
    – dsharrison
    Nov 17, 2015 at 19:34
  • 1
    The alert would show as a browser alert (it pops up right in your face). Since that is not working you want to take a step back and add the alert to your doSearch function. If that still does not show the alert there is something up with your actual onkeyup event on your input.
    – dsharrison
    Nov 17, 2015 at 19:47
  • 1
    This means your document.getElementById is probably failing. Open the javascript console in your browser and look for errors.
    – dsharrison
    Nov 17, 2015 at 20:57
  • 1
    @tjcinnamon - Had you posted your actual code we could have helped you much quicker (another lesson) - See, your case in your code (the id clientName and the ..byid.. clientName match case and your getElementById is correct) which means that what was in your SF Code was NOT what was posted here. Keep that in mind next time when asking a question.....Of course I could be misunderstanding what you are saying in your comment to....
    – Eric
    Nov 18, 2015 at 0:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .