如何在 JavaScript 中存取 JSF 元件 ID？

了解在 Javascript 中使用的 JSF 元件的 ID

在 Javascript 中，可以利用 getElementById 函數來存取元件。然而，由於 JSF 動態產生元件 ID，因此取得元件 ID 至關重要。本文探討了檢索元件 ID 以在 Javascript 中使用的方法。

考慮以下場景，我們希望透過Javascript 程式碼存取inputText 元件：

<h:inputText>

function myFunc() {
  // Get the inputText component's contents
  alert("Your email address is: " + document.getElementById("emailAddress").value);
}

使用文件.getElementById 與產生的HTML DOM 元素

產生的HTML DOM 元素的結構與您在JSF 中指定的ID。檢查產生的代碼將顯示已指派的 ID。例如，上面範例中的 inputText 可能已呈現為：

<input type="text">

，其中「j_id0:emailAddress」表示 JSF 產生的 HTML DOM 中的實際 ID。因此，要在 Javascript 中準確引用元件，請使用產生的 ID 而不是指定的 ID。

為 JSF NamingContainer 設定固定 ID

或者，您可以為 JSF NamingContainer 指派固定 ID元件（例如表單），以防止 JSF 自動產生 ID。例如：

<h:form>

透過此設置，表單 ID 將固定為“formId”，而 inputText ID 將是“formId:emailAddress”，您現在可以直接在 Javascript 中使用。

將 #{Component.clientId} 與 Binding 結合使用

更高級的技術涉及一起使用 #{component.clientId} 表達式與元件綁定。例如：

<h:inputText binding="#{emailAddress}" ... />

var input = document.getElementById('#{emailAddress.clientId}');

更新：

直接使用#{component.clientId}

中提到的部落格文章問題與#{component} 引用直接相關，它引用計算EL 表達式的目前元件。若要取得元件的ID，請使用下列語法：

var input = document.getElementById('#{component.clientId}');

將HTML DOM 元素作為「this」參考傳遞

另一種方法是將產生的HTML DOM 元素作為「this 」傳遞函數的引用，讓您可以直接存取元件內的屬性

<h:inputText onclick="show(this)" />

function show(input) {
  alert(input.value);
}

使用jQuery和事件委託

jQuery 透過使用事件委託和樣式類別來抽像元件提供了更高級的選項。

<h:inputText styleClass="someMarkerClass" />

$(document).on("click", ".someMarkerClass", function() {
  var $input = $(this);
  alert($input.val());
});

以上是如何在 JavaScript 中存取 JSF 元件 ID？的詳細內容。更多資訊請關注PHP中文網其他相關文章！