JavaScript에서 JSF 구성 요소 ID에 액세스하는 방법은 무엇입니까?

Javascript에서 사용하기 위한 JSF 구성 요소의 ID 알기

Javascript에서는 getElementById 함수를 활용하여 구성 요소에 액세스할 수 있습니다. 그러나 JSF는 구성 요소 ID를 동적으로 생성하므로 구성 요소 ID를 얻는 것이 중요합니다. 이 문서에서는 Javascript에서 사용할 구성 요소의 ID를 검색하는 방법을 살펴봅니다.

Javascript 코드를 통해 inputText 구성 요소에 액세스하려는 다음 시나리오를 고려하십시오.

<h:inputText>

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

문서 사용 .getElementById with 생성된 HTML DOM 요소

생성된 HTML DOM 요소는 JSF에서 지정하는 ID입니다. 생성된 코드를 검사하면 할당된 ID가 드러납니다. 예를 들어 위 예제의 inputText는 다음과 같이 렌더링되었을 수 있습니다.

<input type="text">

여기서 "j_id0:emailAddress"는 JSF에서 생성된 HTML DOM의 실제 ID를 나타냅니다. 따라서 Javascript에서 컴포넌트를 정확하게 참조하려면 지정된 ID 대신 생성된 ID를 사용하십시오.

JSF NamingContainers에 대한 고정 ID 설정

또는 JSF NamingContainer에 고정 ID를 할당할 수 있습니다. JSF가 ID를 자동 생성하는 것을 방지하기 위해 양식과 같은 구성 요소를 사용합니다. 예:

<h:form>

이 설정을 사용하면 양식 ID는 "formId"로 고정되고 inputText ID는 "formId:emailAddress"가 되며 이제 Javascript에서 직접 사용할 수 있습니다.

바인딩과 함께 #{Component.clientId} 사용

더 고급 기술에는 #{comComponent.clientId} 표현식과 구성요소 바인딩. 예:

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

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

업데이트:

#{comComponent.clientId}의 직접 사용

블로그 기사에 언급된 내용은 다음과 같습니다. 문제는 EL 표현식이 평가되는 현재 구성요소를 참조하는 #{comComponent} 참조와 직접적으로 관련됩니다. 구성 요소의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!