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?

Attribution to: DCBoy

Possible Suggestion/Solution #1

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.

Attribution to: ebt

Possible Suggestion/Solution #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!

Attribution to: metadaddy

Possible Suggestion/Solution #3

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.

Attribution to: joshbirk

Possible Suggestion/Solution #4

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/.

Attribution to: Alderete

Possible Suggestion/Solution #5

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.

Attribution to: DCBoy

Possible Suggestion/Solution #6

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>');
    }
}

Attribution to: Manmeet Manethiya
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/282

Search form

You are here

HTML5 elements vanish when rerendering Visualforce