function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
R.PlankenR.Planken 

Rerender not working when using Lightning Design System SVG icons

We are currently working on converting some of our old visualforce pages to a new design using Lightning Design System (LDS). Everything seems to be working as we want with the exception of using the rerender tag on certain objects.

The way our controller works is that we have a pageblocktable that shows certain records from today on. At the top of the page we have a checkbox that changes the list to also show the history of all records. The Checkbox has an extra icon next to it as followed: 
<svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
  <use xlink:href="{!URLFOR($Resource.slds100, 'icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
The checkbox has the following code: 
<apex:outputlabel value="Historie" for="historyselect" />
  <apex:inputcheckbox value="{!historySelect}" id="historyselect">
  <apex:actionsupport event="onchange" rerender="theForm" status="spinner" action="{!refresh}" />
</apex:inputcheckbox>
When not using the SVG icon, the page is rerendered and the list is updated to include all the items. But the moment I place an SVG icon it will stop working. Somehow the onstart is being started, but the oncompleted is never finished. The page also does not rerender. It seems to be related to the following reported bug on the LDS github:

https://github.com/salesforce-ux/design-system/issues/47

But I cant seem to find the reported bug on the Known Issues page. Does anyone have a solution or a workaround?

Greetings,

Ron


 
Stuart GreenbergStuart Greenberg
You might find that there is an error reported if you open your browser's console and refresh the page.

I use SVG icons on my pages and found that the following is required at the top of the page: 
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

I don't see that in your sample code. Could that be your problem?

-Stu
R.PlankenR.Planken
Unfortunatly I already have those two attributes. There is no error reported in the console as well, the rerender just seems to stop working the moment the SVG's are added. Everything else works fine, the icons show up and the first render works like it should. Its just the rerender stops.
 
Pranav Narayan 16Pranav Narayan 16
In case you are still facing this error, add docType="html-5.0" to the apex:page tag and you should be good to go.