Sign Up ›

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

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...
dchasmandchasman
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
damienmagnandamienmagnan
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
dchasmandchasman
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.
damienmagnandamienmagnan
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"><!-- Should be splited -->
        <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
gprasunagprasuna

Hi,

 

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

 

Thanks,

prasuna