JSF commandButton'onclick'事件不會持久

Question

我想要一個可點擊的圖像，其中的滾動/滾出/點擊發生變化。不用說，我想在'onclick'後頁面不會重新加載。
我試圖用h：image或h：commandButton來完成這兩項工作，兩者都無法按預期工作。 最討厭的，這是這樣的： 我在我的代碼的bean，這個簡單的函數：

public String getClick() 
{ 
    return "alert('abc')"; 
} 

，並在jsp文件，下面的代碼：

<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td> 
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" /> 

用戶點擊後，既能提高警告框，但是，只有第二個重新加載頁面，而第一個沒有。不知道我與它有什麼關係，但是當我查看編譯頁面的源代碼時，我發現第一個按鈕的類型保持「按鈕」，但第二個按鈕變成了「圖像」。

有什麼建議嗎？ 歡呼聲， 埃雷茲

Answer 1

的<h:commandButton>（和<h:commandLink>）的默認行爲是提交其通過<h:form>指定父POST形式。

onclick屬性只允許開發人員在表單提交之前執行某段JavaScript代碼。它默認不阻止表單提交。如果你想阻止按鈕的默認行爲（提交表單），那麼你需要添加return false;到onclick。

在<h:commandButton>情況下，該組件的屬性type默認爲submit，它會產生一個HTML <input type="submit">。當您將其更改爲button時，它會變成一個「死」按鈕，它基本上什麼都不做，希望執行附加到它的任何JavaScript處理程序，並且它會生成一個HTML <input type="button">。當使用組件的image屬性時，它將被轉換爲圖像地圖，允許您提交光標相對於圖像的X，Y位置（但是，在您的情況下，您似乎只需要一個背景圖像;如果您實際上應該使用CSS background-image代替），並且組件的type屬性將被忽略並且它將生成一個HTML <input type="image">。

這全部清楚地記錄在編碼行爲部分的tag documentation。

如果你唯一的要求是，從提交父窗體阻止<h:commandButton type="image">，那麼你需要添加return false;到的onclick，如前說：

<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" /> 

另一種方法是結合使用type="button"用CSS背景圖片（這樣，你是不是濫用image屬性）：

<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" /> 

與在由<h:outputStylesheet>加載CSS文件中的以下內容：

.emptyButton { 
    background-image: url(#{resource['empty.jpg']}); 
}