function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RishavRishav 

accessing the id of the nested element using jQuery in visualforce pages

Hi , 
  I am having problem in accessing the id of the element using jQuery, what is the accurate method to access the interna or nested elements 
 in the visualforce using jQuery.
<script>
   $(document).ready(function(){
  

  $("#createUserLink").click(function() {
  
  alert('hello');
  
  });
   });
   
   </script>
   
</head>
<apex:form id="popupForm">
<div id="lean_overlay">
<table>
<tr>
<td><apex:outputLabel value="Enter customer name:"></apex:outputLabel></td>
<td> <apex:inputtext value="{!cust_name}"/> </td>
</tr>
<tr>
<td><apex:outputLabel value="Enter customer contact number:"></apex:outputLabel></td>
<td><apex:inputText value="{!cust_contact}"/> </td>
</tr>
<tr>
<td><apex:outputLabel value="Enter customer email"></apex:outputLabel></td>
<td><apex:inputText value="{!cust_email}"/></td>
</tr>
<tr>
<td><apex:outputLabel value="Enter customer's address"></apex:outputLabel> </td>
<td><apex:inputText value="{!cust_address}"/></td>
</tr>
<tr><td><apex:commandButton value="submit" id="submitButton"/> </td> 
<td><apex:commandButton value="Cancel" id="cancelButton"/></td>
</tr>
</table>

</div>
<a href="#" id="createUserLink">Create User </a>   // This element not accessible
</apex:form>

<a href="#" id="createUserLink">Create User </a>   // same element working fine 

</apex:page>
what is the exact  way to access the id of nested element.
logontokartiklogontokartik
Whatever you are doing is right, i think its just since the <a href> is inside form, you might actually be submitting a form. There is no special way to access an element inside divs. Its the same if you have specified the Id, 

Can you change your code to do this instead. and remove the <a> in line 43. 


<script>
   $(document).ready(function(){
      $("#createUserLink").click(function(e) {
         e.preventDefault(); // This will prevent the default behavior of the a tag
         alert('hello');
       });
   });   
</script>
Grazitti TeamGrazitti Team
Hi Rishav,

Please use this code to access the element inside the form:

$(document).ready(function(){
   
      $(" [id$=popupForm]  [id$=createUserLink]").click(function() {
            console.log('hello');
 });

Please mark it as best answer if it solves your problem.

Regards,
Grazitti Team
RishavRishav
Hello Graziti Team,
                                   Thanks for your quick reply.
                                   the way you are telling me here is not referring my question, You are just telling me to select the  multiple elements at a time and perform 
                                   the action. 
                                   But my question was how to access multiple level of nested element using jquery in  visualforce.
Thanks
Grazitti TeamGrazitti Team
Rishav,

Could you please give an example of any element in your markup which you are trying to access and are unable to?
logontokartiklogontokartik
Have you tried using preventDefault()? In jQuery you dont have to do anything spl in your selector to get the nested element. If you have a Id specified even for the nth child all you do is just use #id to get that element
bob_buzzardbob_buzzard
The problem with your original post is that you have two anchor tags with the same id, which is illegal HTML.  Salesforce defends against this by building up an id "path" for each element, including the specified (or auto-generated) id of each parent.  HTML doesn't have this, so the id you specify is the full id:

<a href="#" id="createUserLink">Create User </a>   // This element not accessible
</apex:form>
<a href="#" id="createUserLink">Create User </a>   // same element working fine

I'd imagine what is happening is that the last item on the page with the duplicate id wins.