Get DOM ElementID Of The Visualforce Components - Jitendra Zaa

Trang chủ » Visualforce Page Document.getelementbyid » Get DOM ElementID Of The Visualforce Components - Jitendra Zaa

Có thể bạn quan tâm

This article will focus on getting generated dom element Id in Visualforce. Let’s consider below code snap:

<apex:page> <apex:form id="frm"> Enter Value 1 : <apex:inputText id="txt1" /> </apex:form> </apex:page>

If you want to get the id of “apex:inputText” in javascript like belowCode

Var fld = document.getElementById("˜txt1');

It will NOT work. Because its actual id will be something like “j_id0:frm:txt1“.

To get the Actual id in Visualforce page we have to use below line of code:

Var fld = document.getElementById("{!$Component.txt1}");

As you can see, we have to use below Syntax:

{!$Component.fieldId}

Case 1: However there is one catch. If the element is present at several levels where Parents also have the Id then you have to write code like:

{!$Component.Parent1.Parent2.fieldId}

Case 2: If your element is within form tag having no Id like :

<apex:page> <apex:form> Enter Value 1 : <apex:inputText id="txt1" /> </apex:form> </apex:page>

And you try to get the id like

Var fld = document.getElementById("{!$Component.txt1}");

It will NOT work. You must have to give the Id to “apex:form“ element and access it.

Example Working code:

<apex:page> <apex:form id="frm"> Enter Value 1 : <apex:inputText id="txt1" /> </apex:form> </apex:page>

Get Id by using code:

Var fld = document.getElementById("{!$Component.frm.txt1}");

You might face problem in JQuery because of auto generated ID pattern of Salesforce, in that case this article “Handling Colon in Element ID in JQuery – Visualforce problem” will come handy.

Share this post

  • Email
  • X
  • Facebook
  • LinkedIn
  • Pinterest
  • Tumblr
  • Reddit
  • Pocket

Like this:

Like Loading…

Từ khóa » Visualforce Page Document.getelementbyid