Question

我们的应用程序中有一个按钮设置，类似于以下内容：

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

我尝试使用a4j:commandLink标记做同样的事情，但它无法正常工作。这是我写的代码：

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

此呈现的HTML不正确，<h2>标记最终位于<a>标记之外。这是呈现的内容：

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

onclick正在正确呈现，并且链接应该有效，但h2标记需要进入a标记，以便按钮在屏幕上正确呈现。

Answer 1

此呈现的HTML不正确

JSF并没有这样呈现。它是webbrowser本身以这种方式解释获得的HTML标记。您最有可能通过F12查看webbrowser的Web开发人员工具集中的HTML DOM检查器，而不是直接在原始HTML源代码中通过右键单击查看源。

关于webbrowser解释它的原因;像<h2>这样的level element inline element嵌套在<a> <h2> <a4j:commandLink value="Button Title" action="#{action.method}" id="buttonId" /> </h2> invalid HTML {{3}}。 webbrowser基本上会扼杀它并将块级元素推送到HTML DOM树中的任何内联元素之外。

只需交换它们，浏览器就会很开心。

{{1}}

在CommandLink中使用RichFaces 3 html标签

1 个答案: