CODEWITHSUNDEEP
htmljspjsfrichfaces
Nathan24
Nathan24

Reputation: 1402

RichFaces 3 html tag inside commandLink

We have a button setup in our application that looks something similar to the following:

<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
     <a href="#" onclick="callSomeAjaxSubmit();"><h2>Button Title</h2></a>
</div>

I'm trying to do the same thing with an a4j:commandLink tag, but it is not working properly. here is the code I wrote:

<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
     <a4j:commandLink action="#{action.method}" id="buttonId">
          <h2>Button Title</h2>
     </a4j:commandLink>
</div>

The HTML that this renders is incorrect, and the <h2> tag ends up outside the <a> tag. Here is what is rendered:

<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
     <h2>Button Title</h2>
     <a name="myForm:buttonId" id="myForm:buttonId" onClick="A4J.AJAX.Submit........" href="#"></a>
</div>

The onclick is getting rendered correctly, and the link should work, but the h2 tag needs to go inside the a tag in order for the button to render correctly on screen.

Upvotes: 1

Views: 347

Answers (1)

BalusC
BalusC

Reputation: 1108732

The HTML that this renders is incorrect

JSF doesn't render it that way. It's the webbrowser itself who interpreted the obtained HTML markup that way. You most likely looked in HTML DOM inspector in webbrowser's web developer toolset as available via F12, instead of straight in the raw HTML source as available via rightclick, View Source.

As to the why the webbrowser interpreted it like that; having a block level element like <h2> nested in an inline element like <a> is invalid HTML. The webbrowser basically chokes on that and pushes the block level element outside any inline element in the HTML DOM tree.

Just swap them, and the browser will be happy.

<h2>
    <a4j:commandLink value="Button Title" action="#{action.method}" id="buttonId" />
</h2>

Upvotes: 1

Related Questions