Accessing components by ID in JavaScript

I'm trying to access the components in my VisualForce using JavaScript to change the styles of the different elements, but I can't even access the elements themselves. And that's really really annoying.

For example that little code :

<script>
alert('{!$Component.testpage}');
alert(document);
alert(document.getElementById('{!$Component.testpage}'));
</script>

The successive messages are : "testpage", "[object HTMLDocument]", "null"...

Anyone can help pleaseeeeeee.

NB: that's a simple not-working example... I have a bigger work to do : showing/hiding rows in apex:pageBlockTable and in a drop down list on demand...

July 10, 2008
·
Answer
·
Like
0
·
Follow
0

dchasman
Can you please post the entire test page using the SRC button? One important concept to keep in mind is that there is not always a 1 to 1 correspondence between a VF component and the HTML/javascript/css it generates. For example, the apex:page component does not generate any client side DOM elements...

Message Edited by dchasman on 07-10-2008 11:07 AM

July 10, 2008
·
Like
0
·
Dislike
0

damienmagnan
Well the code is quite big and I don't see any SRC button

<script src="/soap/ajax/11.1/connection.js" type="text/javascript"></script>

.colonne, .colonneWE {text-align:center;} .colonneWE {background-color:#D3D3CA;}

Type : {!exc.type}

Source : {!exc.source}

Message : {!exc.message}

Stack Trace : {!exc.stackTrace}

Target site : {!exc.targetSite}

End point{!endPoint}

XML to parse{!xmlToParse}

Nom du salarié
{!itc.titre} {!itc.prenom} {!itc.nom}

E-mail
{!itc.email}

Mois

Année

<script>
// I arrive to access to rmaSct but I want to access the table under it... And especially access the rows to hide/show them
// I also want to access the selectListe name "addLigne"
alert(document.getElementById('{!$Component.rmaPage:mainForm:main:rmaSct}'));
</script>

Message Edited by damienmagnan on 07-10-2008 05:37 PM

July 10, 2008
·
Like
0
·
Dislike
0

dchasman
Please pair your markup down to something that just showcases the issue (although it does look like in this case you are trying to get the DOM element for something that does not generate any DOM content) and see the attached screen shot for the location of the SRC button.

July 10, 2008
·
Like
0
·
Dislike
0

damienmagnan
It wasn't displaying in Safari...

So, there's my code :

<apex:page id="rmaPage" controller="rmaController" title="Rapport Mensuel d'Activité">
    <script src="/soap/ajax/11.1/connection.js" type="text/javascript"></script>

    <style>.colonne, .colonneWE {text-align:center;} .colonneWE {background-color:#D3D3CA;}</style>
    <apex:form id="mainForm">
        <apex:pageBlock id="exception" title="Exception" rendered="{!renderException}">
            <apex:outputLabel ><b>Type : </b>{!exc.type}</apex:outputLabel><br />
            <apex:outputLabel ><b>Source : </b>{!exc.source}</apex:outputLabel><br />
            <apex:outputLabel ><b>Message : </b>{!exc.message}</apex:outputLabel><br />
            <apex:outputLabel ><b>Stack Trace : </b>{!exc.stackTrace}</apex:outputLabel><br />
            <apex:outputLabel ><b>Target site : </b>{!exc.targetSite}</apex:outputLabel><br />
        </apex:pageBlock>
        <apex:pageBlock id="debug" title="debug" rendered="{!renderDebug}">
            <apex:outputLabel for="endPoint"><b>End point</b>{!endPoint}</apex:outputLabel><br />
            <apex:outputLabel for="xmlToParse"><b>XML to parse</b>{!xmlToParse}</apex:outputLabel><br />
        </apex:pageBlock>
        <apex:pageBlock id="main" title="Rapport Mensuel d'Activité">
            <apex:pageBlockSection id="identitySct" collapsible="false" title="Identité" columns="1">
                <apex:pageBlockSectionItem id="nomSctItem">
                    <apex:outputLabel id="nomLbl" for="nom"><b>Nom du salarié</b></apex:outputLabel>
                    <apex:outputText id="nom">{!itc.titre} {!itc.prenom} {!itc.nom}</apex:outputText>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem id="emailSctItem">
                    <apex:outputLabel id="emailLbl" for="email"><b>E-mail</b></apex:outputLabel>
                    <apex:outputText id="email">{!itc.email}</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="dateSct" title="Le choix dans la date" collapsible="false" columns="1">
                <apex:pageBlockSectionItem id="chooseMonthSctItem">
                    <apex:outputLabel id="chooseMonthLbl" for="chooseMonth"><b>Mois</b></apex:outputLabel>
                    <apex:selectList id="chooseMonth" value="{!selectMonth}" size="1">
                        <apex:selectOption itemValue="1" itemLabel="Janvier" id="Testeuh" />
                        <apex:selectOption itemValue="2" itemLabel="Février" />
                        <apex:selectOption itemValue="3" itemLabel="Mars" />
                        <apex:selectOption itemValue="4" itemLabel="Avril" />
                        <apex:selectOption itemValue="5" itemLabel="Mai" />
                        <apex:selectOption itemValue="6" itemLabel="Juin" />
                        <apex:selectOption itemValue="7" itemLabel="Juillet" />
                        <apex:selectOption itemValue="8" itemLabel="Août" />
                        <apex:selectOption itemValue="9" itemLabel="Septembre" />
                        <apex:selectOption itemValue="10" itemLabel="Octobre" />
                        <apex:selectOption itemValue="11" itemLabel="Novembre" />
                        <apex:selectOption itemValue="12" itemLabel="Décembre" />
                    </apex:selectList>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem id="yearSct">
                    <apex:outputLabel id="chooseYearLbl" for="chooseYear"><b>Année</b></apex:outputLabel><apex:inputText value="{!selectYear}" />
                </apex:pageBlockSectionItem>
                <apex:commandButton id="dateSctBtn" reRender="rmaSection" value="Valider" />
            </apex:pageBlockSection>
            <apex:pageBlockSection id="rmaSct" title="Date : {!month} {!year}" collapsible="false" columns="1">
                <apex:pageBlockTable id="rmaTbl" value="{!itc.firstRma.lignes}" headerClass="colonne" var="act" frame="none" rowClasses="odd,even" title="RMA">

                    <apex:column headerValue="Affectation" width="100%">
                        <apex:outputText value="{!act.designation}"></apex:outputText>
                    </apex:column>
                    <apex:column headerValue="1" styleClass="colonneWE" headerClass="colonneWE">
                        <apex:inputText value="{!act.jour01}" size="2" />
                    </apex:column>
                    <apex:column headerValue="2">
                        <apex:inputText value="{!act.jour02}" size="2" />
                    </apex:column>
                    <apex:column headerValue="3">
                        <apex:inputText value="{!act.jour03}" size="2" />
                    </apex:column>
                    <apex:column headerValue="4">
                        <apex:inputText value="{!act.jour04}" size="2" />
                    </apex:column>
                    <apex:column headerValue="5">
                        <apex:inputText value="{!act.jour05}" size="2" />
                    </apex:column>
                    <apex:column headerValue="6">
                        <apex:inputText value="{!act.jour06}" size="2" />
                    </apex:column>
                    <apex:column headerValue="7">
                        <apex:inputText value="{!act.jour07}" size="2" />
                    </apex:column>
                    <apex:column headerValue="8">
                        <apex:inputText value="{!act.jour08}" size="2" />
                    </apex:column>
                    <apex:column headerValue="9">
                        <apex:inputText value="{!act.jour09}" size="2" />
                    </apex:column>
                    <apex:column headerValue="10">
                        <apex:inputText value="{!act.jour10}" size="2" />
                    </apex:column>
                    <apex:column headerValue="11">
                        <apex:inputText value="{!act.jour11}" size="2" />
                    </apex:column>
                    <apex:column headerValue="12">
                        <apex:inputText value="{!act.jour12}" size="2" />
                    </apex:column>
                    <apex:column headerValue="13">
                        <apex:inputText value="{!act.jour13}" size="2" />
                    </apex:column>
                    <apex:column headerValue="14">
                        <apex:inputText value="{!act.jour14}" size="2" />
                    </apex:column>
                    <apex:column headerValue="15">
                        <apex:inputText value="{!act.jour15}" size="2" />
                    </apex:column>
                    <apex:column headerValue="16">
                        <apex:inputText value="{!act.jour16}" size="2" />
                    </apex:column>
                    <apex:column headerValue="17">
                        <apex:inputText value="{!act.jour17}" size="2" />
                    </apex:column>
                    <apex:column headerValue="18">
                        <apex:inputText value="{!act.jour18}" size="2" />
                    </apex:column>
                    <apex:column headerValue="19">
                        <apex:inputText value="{!act.jour19}" size="2" />
                    </apex:column>
                    <apex:column headerValue="20">
                        <apex:inputText value="{!act.jour20}" size="2" />
                    </apex:column>
                    <apex:column headerValue="21">
                        <apex:inputText value="{!act.jour21}" size="2" />
                    </apex:column>
                    <apex:column headerValue="22">
                        <apex:inputText value="{!act.jour22}" size="2" />
                    </apex:column>
                    <apex:column headerValue="23">
                        <apex:inputText value="{!act.jour23}" size="2" />
                    </apex:column>
                    <apex:column headerValue="24">
                        <apex:inputText value="{!act.jour24}" size="2" />
                    </apex:column>
                    <apex:column headerValue="25">
                        <apex:inputText value="{!act.jour25}" size="2" />
                    </apex:column>
                    <apex:column headerValue="26">
                        <apex:inputText value="{!act.jour26}" size="2" />
                    </apex:column>
                    <apex:column headerValue="27">
                        <apex:inputText value="{!act.jour27}" size="2" />
                    </apex:column>
                    <apex:column headerValue="28">
                        <apex:inputText value="{!act.jour28}" size="2" />
                    </apex:column>
                    <apex:column headerValue="29" rendered="{!act.show29}">
                        <apex:inputText value="{!act.jour29}" size="2" />
                    </apex:column>
                    <apex:column headerValue="30" rendered="{!act.show30}">
                        <apex:inputText value="{!act.jour30}" size="2" />
                    </apex:column>
                    <apex:column headerValue="31" rendered="{!act.show31}">
                        <apex:inputText value="{!act.jour31}" size="2" />
                    </apex:column>
                    <apex:column headerValue="Total" headerstyle="align:center;">
                        <apex:outputText value="{!act.total}" />
                    </apex:column>
                </apex:pageBlockTable>
                <apex:commandButton id="addLigneBtn" value="Ajouter :" onclick="ajouterLigne();" />
                <apex:selectList multiselect="false" size="1" id="addLigne">
                    <apex:selectOptions value="{!optionsLignes}" id="selectOptions" />
                </apex:selectList>
            </apex:pageBlockSection>

        </apex:pageBlock>
    </apex:form>
    <script>
        alert(document.getElementById('rmaPage:mainForm:main:rmaSct:rmaTbl'));
        alert(document.getElementById('{!$Component.rmaPage.mainForm.main.rmaSct}'));
        alert(document.getElementById('{!$Component.rmaPage.mainForm.main.rmaSct.rmaTbl}'));
    </script>
</apex:page>

So, that code display three alerts with the messages : "[object HTMLTableElement]", "[object HTMLDivElement]" and "null"... So, since I know the convention, I can use the first option but why the second works and the third doesn't ?

Thanks

I reformated the code myself because the SRC button doesn't work great.

Message Edited by damienmagnan on 07-11-2008 10:02 AM

July 11, 2008
·
Like
0
·
Dislike
0

gprasuna
Hi,

I am also facing the same Issue can you please help me if you got any answer for it.

Thanks,
prasuna

February 4, 2009
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Accessing components by ID in JavaScript

You need to sign in to do that.