6

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.

7
  • 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

6

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

0
1

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.

0

As per @rohitmourya comment

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

You must log in to answer this question.

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