component fails to load on visualforce rerender
Steps to reproduce:
- Update TypeaheadTest to embed interface within form tags
- add commandbutton to refresh form
Code should now look like: ` <apex:page showHeader="true" sidebar="true" title="Typeahead Test Page">
<style>
.sample-form {
margin: 20px;
width: 400px;
font-size: 16px;
}
.sample-form h3 {
margin:8px 0;
display:block;
}
.sample-form button {
margin: 18px 0;
padding: 5px 10px;
}
</style>
<apex:form id="theForm">
<div class="sample-form">
<h3>Contact Name:</h3>
<c:Typeahead />
<button onclick="alert( 'You selected ' + document.getElementById('searchBox').getAttribute('data-id') );">Submit</button>
<h3>Account Name:</h3>
<c:Typeahead searchBoxId="acctSearchBox" object="Account" primaryField="Name" secondaryField="BillingCity"
searchScope="NAME" placeholder="Type something..." minSearchLength="3"
destinationForSelectedId="accountId" destinationForSelectedValue="accountName" stealFocus="false" />
<input type="hidden" name="accountId" id="accountId" />
<input type="hidden" name="accountName" id="accountName" />
<button onclick="alert( 'The hidden Id field contains ' + document.getElementById('accountId').value + '\nThe hidden Name field contains ' + document.getElementById('accountName').value );">Submit</button>
<apex:commandButton id="refreshButton" rerender="theForm" value="Refresh" />
</div>
</apex:form>
</apex:page>`
- run page and click "Refresh" - you should see the Typeahead component fail to load
I've narrowed the issue down to the Typeahead component line 14 window.typeahead || document.write('<script src="{!URLFOR($Resource.Typeahead, '/typeahead.bundle.min.js')}"><\/script>'); - removing this allows refresh, although without this library obviously typeahead won't work.
This is a great utility, but re rendering issues are causing real problem.
Did someone find a fix. I read somewhere if we call jquery ready function from oncomplete, it will fix the issue. for me it didn;t fix even after that.