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

function doSearch() {
<apex:outputPanel id="searchBar">
    <input type="search" class="slds-input slds-lookup__search-input defaultShadow" id="accName" onkeyup="doSearch();"/>
<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 >
                    <apex:column >
                    <apex:column >
                            <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:outputPanel id="signaturePanel">
    <apex:actionFunction name="searchServer" action="{!runSearch}" reRender="displayTable">
    apex:param name="accName" assignTo="{!memName}" value="" />

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

  • Can you ensure registrations has value
    – Reshma
    Mar 17, 2017 at 4:35
  • Yes, it does. And the controller method works correctly based on the debug logs
    – sforce
    Mar 17, 2017 at 4:39
  • how about adding a <script>alert()</script> in the area which is being rerendered ? (just to see if it rerendering the html at all). If the html is being refreshed the alert will fire.
    – Avidev9
    Mar 17, 2017 at 4:46
  • 3
    @sforce It's a standard limitation of <use> tag in SVG. You cannot render it Mar 17, 2017 at 4:53
  • 1
    @RohitMourya i didnt know about that. removed the <use> and it worked! thanks a lot!
    – sforce
    Mar 17, 2017 at 4:58

3 Answers 3


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"
                <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>
                    <span id="err_text"></span>

In this case I rerendered the err_wrapper


As per @rohitmourya comment

It's a standard limitation of tag in SVG. You cannot render it


Late to the party here, but I recently ran into this issue where slds SVGs were not displaying after a rerender on a Visualforce page.

I added docType="html-5.0" to the apex:page tag per this source and it worked like a charm.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.