You need to sign in to do that
Don't have an account?

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>
'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>
you need to move your following code right above the closing page tag.
---
Thanks
SamadhanForce
kindaly mark as best answer if it help you