0

I have a visualforce page that starts like this:

<apex:page controller="FilastController" standardstylesheets="false" showheader="false" docType="html-5.0" sidebar="false">
    <html>
        <head>
            <apex:includeScript value="{!$Resource.Javascript}" loadOnReady="true"/>
        </head>

I have text/javascript static resource called JavaScript that starts like this:

window.onload = function () {
    
    //Create elements for schedule inputs dynamically
    var frequencies = ["Daily","Weekly","Monthly"]
    for (var i = 0; i < frequencies.length; i++) {
        input = document.createElement('input');
        input.type = "radio";
        input.id = frequencies[i];
        input.title = frequencies[i];
        input.name = "item10";
        document.getElementById('frequency_inputs').appendChild(input);
        
        li = document.createElement('li');
        li.id = "lid"+frequencies[i];
        document.getElementById('frequency_list').appendChild(li);
        
        label = document.createElement('label');
        label.htmlFor = frequencies[i];
        label.innerHTML = frequencies[i];
        document.getElementById("lid"+frequencies[i]).appendChild(label);
    }

When I put the JavaScript directly in the visualforce page between script tags it works; however, when I try to include it as a static resource it does not.

I was thinking my problem had to do with the onload function so I played around with the loadOnReady apex parameter, but haven't had any luck.

Improve this question

1 Answer 1

Reset to default
3

Visualforce itself has a window.onload handler, so you shouldn't be using this technique. The order of operation when it loads can affect if your script works correctly or not; if your script works correctly, then Visualforce may not work correctly, and if Visualforce is working correctly, your code will not.

Here's a working version:

Visualforce

<head>
    <apex:includeScript value="{!$Resource.Javascript}"/>
</head>

JavaScript

window.addEventListener('DOMContentLoaded', function () {
    
    //Create elements for schedule inputs dynamically
    var frequencies = ["Daily","Weekly","Monthly"]
    for (var i = 0; i < frequencies.length; i++) {
        input = document.createElement('input');
        input.type = "radio";
        input.id = frequencies[i];
        input.title = frequencies[i];
        input.name = "item10";
        document.getElementById('frequency_inputs').appendChild(input);
        
        li = document.createElement('li');
        li.id = "lid"+frequencies[i];
        document.getElementById('frequency_list').appendChild(li);
        
        label = document.createElement('label');
        label.htmlFor = frequencies[i];
        label.innerHTML = frequencies[i];
        document.getElementById("lid"+frequencies[i]).appendChild(label);
    }
});
Improve this answer
1
  • Massive!!! Thanks!
    – JVZ
    Commented Aug 20, 2022 at 19:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .