I've got a problem and can't figure it out and would be glad if anyone of you could help me. So basically what I am trying to do is to put multiple window.onload events in a seperate file which starts my scripts. To get clear what I mean her is my situation:
Let's say I got these files:
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="kalkevent.js"></script>
<script type="text/javascript" src="reckevent.js"></script>
<script type="text/javascript" src="winonload.js"></script>
</head>
<body>
<div id="topColumn">
...
</div>
<div id="bottomColumn">
...
</div>
</body>
</html>
kalk.js
function kalkInit() {
Array.prototype.slice.call(document.forms[0].elements).forEach(function(element) {
...
});
};
reck.js
function reckInit() {
...
};
So I want to load kalkInit and reckInit on window.onload . This should be handled in a separate file. What I already tried is:
winonload.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
addLoadEvent(kalkInit);
addLoadEvent(reckInit);
But it's not working at all. So my question is if it possible what I am trying to do or not. And if it is could someone pls help me out? :)
You can consider using jQuery..
In your winonload.js you need only:
$(window).on("load", kalkInit);
$(window).on("load", reckInit);
Maybe you have to call your onloadfunction:
<body onload="addLoadEvent();">
Related
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 2 years ago.
Following this page, I'm finding that I can't execute an 'onclick' handler like the handler set up here:
function handler() {
console.log(5);
}
<button onclick="handler()"></button>
This is the only module I use: <script type="module" src="../js/js_test.js"></script>. It's in the header.
This is the error I get:
It works when I have this in my module:
let button = document.querySelector('button');
button.onclick = handler;
Any ideas?
P.s. I can't access variables I write on my module on the console. I thought I once could do this. Don't know if that's helpful.
you can also use export and import. exporting your functions and importing it to another file
In js_test.js do
export function handler() {
console.log(5);
}
In the html do
<html>
</head>
<script type="module" src="../js/js_test.js"></script>
<script type="module">
import {handler} from '../js/js_test.js';
document.onload = function(){
document.getElementById('myButton').addListener("click", handler);
};
</script>
</head>
<body>
<button id="myButton"></button>
</body>
</html>
EDIT per the suggestion of Aks Jacoves
An old way of doing module was
In js_test_old.js do
(function _module_x (global) {
global.myNamespace = global.myNamespace || {};
global.myNamespace.handler = _handler_;
function _handler_ () {
console.log(5);
}
})(window); // or })( (function(){return this;})() ); // this works for both Node.js and html
In the html do
<html>
</head>
<script src="../js/js_test_old.js"></script>
</head>
<body>
<button onclick="myNamespace.handler()"></button>
</body>
</html>
Be sure to add a listener if the html element has finished loading
document.onload = function(){
function handler(){
console.log(5);
}
}
I am trying to usesetInterval for a javascript function of mine to be called every 5 seconds. Here is what I have for code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="#routes.Assets.at("bootstrap/dist/css/bootstrap.css")" rel="stylesheet"/>
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
<script type="text/javascript">
window.setInterval("myFunction()",1000);
</script>
</head>
I know the function is being loaded in to the window, because I can call it via window.myFunction() and it performs as expected.
Thanks!
In your code this <script> has not closing tag but it is being self closed which is wrong
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
that's why setInterval code is not executing.
Your code have quote "" problem also.
<script src="#routes.Assets.at('javascripts/patientmonitor.js')"/>
//-----------------------------^convert it into single quote-^
<link href="#routes.Assets.at('bootstrap/dist/css/bootstrap.css')" rel="stylesheet"/>
JS
function myFunction (){
alert("your code here");
}
window.setInterval(myFunction, 1000);
Try this:
myInterval = setInterval(function() { myFunction() }", 5000);
I wanted paperjs to load after a button is pressed to turn on animations but it seems the paperscript doesn't work if paper is loaded after page load.
If you comment out the setTimeout and uncomment the direct $.getScript - paperjs will fire the alert('hi'). I don't get it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
$("#jq").text("jQuery is now loaded.")
var lateLoad = function() {
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
};
//setTimeout(lateLoad, 100);
$.getScript(paperUrl, function() {
$("#pp").text("Paperjs is now loaded.");
});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
I'm using Chrome 23.0.1271.97 m on Windows 7 x64. Anybody have an idea what's going on here?
I think I figured out a workaround as well - paper.PaperScript.load() or to elaborate:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("#jq").text("jQuery is now loaded.")
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
var lateLoad = function() {
$.getScript(paper_url, function() {
$("#pp").text("Paperjs is now loaded.");
paper.PaperScript.load(); // <-- The fix!
});
};
setTimeout(lateLoad, 1000);
//$.getScript(paperUrl, function() {
// $("#pp").text("Paperjs is now loaded.");
//});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
That causes paperscript to scan for all the paperscripts. I found it at https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270 while googling for "paperscript" in the github repo. Though it still doesn't explain why paper doesn't do the load() on its own when dynamically loaded.
EDIT - I understand what went wrong. It's related to https://github.com/jquery/jquery/blob/master/src/core.js#L768 because paperjs doesn't check if the window loaded event had already fired i.e document.readyState === "complete". I submitted a pull request to paperjs https://github.com/paperjs/paper.js/pull/156
I think it is easier to load it via require.js. All you need is a require.config object, defined in e.g. main.js:
requirejs.config({
paths : {
'jquery' : "path/to/jquery"
'paper' : "path/to/paper"
},
shim: {
'jquery' : {
exports: 'jQuery'
},
'paper' : {
exports: 'paper'
}
}
});
You will need to load require.js with the above config via the data-main attribute:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
Then you define a module (e.g. 'paperStuff') where your paper logic will be:
define(['jquery', 'paper'], function($, paper) {
// do some cool stuff
});
When you want to load your paperStuff, you just do
var paperStuff = require('paperStuff');
...
Move your paperscript code into an external file (i.e. pstest.js) and modify your lateLoad to:
var lateLoad = function() {
$.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
function() {
$("#pp").text("Paperjs is now loaded.");
$.getScript("pstest.js");
} )
}
When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!
have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/
Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here
It is jquery function, you have to register jquery javascript framework first
I tried using
onPageLoad: function() {
alert("hi");
}
but it won't work. I need it for a Firefox extension.
Any suggestions please?
If you want to do this in vanilla javascript, just use the window.onload event handler.
window.onload = function() {
alert('hi!');
}
var itsloading = window.onload;
or
<body onload="doSomething();"></body>
//this calls your javascript function doSomething
for your example
<script language="javascript">
function sayhi()
{
alert("hi")
}
</script>
<body onload="sayhi();"></body>
EDIT -
For the extension in firefox On page load example
Assuming you meant the onload-event:
You should use a javascript library like jQuery to make it work in all browsers.
<script type="text/javascript">
$(document).ready(function() {
alert("Hi!");
});
</script>
If you really don't want to use a javascript library (Don't expect it to work well in all browsers.):
<script type="text/javascript">
function sayHi() {
alert("Hi!");
}
</script>
<body onload="javascript:sayHi();">
...
<script language="javascript">
window.onload = onPageLoad();
function onPageLoad() {
alert('page loaded!');
}
</script>