1

I am using below Typeahead Component to search for existing Contacts in visualforce page. But when I rerender section of Typeahead component it is showing blank page.

https://github.com/SalesforceFoundation/visualforce-typeahead

<apex:page standardController="Account" sidebar="true" showHeader="true" id="page" tabStyle="Account">
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
          <apex:inputField value="{!Account.Industry}">
            <apex:actionSupport event="onchange" reRender="SectionID1,SectionID2"/>
          </apex:inputField>
        </apex:pageBlockSectionItem>  
      </apex:pageBlockSection>
       <apex:outputPanel id="SectionID1" >
        <apex:outputPanel rendered="{!IF(Account.Industry== 'Agriculture',True,False)}">
           <c:typeahead/>
        </apex:outputPanel>
      </apex:outputPanel>
      <apex:outputPanel id="SectionID2" >
        <apex:outputPanel rendered="{!IF(Account.Industry== 'Banking',True,False)}">
          <apex:pageBlockSection title="SectionB" columns="2" >
            <apex:pageBlockSectionItem >ITEM 1</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >ITEM 2</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >ITEM 3</apex:pageBlockSectionItem>
          </apex:pageBlockSection>
        </apex:outputPanel>
      </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>
Improve this question

1 Answer 1

Reset to default
3

That component sets up the jQuery code using:

    j$(document).ready(function(){

        j$('#{!searchBoxId}').typeahead({
            minLength: {!minSearchLength},
            hint: true,
            autoselect: true,
            highlight: true
        },
        ....

but that ready callback only happens on the initial page load and not when you re-render part of the page.

Two solutions:

  • don't re-render
  • get the author (or do it yourself) to expose a JavaScript function that you can call from the oncomplete of the apex:actionSupport; that function should re-apply the jQuery Logic
Improve this answer
1
  • I'm not sure this is actually the issue, I've tried this and it doesn't make any difference to the rerender failure - code here. I did find that commenting out the typeahead library reference ( line 14 - window.typeahead || document.write('<script src="{!URLFOR($Resource.Typeahead, '/typeahead.bundle.min.js')}"><\/script>'); ) from the component stops the rerender failure from occurring, although obviously it breaks the typeahead functionality. So there might be an issue with this library?
    – Philip Clark
    May 4, 2017 at 11:13

You must log in to answer this question.

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