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
Abhilash Mishra 13Abhilash Mishra 13 

alternative For {!$component}

Hello,

I am working with javascript. I need to select A field. My javascript is out side the blocks. so With $component  id have to usw hierarchical id (or Dom tree id). structure like {!component.mypage.mypageblock.myfield}. 
I Can't use something {!component.mypage.mypageblock.myfield} as only id fixed is myfield.
 what is the alternative how can i select field directly?
Best Answer chosen by Abhilash Mishra 13
Rahul KhilwaniRahul Khilwani
Hi Abhilash,

If you are using jQuery on your page you can use $("[id$='<Field ID Here>']") css selector.

Let me know if this works
Regards
Rahul.

All Answers

ManojSankaranManojSankaran

Hi Abilash,

Consider the below example. Hope it will help you.



<apex:page>
<script>
 function alertMethod(idValue){

alert(idValue);
}
</script>
<apex:pageblock>
<apex:pageblocksection>
<apex:inputField value="{!Account.Name}" onblur="alertMethod(this.id);"/>
</apex:pageblockSection>
</apex:pageblock>
</apex:page>


Let me know if you need more help. 


Thanks
Manoj S
Rahul KhilwaniRahul Khilwani
Hi Abhilash,

If you are using jQuery on your page you can use $("[id$='<Field ID Here>']") css selector.

Let me know if this works
Regards
Rahul.
This was selected as the best answer
Abhilash Mishra 13Abhilash Mishra 13
Hi Manoj,

I am Using Javascript. so It would be better if can use something with document.getElementById().

I dont want to change whole code to jQuery. although I will if there will be no solution
ManojSankaranManojSankaran
Hi Abilash,

Whatever i have mentioned uses javascript. Inside the method you can use
function alertMethod(idValue){
document.getElementById(idValue);
}


Thanks
Manoj S
 
Abhilash Mishra 13Abhilash Mishra 13
Hi Manoj,
 but I have to address some other filelds. not the one binded with event. so this will not be helpful. I guess.
<apex:page>
<script>
 function alertMethod(idValue){
alert(idValue);
}
</script>
<apex:pageblock>
<apex:pageblocksection>
<apex:inputField value="{!Account.Name}" onblur="alertMethod(this.id);"/>
<apex:inputField value="{!Account.accountnumber}"  id="accN"/>
</apex:pageblockSection>
</apex:pageblock>
</apex:page>


How will you operate for accN ?
Abhilash Mishra 13Abhilash Mishra 13
Hi Rahul, 

Any alertnative using Javscript.  It would be better if can use something with document.getElementById().

I dont want to change whole code to jQuery. although I will if there will be no solution
ManojSankaranManojSankaran
I checked in my dev org and attaching the screenshot.


User-added image

<apex:page>
<script>
 function alertMethod(idValue){
alert(idValue);
}
</script>
<apex:pageblock>
<apex:pageblocksection>
<apex:inputField value="{!Account.Name}" onblur="alertMethod(this.id);"/>
<apex:inputField value="{!Account.accountnumber}"  id="accN" onblur="alertMethod(this.id)"/>// this will work and will get the id
</apex:pageblockSection>
</apex:pageblock>
</apex:page>
Abhilash Mishra 13Abhilash Mishra 13
You are using onblur ib accN too.  How will you get these two id, if event was happening some where else.

What if on  click of a button I need to set those field to some values

 
ManojSankaranManojSankaran

Okay Abnilash, 

Now I got your question. Sorry we went in a wrong way.
If you dont want to use {!$Component.IDValue}


We can use the same onBlur Method to debug the IDValue and then we can use it in our button

for Example
<apex:page>
<script>
 function alertMethod(){
alert(document.getElementById('Pass that id that you got in the previous code'));
}

function findId(idValue){

alert(idValue);
}


</script>
<apex:pageblock>
<apex:pageblocksection>
<apex:inputField value="{!Account.Name}" onblur="alertMethod(this.id);"/>
<apex:inputField value="{!Account.accountnumber}"  id="accN" onblur="FindID(this.id)"/>// this will work and will get the id
</apex:pageblockSection>
<apex:commandButton value="Save" onclick="alertMethod"/>
</apex:pageblock>
</apex:page>

You can also use F12 and check the id of the required Input text or field.



Thanks

Manoj S
 
Rahul KhilwaniRahul Khilwani
Hi Abhilesh,

You can uses document.getElementsByClassName to get the element you need matching the class name. Check the sample code.
  
<apex:page >
  <script>
      function getAllInputValues(){
          var allInputs = document.getElementsByClassName('input-fld');
          console.log(allInputs);
      }
  </script>
  <apex:form >
      <apex:pageBlock >
          <apex:inputText id="id1" styleClass="input-fld"/>
          <apex:inputText id="id2" styleClass="input-fld"/>
          <input type="button" value="click me!" onclick="getAllInputValues()"/>
      </apex:pageBlock>
  </apex:form>
</apex:page>
Let me knoe if this works

Regards
Rahul
Abhilash Mishra 13Abhilash Mishra 13
Okk
Thanks to both of You.
 I think I am Gonna Do it by Jquery...

Regards
Abhilash Mishra