4

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.

  • Can you ensure registrations has value – Reshma Mar 17 '17 at 4:35
  • Yes, it does. And the controller method works correctly based on the debug logs – sforce Mar 17 '17 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 '17 at 4:46
  • 3
    @sforce It's a standard limitation of <use> tag in SVG. You cannot render it – Rohit Mourya Mar 17 '17 at 4:53
  • 1
    @RohitMourya i didnt know about that. removed the <use> and it worked! thanks a lot! – sforce Mar 17 '17 at 4:58
4

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

As per @rohitmourya comment

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

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.