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?

Improve this question
6
  • I've encountered the same. Use HTML 4 elements, or do your rendering yourself through VF javascript remoting & javascript.
    – Samuel De Rycke
    Commented Oct 8, 2012 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
    Commented Oct 30, 2012 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
    Commented Oct 31, 2012 at 15:48
  • dcboy did you ever got a response or later update from Salesforce ?
    – Samuel De Rycke
    Commented Jan 28, 2013 at 10:33
  • @Sdry, I haven't heard from Salesforce after they confirmed its issue.
    – DCBoy
    Commented Jan 29, 2013 at 14:54

6 Answers 6

Reset to default
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.

Improve this answer
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/.

Improve this answer
1
  • +1 for switching the docType attribute. Resolved the problem in my case.
    – zashu
    Commented Jan 23, 2014 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!

Improve this answer
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.

Improve this answer
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.

Improve this answer
1
  • 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
    Commented Aug 10, 2012 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>');
    }
}
Improve this answer

You must log in to answer this question.

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