1

I have one vf page where after clicking on Contacts tab I want check whether user has entered value in "tab1_Name" inputText under AccDetails tab. I am trying to access the "tab1_Name" id using $Component notation, however everytime its value is null. Any help/suggestion will be greatly appreciated.

<apex:page controller="TestController" showHeader="true"  > 
<apex:form >
<apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" 
    tabClass="activeTab" inactiveTabClass="inactiveTab"> 

    <apex:tab label="Details" name="AccDetails" id="tabdetails"> 

        <apex:inputText id="tab1_Id" label="tab1_Name" value="{!AccountList}"/>
    </apex:tab> 

    <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()"> 

        <apex:inputText id="tab2_Id" label="tab2_Name2" value="{!AccountList}"/>
    </apex:tab>   
</apex:tabPanel> 
</apex:form>
<script language="javascript">
function validate()
{
try
{
var fNameObj = document.getElementById('{!$Component.AccountTabPanel.tabdetails.tab1_Id}');
alert("inside validate"+fNameObj);
if(trim(fNameObj.value) == "")
{
alert("tab1Name is mandatory!");
return false;
}
return true;
}
catch(e)
{
alert(e);
return false;
}
}
</script>
</apex:page>

2 Answers 2

2

This took a little bit of troubleshooting by looking at the page source. I added an id to the page and the form tags and then looked at the source to see what the rendered id was on the tab's input field. This gave me the correct structure for the $Component reference path.

It turns out that the AccountTabPanel and tabdetails elements are not part of the DOM id structure. The structure that works looks like this: document.getElementById('{!$Component.thePage.theForm.tab1_Id}');

<apex:page id="thePage" showHeader="true" controller="TestController">
    <apex:form id="theForm" >
        <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">

            <apex:tab label="Details" name="AccDetails" id="tabdetails">

                <apex:inputText id="tab1_Id" label="tab1_Name" value="{! AccountList}" />
            </apex:tab>

            <apex:tab label="Contacts" name="Contacts" id="tabContact" onclick="validate()">

                <apex:inputText id="tab2_Id" label="tab2_Name2" value="{! AccountList}" />
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    <script language="javascript">
        function validate() {
            try {
                var fNameObj = document.getElementById('{!$Component.thePage.theForm.tab1_Id}');
                alert("inside validate" + fNameObj);
                if (trim(fNameObj.value) == "") {
                    alert("tab1Name is mandatory!");
                    return false;
                }
                return true;
            }
            catch (e) {
                alert(e);
                return false;
            }
        }
    </script>
</apex:page>
0
0

If you want to continue with the $Component way, you need to give an id to <apex:form> and start from form. As long as the VF element is wrapped in either in <apex:form> or <apex:pageblock>, you need to start with those two elements.

Otherwise, if you are using jQuery, you can simply use:

$('input[id$="tab2_Id"]')
1
  • thanks for your reply. I gave an id to form and started with form id but still its not working. Sep 16, 2015 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.