Rails loading my javascript only after a page reload

Question

I have this problem in Rails that when I enter the page, my javascript is not loaded. I have to reload the page after entering it and only then it loads.

This is how my javascript file looks like:

$(function() {
    initPage();
});
$(window).bind('page:change', function() {
    initPage();
});
function initPage() {
    window.onload = function () {
    var div = document.getElementById("buttons");
    var btn1 = document.createElement("button"); btn1.innerHTML = "Add one calculator"; btn1.id = "one";
    div.appendChild(btn1);
    btn1.onclick = function () {make_buttons ('calc');};
};

function make_buttons (id) {
    var div_id = Math.floor(Math.random()*999);
    var input_id = Math.floor(Math.random()*999);
    var operators = ["*","/","+","-","=","c","DEL"];
    var parent = document.getElementById(id);
    var in_div = document.createElement("div"); in_div.id = div_id;
    parent.appendChild(in_div);
        var input = document.createElement("input"); input.type = 'text'; input.id = input_id; input.readOnly=true;
        in_div.appendChild(input);
        for (var i = 0;i < 10; i++){  // make buttons with numbers
            var btn = document.createElement ("button");
            if (i === 0 || i === 6) {
                var br = document.createElement("br");
                in_div.appendChild(br);
            }
            btn.innerHTML = i;
            btn.id = i;
            in_div.appendChild(btn);
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(i);
        }
    for (var j = 0; j < operators.length; j++) {   // make buttons with operators
        var btn = document.createElement ("button");
        btn.innerHTML = operators[j];
        btn.id = operators[j];
        in_div.appendChild(btn);
        if (operators[j] === "=") {
            btn.onclick = function () {document.getElementById(input_id).value = eval(document.getElementById (input_id).value);};
        }
        else if (operators[j] === "c") {
            btn.onclick = function () {document.getElementById(input_id).value = '';};
        }
        else if (operators[j] === "DEL") {
            btn.onclick = function () {clearBox(div_id);};
        }
        else {
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(operators[j]);
        }   
    };
};

function clearBox(elementID) // delete the selected instance of calc
{
    document.getElementById(elementID).innerHTML='';    
}  
}

Also I am using the turbolinks function in Rails. What might be the problem here?

New code;

$(document).ready(function() {initPage();});
window.on('page:change', function(){initPage();});
/*
$(function() {
    initPage();
});
$(window).bind('page:change', function() {
    initPage();
});
*/
function initPage() {
        var div = document.getElementById("buttons");
        var btn1 = document.createElement("button"); btn1.innerHTML = "Add one calculator"; btn1.id = "one";
        div.appendChild(btn1);
        btn1.onclick = function () {make_buttons ('calc');};
}
function make_buttons (id) {
    var div_id = Math.floor(Math.random()*999);
    var input_id = Math.floor(Math.random()*999);
    var operators = ["*","/","+","-","=","c","DEL"];
    var parent = document.getElementById(id);
    var in_div = document.createElement("div"); in_div.id = div_id;
    parent.appendChild(in_div);
        var input = document.createElement("input"); input.type = 'text'; input.id = input_id; input.readOnly=true;
        in_div.appendChild(input);
        for (var i = 0;i < 10; i++){  // make buttons with numbers
            var btn = document.createElement ("button");
            if (i === 0 || i === 6) {
                var br = document.createElement("br");
                in_div.appendChild(br);
            }
            btn.innerHTML = i;
            btn.id = i;
            in_div.appendChild(btn);
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(i);
        }
    for (var j = 0; j < operators.length; j++) {   // make buttons with operators
        var btn = document.createElement ("button");
        btn.innerHTML = operators[j];
        btn.id = operators[j];
        in_div.appendChild(btn);
        if (operators[j] === "=") {
            btn.onclick = function () {document.getElementById(input_id).value = eval(document.getElementById (input_id).value);};
        }
        else if (operators[j] === "c") {
            btn.onclick = function () {document.getElementById(input_id).value = '';};
        }
        else if (operators[j] === "DEL") {
            btn.onclick = function () {clearBox(div_id);};
        }
        else {
            (function(index) {btn.onclick = function() {document.getElementById(input_id).value += index;};})(operators[j]);
        }   
    };
};

function clearBox(elementID) // delete the selected instance of calc
{
    document.getElementById(elementID).innerHTML='';    
}

Billy Chan · Accepted Answer · 2014-02-17 09:05:18Z

5

You have window.onload inside the initPage() function.

onload event will be fired upload page loaded, but won't be fired again after page:change event. So the code inside onload block will never have chance to be executed after page changed.

To fix, remove onload logic from the function initPage(). Then, call initPage() on both onload and page:change event.

answered Feb 17, 2014 at 9:05

Billy Chan

24.8k4 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Veske Over a year ago

I think I still don't get it.. So I take out the whole onload block from initPage and leave that function empty. Then on the first line where it callc initPage(), I tell it to load but the page:change and onload? But how do I tell it to do so?

Veske Over a year ago

I removed the window.onload alltogether and put what was inside of it into initPage. Now when loading the page for the first time, it loads my script but if I reload the page, it doubles the script. I suddenly have 2 buttons.

Billy Chan Over a year ago

You just need to take out the block wrapper window.onload = function () {}); and leave other code inside. Aslo I would prefer to use jQuery's document ready: $(document).ready(function(){initPage()}); as well as `window.on('page:change', function(){initPage()});

Veske Over a year ago

I added new code to original post. Bascily if I use the code in the comment tags, the script works on the first page load, but it is always doubled(I see two objects of that script on the page). When I use the JQuery version, I still need to reload the page to make the script visible.

Veske Over a year ago

Well just weird, works outside of rails in a normal way.

|

Collectives™ on Stack Overflow

Rails loading my javascript only after a page reload

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related