+ Start a Discussion
KidNikiKidNiki 

jQuery and Apex id tags driving me nuts!

Can anyone help me with this please?  I've gone all over the net looking at the different articles out there on how to return the id of an Apex component but nothing works and its kill'n me!  I know my static resource is working because I was able to do some basic jQuery on an HTML element.  No dice on the Apex stuff though :smileysad:

 

code:

 

<apex:page id="page" showHeader="false">
<apex:includeScript value="{!$Resource.jQuery}" />

<script type="text/javascript">

	     
	     	
	     $(document).ready(function(){
	     
	     $('[id$=":testLbl"]').value("New Value");
	        
   			
   	});
     
       
    </script>
   
    
<apex:outputLabel value="My Label Test!" id="testLbl"/>
<apex:outputPanel id="panel">
</apex:outputPanel>

</apex:page>

 

 

 

aballardaballard

You need to use $component to get the dom-id that corresponds to a given visualforce component id. (e.g. {!$component.testLbl}  )

KidNikiKidNiki

Sorry, im a total dummy with this, so should it look like this?

 

<script type="text/javascript">

	     var j$ = jQuery.noConflict();
	     	
	     j$(document).ready(function(){
	     
	     j$("#{!$Component.page:testLbl}").value("changed");
	        
   			
   	});
     
       
 </script>
   

 

aballardaballard

I don't know jQuery, but from your original version I'd assume you need

 

<script type="text/javascript">
       $(document).ready(function(){
        
       $('[id$=":{!$component.testLbl}"]').value("New Value");
                       
       });
    
</script>
   

Starz26Starz26
I just use "#IDNAME"

To identify the elements....for me adding the # works well.
WizradWizrad

1) That may be a valid jQuery selector, but it isnt the way I would write it.  $('#myIdHere').

 

2) Check out this link: http://th3silverlining.com/2010/02/17/visualforce-ids-in-jquery-selectors/

KidNikiKidNiki

Okay I got it working from both you guys and this link:

 

 

http://th3silverlining.com/2011/06/24/salesforce-a-better-way-to-work-with-visualforce-component-ids-and-javascript/

 

heres the new code:

 

var j$ = jQuery.noConflict();

j$(document).ready(function() {

	j$('[id$=testID]').click(function(){
	
			alert("clicked1");
			j$('[id$=testID]')
			 
   			});
});

 ThanX again ya'll!