current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.
up vote 1 down vote favorite

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>
share|improve this question

2 Answers 2

up vote 2 down vote

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>
share|improve this answer
    
thanks @Mark, its working now. –  Rohit Patil 21 hours ago
up vote 0 down vote

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"]')
share|improve this answer
    
thanks for your reply. I gave an id to form and started with form id but still its not working. –  Rohit Patil 22 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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