一個(gè)常見(jiàn)的情況是在觸發(fā)一個(gè)動(dòng)作之前彈出一個(gè)確認對話(huà)框(例如:刪除一條記錄,取消編輯)。另一個(gè)常見(jiàn)的情況是在保存一些信息到服務(wù)器之前在客戶(hù)端做驗證,例如在傳回服務(wù)器之前驗證 password和Confirm password是否相等。
這篇文章描述了在<h:commandLink>和<h:commandButton>組件里如何觸發(fā)客戶(hù)端的java script功能。 <h:commandLink> 關(guān)聯(lián)一個(gè)java script和一個(gè)commandLink并不困難,但是為了能夠成功關(guān)聯(lián)你需要理解jsf是怎樣解析<h:commandLink>組件的。
下面的例子說(shuō)明了<h:commandLink>是怎么被解析成HTML的:
<h:form id=”userForm”>
<h:commandLink id=”lnkDeleteUser” value=”delete” action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" onclick= "clear_userForm();
document.forms[‘userForm‘].elements[‘userForm:_link_hidden_‘].value=‘userForm:lnkDeleteUser‘;
if (document.forms[‘userForm‘].onsubmit){
if (document.forms[‘userForm‘].onsubmit())
document.forms[‘userForm‘].submit();
}
else {
document.forms[‘userForm‘].submit();
}
return false; "
id="userForm:lnkDeleteUser">delete</a>
這里有幾點(diǎn)需要注意:
1,<h:commandLink>被解析成了超級鏈接<a href/>。
2,這個(gè)超鏈接的href是"#";基本上是個(gè)無(wú)用的值。
3,JSF為這個(gè)超鏈接的‘onclick‘事件生成了一堆java script。忽略細節,它主要是調用 submit()函數來(lái)提交表單。
4,第三行比較有意思--這個(gè)組件的id (“userForm::lnkDeleteUser”) 被保存在了一個(gè) hidden元素里。這也是jsf是如何知道哪個(gè)組件觸發(fā)提交表單的操作并正確的調用 服務(wù)器端actions的關(guān)鍵。
大多數JSF組件允許我們?yōu)榭蛻?hù)端的DHTML事件(比如onclick,ondoubleclick,onfocus等)注入java script的。但在<h:commandLink〉里JSF已經(jīng)為onclick事件生成了相關(guān)的java script。下面的代碼說(shuō)明了如何在onclick事件里注入打開(kāi)確認對話(huà)框的java script代碼:
<h:form id=”userForm”>
<h:commandLink id=”lnkDeleteUser” value=”delete” onClick=”if (!confirm(‘Are you sure you want to delete this record?‘)) return false” action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" onclick= "if (!confirm(‘Are you sure you want to delete this record?‘)) return false;
clear_userForm();
document.forms[‘userForm‘].elements[‘userForm:_link_hidden_‘].value=‘userForm:lnkDeleteUser‘;
if (document.forms[‘userForm‘].onsubmit){
if (document.forms[‘userForm‘].onsubmit())
document.forms[‘userForm‘].submit();
} else {
document.forms[‘userForm‘].submit();
}
return false; "
id="userForm::lnkDeleteUser">delete</a>
另外一個(gè)需要注意的重點(diǎn)是java script在任何情況下都不能返回true值。如果返回true值的話(huà),瀏覽器將會(huì )執行<a href="#"/>-這只是指向了一個(gè)虛擬的頁(yè)。 <h:commandButton> commandButton組件要相對簡(jiǎn)單一些,下面的腳本說(shuō)明了如何加入一個(gè)確認對話(huà)框:
<h:commandButton id=”btnCancel” value=”Cancel” onclick=”if (!confirm(‘You will lose all changes made. Are you sure?‘)) return false" />
<input id="userForm:btnCancel" name="userForm:btnCancel" type="submit" value="Cancel" onclick=" if (!confirm(‘You will lose all changes made. Are you sure?‘)) return false; clear_userForm(); "/>
在這里的commandButton被解析成了一個(gè)提交按鈕。如果java script返回true值這個(gè)表單會(huì )被提交,如果返回false將會(huì )忽略表單的提交。 在JSF里成功使用java script的關(guān)鍵是理解它是怎樣被解析的。理解一些java script會(huì )更好。另外需要小心的是語(yǔ)法,因為大多數IDE都不支持java script的語(yǔ)法交驗。如果你寫(xiě)了一個(gè)語(yǔ)法錯誤,例如少了一個(gè)打括號,代碼將會(huì )簡(jiǎn)單的默默的執行失?。海?
聯(lián)系客服