0

Hi folks I apologize if you have seen this one but after some extensive google searches I still came out empty. I want to use global JavaScript variables in my visualforce page but only local variables work. What am I missing? Thanks for helping a newbie.

Basic example:

 //Variables

 var resch = document.getElementById('resapp'); 
 var step1 = document.getElementById('firstpage');

function scheduleNow (){

  if(resch.checked)
  { 
   step1.style.display='none';
   alert("You chose to reschedule.");  
  }
  • Hi, and welcome to SFSE! There's not anything technically wrong with this code, but there may be other factors at play. I would suggest you edit your question to include more code. It may be a "race condition" (e.g. you're trying to access elements that don't exist yet), an incorrect ID value, or something else. The more code you provide, the better we can assist you. Also, if you're getting any error messages, etc, please include those in your question. – sfdcfox Apr 23 '19 at 17:23
  • Hi Keith, thanks. I moved the function and the global variables to the bottom of the page and it all works. I am fairly new to JS. I don't want to end up with JavaScript all over the place (top/bottom/etc.) Any quick tip? Please update your answer and I would gladly mark the question as resolved. – Snights Apr 23 '19 at 18:28
  • The advised solution is to use window.addEventListener('DOMContentLoaded', function() { ... }); as this makes sure that all of the DOM elements are loaded before your code executes. – sfdcfox Apr 23 '19 at 18:36
  • Also, PS, to notify an answerer, you need to comment on the answer. I ended up getting notified instead. Of course, I'm always willing to help when I can; I just wanted you to know. – sfdcfox Apr 23 '19 at 18:37
2

I assume you don't have the closing } missing in your page.

If the Id values you are looking for are ones you have set on apex: tags, then they will have been given prefixes related to the containing elements. Name all the apex: tags and use your browser's "Inspect" feature to find the correct Id e.g.:

var resch = document.getElementById('p:f:pbs:resapp');

Or another approach is to use an "ends with" selector thought I am not sure of the syntax without an element name so this assumes input:

var resch = document. querySelector('input[id$="resapp"]');

See Best Practices for Accessing Component IDs.

| improve this answer | |
0

I will consider the advised solution to use "window.addEventListener('DOMContentLoaded', function() { ... });" at a later time as I could not get it to work right away. I used sfdcfox's pointer that there could be a "race condition" (e.g. you're trying to access elements that don't exist yet)" and moved all JS to the bottom of the form. While perhaps not the best solution, it is working very well with the global variables. Thanks all!

| improve this answer | |
  • Pragmatically, putting the JavaScript at the end of the page works fine. – Keith C Apr 23 '19 at 20:40
  • Thanks Keith, much appreciated! – Snights Apr 24 '19 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.