I have two javascript files (file1, file2). File1 uses a class defined in file2. Am I able to reference these files from an html file the following manner:
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
Will this allow for file1's dependence upon the class defined in file2?
If not what are some plugins that do allow for this sort of dependency?
It has to do with the way you are going to use them. A simplified approach.
Scenario 1:
script1.js
function primary()
{
secondary();
}
script2.js
function secondary()
{
alert("hi primary");
}
test.html
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works (you already know it)
Scenario 2:
script1.js
secondary();
script2.js and test.html as above
It's not working (js error)
Scenario 3:
script1.js
secondary();
script2.js remains the same
test.html
<html>
<head>
<script src=script1.js defer></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works.
Is this what you're looking for?
Overview:
Use Jquery to load JS dynamically using the following:
$.getScript("file1.js",function(){
alert("File1.js is loaded");
}
Example with Object Oriented JS and dynamic js loading.
File1.js as:
File1 = function(){
}
File1.prototype=
{
constructor:File1,
primary:function()
{
if (File2 == "undefined")
{
$.getScript("file2.js",function()
{
file2 = new File2();
file2.secondary();
});
}
}
}
File2.js As:
File2 = function(){
}
File2.prototype=
{
constructor:File2,
secondary:function()
{
if (File1 == "undefined")
{
$.getScript("file1.js",functiom()
{
file1 = new File1();
file1.primary();
});
}
}
}
This should give you pretty good idea of dynamic loading of JS, and JS Object oriented concept as well.
Related
I get the testFile.js filename from url parameters, so it is loaded dynamically.
Then i do:
<script>jQuery.getScript('testFolder/testFile.js');</script>
<script src="ok1.js" type="text/javascript" charset="UTF-8"> </script>
<script src="ok2.js" type="text/javascript" charset="UTF-8"> </script>
testFile.js has:
function getFile0(){}
ok1.js has:
function getFile1(){}
function getFile2(){}
function getFile3(){}
ok2.js has:
var _getFiles = [getFile0(), getFile1(), getFile2(), getFile2()];
Although, it is supposed to load first the testFile.js, then ok1.js and finally ok2.js, i get this error for ok2.js: Uncaught ReferenceError: getFile0 is not defined
I have tried plenty of stuff like:
jQuery.getScript('testFolder/testFile.js').done(function() {
jQuery.getScript('ok1.js').done(function() {
jQuery.getScript('ok2.js');
});
});
it is loading without error, but the page is not working as it should.
My actual code is dense, so I'm trying to reduce this to a minimal example.
I have MainUI.js which contains:
var MainUI = function(){
'use strict';
var singleton = null;
class MainUI {
makeSomethingHappen(){
console.log("MAGIC!");
}
}
return {
getSingleton: function(){
if (singleton == null) singleton = new MainUI();
return singleton;
}
};
}();
Then I have test.js which contains:
function test(code){
var uis = MainUI.getSingleton();
retValue = new Function("ui", "use strict'" + code)(uis);
}
This is all run from index.html which contains:
<html>
<script type="text/javascript" src="MainUI.js"></script>
<script type="text/javascript" src="test.js"></script>
<body onload="test('ui.makeSomethingHappen();');">
</body>
</html>
But when I call
test("ui.makeSomethingHappen();");
or even
test("console.log('NARF!');");
I get an exception with the message
MainUI is not defined
The singleton accessor and the MainUI works in all my code outside of "new Function()", so I know it's working (even if I made typographical error producing the minimal test).
So I'm hoping someone can tell me how I can give the code inside the Function access to the class definitions outside.
Make sure that the MainUI.js script is referenced correctly and that it is referenced prior to the test.js script that will use it.
This is based on the scala-js-example-app from GitHub.
I have a function that I want to define in Javascript and is not already defined by the Scala.js library.
In my copy of the ScalaJSExample.scala file, I have:
object Mine extends js.Object {
def foobarfoo():String = ??? //this is just a simple example and I know this can be done completely in Scala, but just go with it.
}
object ScalaJSExample extends js.JSApp {
def main(): Unit = {
val paragraph = dom.document.createElement("p")
paragraph.innerHTML = "<strong>It works!" + Mine.foobarfoo() + ".</strong>"
dom.document.getElementById("playground").appendChild(paragraph)
}
/** Computes the square of an integer.
* This demonstrates unit testing.
*/
def square(x: Int): Int = x*x
}
Now I want to define foobarfoo in Javascipt.
I've tried writing this in a javascript file:
function foobarfoo() { return "Hello, World!"; }
and that didn't work, so I tried a more Scala.js syntax:
var Mine = {
foobarfoo: function() { return "Hello, World!"; }
}
and many other variations, but none of these worked and I couldn't get "Hello, World!" to appear on the webpage after compilation.
How should I write foobarfoo() so that I get the right result?
Resuming the discussion, the problem was the inclusion order: The OP added the custom JavaScript functions after the Scala.js code:
<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>
<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>
Therefore, the requested function couldn't be found. Putting myscript.js to the top solved the issue:
<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>
I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.
I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>