Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Griffin MGriffin M 

Targeting html element with Javascript in VF

Hi. This is my first attempt at writing visualforce code and I am at an impass. I want to target my 'path' picklist options to determine which one is active. The HTML element is the attribute 'aria-selected' true or false, so I figured it would be easy to do this by checking which one is true. I am decently experience in JS so i thought this would be easy enough to do this that way. I included jQuery put my code inside a script tag, which seems to be working, but it can't find the HTML element, or any HTML element for that matter.  I can find 'document' in the console, but it seems to only go a level or two deeper, and anything I try to target with JS or jQuery in the page itself gives me

'Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined'

.  As I said, this is my first VF experience, and I am at a loss, I'm sure there's some basic concept here I'm missing. Any help would be greatly appeciated. My code is below. Thanks.

<apex:page standardController="Application__c" extensions="appDis">
    <apex:form >
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
            <script type="text/javascript">
            $ = jQuery.noConflict()
            var bar = document.getElementsByClassName('pa-tabBar')[0]
            var tabs = bar.getElementsByClassName('tabHeader');
            console.log(tabs)
            var stage = bar.querySelector("[aria-selected='true']").title;
            var checkbox = document.getElementById('4543:0');
         
        </script>
    </apex:form>
</apex:page>
 
Rajiv Penagonda 12Rajiv Penagonda 12
I am guessing that your scripts are running before your VF page is fully loaded. Can you try the following? 
<script>
	var jq_appdis = jQuery.noConflict();

	jq_appdis(document).ready(function() {
		var isSelected = jq_appdis(".tabHeader").attr("aria-selected");
		console.log("^^^ isSelected=" + isSelected);
	});
</script>
Samadhan ForceSamadhan Force
Hi Griffin,

you need to move your following code right above the closing page tag.
  
.
.
.
.

<script type="text/javascript">
            $ = jQuery.noConflict()
            var bar = document.getElementsByClassName('pa-tabBar')[0]
            var tabs = bar.getElementsByClassName('tabHeader');
            console.log(tabs)
            var stage = bar.querySelector("[aria-selected='true']").title;
            var checkbox = document.getElementById('4543:0');
  </script>
</apex:page>
---
Thanks
SamadhanForce
kindaly mark as best answer if it help you​