11

I have noticed that HTML 5 tags like <section> and <header> disappear from the page when I reRender the page. On initial load of the page the HTML5 elements appear as expected but when the section is refreshed using the reRender of actionFunction, all the HTML5 elements vanish. Does anyone know how to address this?

  • I've encountered the same. Use HTML 4 elements, or do your rendering yourself through VF javascript remoting & javascript. – Samuel De Rycke Oct 8 '12 at 13:09
  • 1
    Has anyone heard back from SF on this issue? I ended up replacing all html5 elements with just div's and it seems to work. – daniel Oct 30 '12 at 19:51
  • 1
    @daniel - this has been filed as a bug with reRender VF attribute. For now, whatever you have done is the way to solve this problem. – DCBoy Oct 31 '12 at 15:48
  • dcboy did you ever got a response or later update from Salesforce ? – Samuel De Rycke Jan 28 '13 at 10:33
  • @Sdry, I haven't heard from Salesforce after they confirmed its issue. – DCBoy Jan 29 '13 at 14:54
9

This has been filed as a bug with reRender (VF) removing HTML 5 tags.

As a workaround I have used Javascript remoting to retrieve data and update the page manually.

5

This is an issue that arises when an action response is post-processed by Visualforce to verify that the returned HTML is valid, to ensure it can be inserted back into the DOM. <article> and so on are HTML5 tags that aren't recognized as valid by the post-processor (which is kind of old school about these things). Prior to Summer '13, the only answer is to not use these tags (or, don't reRender them). Switch to <div>s and the like.

In Summer '13 a new option is available. When you set the doctype to HTML5:

<apex:page docType="html–5.0">

AND update the page to use the latest API version (28.0), the post-process "tidying" won't happen, and the HTML5 tags won't get stripped.

There's a lot more detail on this change in behavior in the Salesforce Summer '13 release notes, http://www.salesforce.com/customer-resources/releases/, so check that out if this is of interest to you.

Summer '13 is rolling out to customer sandboxes the weekend of May 10, 2013, and to production beginning in June. The full schedule is available at http://trust.salesforce.com/trust/maintenance/.

  • +1 for switching the docType attribute. Resolved the problem in my case. – zashu Jan 23 '14 at 0:39
2

I would double check the document structure - I've seen subtle issues like this creep in when, for example, accidentally including a <div> within a <p>. There is an excellent blog post that covers this: http://www.laceysnr.com/2011/12/beware-bad-markup-when-you-least-expect.html

If a minimal, validated, example still fails, please do raise a ticket!

2

A sample of the HTML before and after might be helpful to know specifically what kind of attributes Visualforce may be dropping. My guess is that VF isn't aware of some of the new HTML5 attributes (like data-*) and hence might drop them depending on how rerender is being used.

As an extreme measure, I'd recommend looking at JavaScript Remoting as an alternative instead. JS Remoting doesn't use a viewstate and does not rewrite any HTML for you, so you'd only see the changes to the DOM you've put in.

0

Not familiar with this issue, as I haven't really played around with the new spec. But what about changing the docType string? It could be that the default DOC string (which is the schema definition) does not contain those tags, so they are being removed. VF is a much stricter XML implementation than HTML. Probably won't work, but it's worth a shot.

Here is the doc type string for html5: <!DOCTYPE html>, and apex:page reference.

  • 1
    I already have the docType set to html-5.0, am going to raise a ticket with Salesforce to see if they know the solution. – DCBoy Aug 10 '12 at 2:21
0

I have another work around for it. Write a Oncomplete javascript function on action function tag and in that function create the DOM of the HTML Canvas component dynamically.

This will create the component again in the page.

Example Code Snippet :-

function onCompleteJS() {
    if(document.getElementById("chart-area-main") == null) {
        $('.table-chart-container').append('<canvas class="table-chart" id="chart-area-main"></canvas>');
    }
}

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.