[SalesForce] visualforce page ActionFunction reRender not Working

reRender on actionFunction is not working. I've also tried placing the actionFunction on top. What's wrong with my code?

function doSearch() {
    searchServer(document.getElementById("accName").value);
}
<apex:outputPanel id="searchBar">
    <input type="search" class="slds-input slds-lookup__search-input defaultShadow" id="accName" onkeyup="doSearch();"/>
</apex:outputPanel>
<apex:outputPanel id="master">
    <apex:outputPanel id="displayTable">
        <apex:outputPanel id="participants" rendered="{!registrations.size>0}">
            <apex:pageBlock id="asdf">            
                <apex:pageBlockTable value="{!registrations}" var="registration" id="registrations">
                    <apex:column >
                        {!registration.Name}
                    </apex:column>
                    <apex:column >
                        {!registration.Name__c}
                    </apex:column>        
                    <apex:column >
                        <center>
                            <svg class="slds-input__icon slds-icon-text-default slds-icon--x-small" aria-hidden="true">
                                <apex:outputText rendered="{!hasAttendance[registration.id]}">
                                    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#check')}"></use>
                                </apex:outputText>
                            </svg>
                        </center>
                    </apex:column>  
                </apex:pageBlockTable>
            </apex:pageBlock>  
        </apex:outputPanel>
        <apex:outputPanel id="signaturePanel">
        </apex:outputPanel>
    </apex:outputPanel>
</apex:outputPanel>
<apex:form>
    <apex:actionFunction name="searchServer" action="{!runSearch}" reRender="displayTable">
    apex:param name="accName" assignTo="{!memName}" value="" />
    </apex:actionFunction>
</apex:form>

the debug logs show that I'm getting the correct records but its not updating the page.

Best Answer

You can absolutely rerender the <use>and <svg> tag by:

The xmlns= on the div containing the SVG is a MUST as if you try to rerender without it the page will simply stall. Important trick to remember for anytime you are re rendering a container containing an SLDS SVG

How to convert a Visualforce apex:pageMessages to be lightning style

for example:

<div id="err_wrapper"
             class="slds-notify slds-notify--alert slds-theme--{!alertType} slds-theme--alert-texture"
             role="alert">
            <h2>
                <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <svg aria-hidden="true"
                         class="slds-icon icon-text-email slds-icon--small slds-m-right--x-small">
                        <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#' + if(alertType = 'success','check','ban'))}"></use>
                    </svg>
                    <span id="err_text"></span>
                </div>
            </h2>
        </div>

In this case I rerendered the err_wrapper

Related Topic