+ Start a Discussion
IvarIvar 

Problem with {!$Component.... in javascript

Hi all.

 

Hopefully someone can point me in the right direction. I have a visualforce page in which I am trying to change the properties of certain elements via javascript. I am trying to reference an object using this method:

 

var myObject = document.getElementById("{!$Component.objectId}");

 

But for some reason I am unable to fetch that Id. Here is the visualforce part where the elements are defined:

 

 

<td><apex:commandLink action="{!cancelEdit}" rerender="projectList">Cancel</apex:commandLink></td>
                <td><apex:commandLink action="{!saveEdit}"  rerender="projectList" target="_top" id="cmdLink">Save</apex:commandLink></td>
                <td><apex:inputField rendered="{!p.Id == editLine.Id}" value="{!editLine.plProductCategory__c}"/></td>
                <td><apex:inputField rendered="{!p.Id == editLine.Id}" value="{!editLine.plTransactionType__c}"/></td>
                <td><apex:inputField rendered="{!p.Id == editLine.Id}" value="{!editLine.plStatus__c}" id="statusField" onChange="setTarget()"/></td>

 

 

and here is the javascript function I am calling when the last field changes:

 

 

<script>     
  function setTarget(){
           alert( "{!$Component.cmdLink}" );
           var cmdLink = document.getElementById("{!$Component.cmdLink}");
           var statusField = document.getElementById("{!$Component.statusField}");
           
           if( statusField.value == "Unnin sala" ){
           	linkElement.target = "_top";
           	linkElement.rerender = "";
           }
           else{
           	linkElement.target = "";
           	linkElement.rerender = "projectList";
           }
        	
        }
    </script>

 

 

No objects are fetched via the getElmenentById calls and the variables cmdLink and statusField are null. Just to test further I added the alert at the top of the function to try and see what I get from the Component reference but that alert comes up empty.

 

Does anyone have an idea as to what I am doing wrong here?

 

Best regards,

Ivar

Best Answer chosen by Admin (Salesforce Developers) 
Edwin VijayEdwin Vijay

Hi,

 

I think there is someting wrong with the quotation marks,

 

try the following formats

'{!$Component.inlinetablesec}'
or
'"{!$Component.inlinetablesec}"'

 

 

or, pass the parameters when you call the javascript function

 

 

<apex:inputField rendered="{!p.Id == editLine.Id}" value="{!editLine.plStatus__c}" id="statusField" onChange="setTarget('{!$Component.inlinetablesec}')"/></td>


 

 

and your javascipt will be like

 

 

<script>     
  function setTarget(obj){
           alert(obj);
           var cmdLink = document.getElementById(obj);
           
    </script>

 

 

All Answers

Edwin VijayEdwin Vijay

Hi,

 

I think there is someting wrong with the quotation marks,

 

try the following formats

'{!$Component.inlinetablesec}'
or
'"{!$Component.inlinetablesec}"'

 

 

or, pass the parameters when you call the javascript function

 

 

<apex:inputField rendered="{!p.Id == editLine.Id}" value="{!editLine.plStatus__c}" id="statusField" onChange="setTarget('{!$Component.inlinetablesec}')"/></td>


 

 

and your javascipt will be like

 

 

<script>     
  function setTarget(obj){
           alert(obj);
           var cmdLink = document.getElementById(obj);
           
    </script>

 

 

This was selected as the best answer
IvarIvar

Thanks a million Edwin! That solved this part of the puzzle :) and I am now able to correctly load up those elements. I am now faced with another problem though. 

 

In my javascript function I am trying to manipulate the rerender attribute of the commandLink element. I seem to be unable to reference it, and looking around online hasn't shown me any way to do this. Is it only possible to access basic html element attributes, or is there another way to get to those visualforce-specific attributes?

See bolded lines of the function below. It doesn't seem to recognize rerender as an attribute of the element:

 


See bolded lines of the function below. It doesn't seem to recognize rerender as an attribute of the element:

 


function setTarget( link, value ){
       
           var cmdLink = document.getElementById( link );
           var statusField = document.getElementById( value );
           
           alert( statusField.value );  //correctly outputs a value
           alert( cmdLink.target );     //correctly outputs "_top"
           alert( cmdLink.rerender );   //returns undefined
           
           if( statusField.value == "Unnin sala" ){
           	cmdLink.target = "_top";
           	cmdLink.rerender = "null";
           }
           else{
           	cmdLink.target = "";
           	cmdLink.rerender = "projectList";
           }
           

        	
        }

 

 Any suggestions? It would make my week if I can get around this :)

 

Best regards again,

Ivar

 

 

 

Edwin VijayEdwin Vijay

Hi Ivar,

 

Glad to know that it helped!!

 

Rerender is not a property of the actual HTML element and thats why you dont get it there...  rerender is actally VISUALFORCE specific and generates HTML tags..

 

Right Click -> View Source and you will be able to see the HTML source

 

Remember to remove your page editor before doing so by specifying the URL as below

 

http://cs3.salesforce.com/apex/testpage?core.apexpages.devmode.url=1

 

You may need to pass it some other way, may be using functions to javascript

 

Edwin