I am working in JSF2 project and faced the error, which breaks native HTML5 tags display in the browser. So, what I have:
<a4j:form id="myForm">
<a4j:jsFunction name="myFunction" actionListener="#{myBean.key}"
ignoreDupResponses="true"
eventsQueue="myQueue"
oncomplete="alert('Done');"
reRender="wrapper">
</a4j:jsFunction>
<a4j:outputPanel id="wrapper" layout="block">
<!-- Inside this panel I have HTML5 tags -->
<aside>
<div class="myObject">
<p>Lorem impsum dolor sit amet...</p>
</div>
</aside>
<nav>
<a href="#" title="">My Link #1</a>
<a href="#" title="">My Link #2</a>
</nav>
</a4j:outputPanel>
<div class="anotherObject">
<a href="#" title="" onclick="myFunction(); return false;">Refresh my wrapper</a>
</div>
</a4j:form>
So, right after I click a link, which activates myFunction() on click event, <a4j:outputPanel> content is rerendered, but broken, because HTML5 tags are dropped outside, and when I debug in Firebug, code of outputPanel looks like this:
<div id="myForm:wrapper">
<aside> </aside>
<nav> </nav>
<!-- And right here starts all my content, which has to be inside those HTML5 tags -->
<div class="myObject">
<p>Lorem impsum dolor sit amet...</p>
...
</div>
Maybe somebody knows why this rerendering brakes my HTML?!