0

In the code below, I need to be able to use JS to call renderResults(); in my controller, only if a user clears the field where customerToClearSearchText goes on the VF page.

If I remove the condition, the method successfully executes; so I know that's where the problem is.

<apex:outputpanel >
    <apex:inputText id="customerToClearSearchText" value="{!customerToClearSearchText}" rendered="{!customerToClearInputRendered}" onkeydown="showResults()"/>
    <apex:actionFunction name="CallApexMethod" action="{!renderResults}"/>
    <script>                    
        function showResults(){
            var st = document.getElementById("customerToClearSearchText").value;
            if(st.length == 0){
                CallApexMethod();
            }
        }    
    </script>                
</apex:outputpanel>

To no avail I also tried:

  • document.getElementById("customerToClearSearchText")
  • if(!st)
  • if(!!st)

My guess is it doesn't work because the condition is evaluating the (now) populated string - customerToClearSearchText - in the controller; not the length of anything the user is (now) putting into the field on the page.

At any rate, is there anyway to do what I'm trying to accomplish? BTW, I'm completely new to JS.

1 Answer 1

0

Your mistake is in assuming that the ID you specify on the input element is the same that will be rendered in the page. Unfortunately, that's not how Visualforce works; it prepends the ID with additional characters to make it unique. The typical way to resolve this is to use a partial-match selector or even a different attribute altogether. The following should work:

var st = document.querySelector("[id$=customerToClearSearchText]").value;
if(!st) {
  CallApexMethod();
}

Edit: As an alternative, you can pass in "this" to link to the element:

<apex:inputText id="customerToClearSearchText" value="{!customerToClearSearchText}" rendered="{!customerToClearInputRendered}" onkeydown="showResults(this)"/>

...

function showResults(el){
    var st = el.value;
    if(!st) {
        CallApexMethod();
    }
}    

In JavaScript, onkeydown occurs before the input's value changes; use onkeyup instead.

6
  • Oh, good to know! However, oddly, now typing anything in fires the code. Aug 2, 2018 at 16:35
  • @GabrielRivera On key down is the wrong event to respond to, by the way; the state of the input hasn't been updated yet. Try "onchange" instead.
    – sfdcfox
    Aug 2, 2018 at 16:42
  • I changed the attribute to onchange, but still no luck. It once again seems to me that looking at the inputText value has something to do with it. When I inspect the field after clearing it, it seems to indicate that the actual value hasn't' changed. When I refresh the page after clearing the field, the field repopulates with the original value. Aug 2, 2018 at 17:40
  • @GabrielRivera That's the "view state" in action. It is working, because the view state is being updated. I'm not sure that you're asking the right questions at this point; your code is overly complicated when it doesn't need to be.
    – sfdcfox
    Aug 2, 2018 at 17:49
  • I experimented further and saw that your solution does work, but only when I click anywhere else after clearing the field. I was hoping the code would fire just by clearing the field. Aug 2, 2018 at 18:07

You must log in to answer this question.

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