How to dynamically load the different processing instance - javascript

I am having Processing.xhtml which has
<html>
<head>
<script language="JavaScript" src="../js/processing-1.0.0.min.js" type="text/javascript"></script>
</head>
<body onload="doIt();">
<div style="clear:both; float:left;">
<canvas id="sketch" data-processing-sources="../js/k12-processing.pde"></canvas>
</div>
<script type="application/javascript">
var pI;
function doIt() {
if (!pI) {
pI = Processing.getInstanceById('sketch');
}
#{script}
}
</script>
</body>
</html>
The variable 'pI', function name, canvasId are dynamic ones.
Now i want to draw some number of shapes dynamically in different canvas positioned in different place in a page Shape.xhtml. In Shape.xhtml i am referring Processing instance like this
<ui:include src="/Processing.xhtml">
<ui:param name="script" value="#{script}"/>
</ui:include>
After including Processing.xhtml my Shapes.xhtml will look like this
<ui:composition>
<ui:define>
<html>
...
<body onload="doIt_1">
<canvas id="sketch_1">
<script>...</script>
</body>
</html>
<html>
...
<body onload="doIt_2">
<canvas id="sketch_2">
<script>...</script>
</body>
</html>
</uI:define>
The onload event in body element is not triggered properly. How to dynamically load all the scripts in a page?

Web Browsers typically only want one html and one body tag in a single page. If you really want to wait until the page has completely loaded you can use the window.onload. For example at the top of your page you can do something like:
my_funcs = [];
window.onload = function() {
for (f in my_funcs) {
f();
}
}
Then after each of your scripts you can do something like:
my_funcs.push(loadFunc);
That guarantees that each of your load functions will get executed when the page finishes loading. However, if you don't really care about the page being fully loaded you could just execute the load function at the end of each script.

Related

body on load function not getting called if the script tag is end of the body

the code is somewhat like
<body onload="testFunc();">
<div></div>
<script type="text/javascript" src="/js/test.js"></script>
</body>
and the testFunc is inside test.js
and sometimes its not getting called
The onload attribute fires when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("body loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>body loaded!</h1>
</body>
</html>

Using vanilla javascript, add class to body from within head

I want to do a quick javascript check from within the head tag, like so:
<html>
<head>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</head>
<body class='no-js'>
...
</body>
</html>
This doesn't work. Cannot read property classList of null, which...fair enough. If I move the <script> tag into <body>, everything works, but I want the <script> tag in <head>.
What are my options?
EDIT: I should have been much clearer about the error. I realize the problem is that body hasn't loaded when I'm trying to to add the class. However, I was using a bit of Modernizr originally and it was somehow able to modify the body class from within the head and I don't think it was using window.onload or anything like that.
Run the code after body is loaded. There are several approaches to solve the problem:
Move the code into a named function defined in global context and call it in onload.
<html>
<head>
...
<script>
function load() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
}
</script>
</head>
<body onload="load();" class='no-js'>
...
</body>
</html>
Or move code to DOMContentLoaded event listener callback in order to call after dom elements are loaded.
<html>
<head>
...
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
});
</script>
</head>
<body class='no-js'>
...
</body>
</html>
Or move the entire script tag to the end of the page.
<html>
<head>
...
</head>
<body class='no-js'>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</body>
</html>
At the time the javascript is executed there is no body tag, because the browser hasn't gotten around to it yet. You need to either add the script tag in the body, or add it as an event to execute when the document has loaded. See DOMContentLoaded for an example.

Window.onload vs procedural execution

When using procedural style the code seemed to be executing with the wrong width dimensions of an element (i suspect the code was executing before the element was finished being created), when i refreshed the page all was fine.
Issue:
<html>
<head></head>
<body>
<div id="parent">
</div>
<script language="javascript" type="text/javascript">
create_object(); // Creates an element and puts it inside div parent
</script>
</body>
</html>
Solution:
<html>
<head>
<script language="javascript" type="text/javascript">
window.onload = function(){
create_object(); // Creates an element and puts it inside div parent
}
</script>
</head>
<body>
<div id="parent">
</div>
</body>
</html>
What is the difference?
The window.onload waits for the page to load of course but since the is after the element.. shouldn't that be just fine?
No other java script is being executed on the page.
window.onload waits for all page resources (such as images and style sheets) to be loaded before calling its callback. In your first example, the DOM elements will all exist (because your code is executing at the end of the body after things before it have been parsed), but external resources like images may not yet be loaded and thus final layout may not yet be achieved so everything may not yet have its final size/layout.
window.onload is executed when DOM tree is ready and all resources are loaded (image, script, stylesheet ...). If you load your script in body without this callback, your div width can be wrong if you load image or stylesheet into this bloc ...

JavaScript code in iframe

I need to run JavaScript code in iframe. But script with id "us" loaded after creating iframe. How to run this javascript in iframe?
<iframe id="preview">
#document
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$("#preview").ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test"></div>
</body>
</html>
</iframe>
Thanks in advance.
The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.
Example: http://jsfiddle.net/ZTJUB/
// Since this is page you wait until it's loaded
$(function() {
$(".test").click(function() {
alert(true);
});
});
The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"
As per my comments above, you should attach to the iframe's document.ready, like this:
// Since this is page you wait until it's loaded
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
EDIT:
Just realizing you are probably having an entirely different issue here - Html code as IFRAME source rather than a URL - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test">test</div>
</body>
</html>
</iframe>
</body>
</html>
if you render that page in firefox, and then inspect the source in firebug, you'll see:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
This is happening because the browser isn't expecting to see the code inline between the iframe tags.
Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content IN your iframe FROM your parent page. Since the other answer should work fine if trying to run it from within the iframe.
On the parent page try something like:
$(function() {
$("#preview").load(function ()
$("#preview").contents().find(".test").click(function() {alert(true);});
});
});
*This assumes both parent and iframe are on the same domain.

passing a variable (id) from html to external js file with functions

I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined) to window.onload.
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2: You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.

Categories

Resources