Bagaimana untuk Mengakses ID Komponen JSF dalam JavaScript?

Mengetahui Id Komponen JSF untuk Penggunaan dalam Javascript

Dalam Javascript, fungsi getElementById boleh dimanfaatkan untuk mengakses komponen. Walau bagaimanapun, memandangkan JSF menjana ID komponen secara dinamik, mendapatkan ID komponen adalah penting. Artikel ini meneroka cara untuk mendapatkan semula ID komponen untuk digunakan dalam Javascript.

Pertimbangkan senario berikut di mana kami ingin mengakses komponen inputText melalui kod Javascript:

<h:inputText>

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

Menggunakan Dokumen .getElementById dengan Elemen DOM HTML Dijana

Elemen DOM HTML yang dihasilkan mempunyai struktur yang berbeza daripada ID yang anda tentukan dalam JSF. Memeriksa kod yang dijana akan mendedahkan ID yang diberikan. Sebagai contoh, inputText dalam contoh di atas mungkin telah dipaparkan sebagai:

<input type="text">

di mana "j_id0:emailAddress" mewakili ID sebenar dalam DOM HTML yang dijana oleh JSF. Oleh itu, untuk merujuk komponen dalam Javascript dengan tepat, gunakan ID yang dijana dan bukannya ID yang ditentukan.

Menetapkan ID Tetap untuk JSF NamingContainers

Sebagai alternatif, anda boleh menetapkan ID tetap kepada JSF NamingContainer komponen, seperti borang, untuk menghalang JSF daripada menjana ID secara automatik. Contohnya:

<h:form>

Dengan persediaan ini, ID borang akan ditetapkan sebagai "formId", dan ID inputText ialah "formId:emailAddress", yang kini anda boleh gunakan terus dalam Javascript.

Menggunakan #{Component.clientId} dengan Binding

Teknik yang lebih maju melibatkan penggunaan ungkapan #{component.clientId} bersama-sama dengan pengikatan komponen. Contohnya:

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

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

Kemas kini:

Penggunaan Terus #{component.clientId}

Artikel blog yang disebut dalam masalah berkaitan terus dengan rujukan #{component}, yang merujuk kepada komponen semasa di mana ungkapan EL dinilai. Untuk mendapatkan ID komponen, gunakan sintaks berikut:

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

Meluluskan Elemen DOM HTML sebagai Rujukan "ini"

Pendekatan lain ialah menghantar elemen DOM HTML yang dijana sebagai "ini" merujuk kepada fungsi, membolehkan anda mengakses terus sifat komponen dalam fungsi.

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

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

Menggunakan jQuery dan Perwakilan Acara

jQuery menawarkan pilihan yang lebih maju dengan menggunakan perwakilan acara dan kelas gaya untuk mengabstrakkan komponen.

<h:inputText styleClass="someMarkerClass" />

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

Atas ialah kandungan terperinci Bagaimana untuk Mengakses ID Komponen JSF dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!