jquery - 如何使用jQuery選擇JSF組件?




2 Answers

您應該意識到jQuery可以在客戶端使用HTML DOM樹。 jQuery不能直接在JSF組件上工作,就像你在JSF源代碼中編寫的那樣,但是jQuery直接使用由那些JSF組件生成的HTML DOM樹。 您需要在webbrowser中打開頁面並右鍵單擊,然後單擊View Source 。 您將看到JSF將生成的HTML輸入元素的ID與所有父NamingContainer組件(例如<h:form><h:dataTable>等)的ID一起預先設置為:作為默認分隔符。 所以舉個例子

<h:form id="foo">
    <p:selectManyCheckbox id="bar" />
    ...

將最終生成的HTML作為

<form id="foo" name="foo">
    <input type="checkbox" id="foo:bar" name="foo:bar" />
    ...

您需要完全按該ID選擇元素。 然而:是CSS標識符中的特殊字符,表示偽選擇器。 要使用jQuery中的CSS選擇器在ID中選擇帶有:的元素,您需要通過反斜杠轉義它或使用[id=...]屬性選擇器或只使用舊的getElementById()

var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));

如果在ID中看到自動生成的j_idXXX部分,其中XXX表示增量編號,則必須為特定組件指定固定ID,因為增量編號是動態的,並且可能會根據組件在樹中的物理位置而發生更改。

作為替代方案,您也可以使用類名:

<x:someInputComponent styleClass="someClassName" />

最終以HTML格式結束

<input type="..." class="someClassName" />

這樣你就可以得到它

var $elements = $(".someClassName");

這允許更好的抽象和可重用性。 當然,這些元素並不是唯一的 。 只有標題,菜單,內容和頁腳等主要佈局元素才真正獨一無二,但它們通常不在NamingContainer

再次作為另一種選擇,您可以將HTML DOM元素本身傳遞給函數:

<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
    var $element = $(element);
    // ...
}

也可以看看:

我正在嘗試使用PrimeFaces和JSF組件實現jQuery,但它無法正常工作。 當我嘗試用HTML標籤做同樣的事情時,它正常工作。

以下是帶有HTML標記的代碼,它可以與jQuery一起使用:

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }
});

以下是使用PrimeFaces / JSF的代碼,它與jQuery無法正常工作:

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});



如果您正在使用RichFaces您可以檢查rich:jQuery comonent。 它允許您為jQuery組件指定服務器端ID。 例如,你有具有指定服務器id的組件,然後你可以以下一種方式應用任何與jQuery相關的東西: <rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

有關詳細信息,請檢查doumentation

希望能幫助到你。




Related