I have problem when I try to load JSX file via native js function and script.onload event.
In my HTML file inside HEAD tag I have only one script to load:
<script src="js/01_jquery-1.12.2.min.js" defer></script>
Then in body I have this script which will load all other JS and JSX files
window.onload = function onLoad() {
function getScriptFile(inFile, scriptType, qname) {
....
}
function loadJsQ(inObj) {
....
}
// lib js
loadJsFiles({file: 'js/jquery-ui.min.js'});
loadJsFiles({file: 'js/bootstrap.js'});
loadJsFiles({file: 'js/babel-core-5-8-34-browser.js'});
loadJsFiles({file: 'js/react-with-addons.js'});
loadJsFiles({file: 'js/react-dom.js'});
//class app
loadJsFiles({file: 'classes/User.js'});
loadJsFiles({file: 'classes/MainApplication.js'});
//jsx
loadJsFiles({file: 'jsx/mainReact.jsx', type: "text/babel"});
//
$(document).dequeue('queueLoadJsFiles');
};
Function inside window.onload are:
function getScriptFile(inFile, scriptType, qname) {
var scriptType = scriptType || false;
var script = document.createElement('script');
if(scriptType){
script.type = scriptType;
}
document.head.appendChild(script);
script.onload = script.onreadystatechange = function( _, isAbort ) {
console.log("script",script);
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort) {
console.log("Script is loaded", inFile);
setTimeout(function () {
$(document).dequeue(qname);
}, 100)
}
}
};
script.src = inFile;
}
Next function is:
function loadJsQ(inObj) {
var qname = "queueLoadJsFiles";
$(document).queue(qname, function() {
var inFile = inObj.file,
inType = inObj.type || false;
getScriptJQueryQueue(inFile, inType, qname);
});
}
Everything loaded and check via console, but jsx is not executed.
My MainReact.jsx file is
//file jsx/mainReact.jsx
"use strict";
console.log("is ok in JSX???");
const SomeComponent = React.createClass({
....
});
const MainApp = React.createClass({
....
});
{
ReactDOM.render(
<MainApp />,
document.getElementById('mainAppCont')
);
let app = new MainApp();
}
My class files are
//file classes/User.js
class User{
constructor(){...}
...
}
And
//file classes/MainApplication.js
class MainApplication{
constructor(){...}
...
}
Before ask My Question, I have to say, When I load all js and jsx files via HEAD, it works.
My question is, why I can not load in this way via getScriptFile. Everything load except jsx file? Can you help me to solve this problem. I need to load via getScriptFile.
After all, HEAD is looking like this:
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
<title>Title</title>
<!-- CSS LIBS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/flags.css">
<!-- JS LIBS -->
<script src="js/jquery-1.12.2.min.js" defer=""></script>
<!-- added via getScript -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/babel-core-5-8-34-browser.js"></script>
<script src="js/react-with-addons.js"></script>
<script src="js/react-dom.js"></script>
<script src="classes/User.js"></script>
<script src="classes/MainApplication.js"></script>
<script type="text/babel" src="jsx/mainReact.jsx"></script>
</head>
Line of code in JSX file, at top console.log("is ok in JSX???"); will not be executed...
All files are in place, and there are no any error in console.
:(
Thank you in advance!
Related
I received an HTML file with 2 scripts in the head and I'm figuring out the best way to execute them in my react app. The first script load socket.io.js and the second contains the JS code for the upload system:
Original code
//...
<head>
<link rel="stylesheet" type="text/css" href="/css/upload.css" />
<script src="/js/socket.io.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect("/", { path: "/app/socket.io" });
var SelectedFiles = [];
var SelectedFile = 0;
var paused = 0;
var FReader;
var dat;
window.addEventListener("load", Ready);
function Ready() {
//...
}
function handleUploads() {
//...
}
function StartUpload(Name, size) {
FReader.onload = function(evnt) {
socket.emit("Upload", {
//...
});
};
socket.emit("Start", {
//...
});
}
function getBlocks(data) {
//...
}
socket.on("MoreData", function(data) {
//...
});
function UpdateBar(percent) {
//...
}
socket.on("Done", function(data) {
//...
});
function Refresh() {
location.reload(true);
}
</script>
</head>
<body>
//...
First of all I moved the JS code content in a new JS file named "upload-script.js" and then used "React Helmet" module (https://www.npmjs.com/package/react-helmet) in order to load them in document head during component rendering:
My code
return (
<Row className="mb-4">
<Helmet>
<link rel="stylesheet" type="text/css" href="/css/upload.css" />
<script src="/js/socket.io.js" />
<script src="/upload-script.js" />
</Helmet>
<Colxx xxs="12">
Checking on browser the module correctly adds the scripts in the document head, but come out the following error:
./src/containers/form-validations/upload-script.js
Line 2:14: 'io' is not defined no-undef
Line 124:3: Unexpected use of 'location' no-restricted-globals
The browser cannot compile the app because in the JS file "upload-script.js" contains variables that are only defined in the first script.. how can I solve it? Is this a good way to add the scripts in a React app?
Any suggestions or guidance would be greatly appreciated. Thank you in advance.
I added an event listener to my website which should add a date, time and device-id to the website. These information are included in the filenames of some files located in a directory at the same level as my index.html.
Directory Structure:
- audiofiles
-- date_time_device.wav
-- date2_time2_device2.wav
- scripts
-- scripts.js
- Home.html
Within the head of Home.html I'm calling a addContent() (located in scripts.js) which includes the addEventListener().
This works if I'm inserting hardcoded strings, so it seems that reading from the directory does not work.
It would be great if anybody could steer me into the right direction. Thanks!
Head of Home.html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/wavesurfer.js"></script>
<script type="text/javascript" src='scripts/scripts.js'> </script>
<script type="text/javascript" src="js/wavesurfer.js"></script>
<script>
addContent();
</script>
<title>Home</title>
</head>
scripts.js:
function addContent() {
document.addEventListener("DOMContentLoaded", function(event) {
var fs = require('fs');
const files = fs.readdirSync('path/to/audiofiles');
for (i=0;i<3;i++) {
var date = files[i].slice(0,10);
var time = files[i].slice(11,19);
var device = files[i].slice(20,-4);
var TheInnerHTML ="";
TheInnerHTML += "<tr><td> blabla" + 3 + " " + String(date)+"</td><td>"+String(time)+"</td></tr>"+String(device)+"</td></tr><br>";
}
document.getElementById("TheBody").innerHTML = TheInnerHTML;
});
}
I've been having trouble with Firefox not executing JavaScript files that were loaded dynamically via an external script.
Let me explain.
I have the following HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Restive.JS</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="assets/js/load.js"></script>
</head>
<body>
<h1>Loading JavaScript</h1>
</body>
</html>
Inside my load.js file, I have the following code:
document.addEventListener("DOMContentLoaded", function() {
function loadScript(url) {
var script = document.createElement("script");
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var list_arr = ['assets/js/test1.js', 'assets/js/test2.js'];
for (var i = 0; i < list_arr.length; i++) {
loadScript(list_arr[i]);
}
});
And inside test1.js and test2.js, I have console.log('test1.js is loaded!'); and console.log('test2.js is loaded!');.
The problem is that test1.js and test2.js are loaded (I can see both files in the <head> via inspection), but they are never executed (because no messages appear in the console log).
However, when I change the format of script reference in my original HTML by inlining the JavaScript i.e. changing from this:
<script type="text/javascript" src="assets/js/load.js"></script>
to this:
<script>
document.addEventListener("DOMContentLoaded", function() {
function loadScript(url) {
var script = document.createElement("script");
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var list_arr = ['assets/js/test3.js', 'assets/js/test4.js'];
for (var i = 0; i < list_arr.length; i++) {
console.log('i = ' + i);
loadScript(list_arr[i]);
}
});
</script>
Then the scripts are loaded and executed.
I don't see this behaviour in Chrome or Safari, only Firefox. Also, inlining is not an option because this functionality is built-in to a library that users will have to reference via an external link.
Is this a problem that is fixable?
EDIT
I'm on a Mac OSX 10.10.5 using Firefox 46.0.1
I am creating an O365 app and I have 2 .aspx files, when the user clicks on the O365 mail app, I want each of these pages to be loaded based on the subject of the mail.
Scenario 1: Mail subject contains '#'
result: load page1
Scenario 2: Mail subject does not contain '#'
result: load page2
I have tried having an intermediate .js file where I have written the logic,
but when I do window.location = "path_to_aspx_file",
only the html is loaded but the js files do not run.
My current implementation:
I have LandingLogic.js
(function () {
"use strict";
//The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sub = item.subject;
if (sub.indexOf("some text") > -1) {
window.location = "http://localhost:51776/File1.aspx";
}
else {
window.location = "http://localhost:51776/File2.aspx";
}
});
};
})();
After a bit of fumbling around.
I am able to navigate to each of these files now, but I am not sure how to access the mail subject from File1.aspx and File2.aspx.
Did you initialize the Office context before you using Office JavaScript API to get the subject? To redirect the HTML page easily, we can include the JavaScript like below:
Home.js:
/// <reference path="../App.js" />
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
RedirectHTMLPage();
});
};
function RedirectHTMLPage() {
var subject = Office.context.mailbox.item.subject;
if (subject.indexOf("#") != -1) {
window.location.href = "https://localhost:44300/page1.aspx";
} else {
window.location.href = "https://localhost:44300/page2.aspx";
}
}
})();
The HTML page for redirecting:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
I have tried having an intermediate .js file where I have written the logic, but when I do window.load = "path_to_aspx_file", only the html is loaded but the js files do not run.
Would you mind sharing the detail you using the “window.load”?
Fei Xue answer is correct . if you want to get subject from file2.aspx , add office.js reference and access subject same as file1.aspx inside the Office.initialize event
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
I am getting "Uncaught ReferenceError: isApp is not defined" in the console,
I had tried to find solution for this error from long morning but didn't able to get much, both of my isApp.js and mApp.js are saved in folder named as "js", can someone please help me to get out of this thing....thanks in advance
//"......isApp.js file code starts from here..............."
var iA = function () {
var t = this;
this.user;
var IsInvite = false;
this.serverUrl = someLocalhostUrl;
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initialize = function () {
t.getUser();
var pk = typeof t.user;
if (!(typeof t.user === 'object')) {
t.user = null;
t.setUser();
}
}();
};
var isApp = new iA();
//"......isApp.js file code endss here..............."
//"......mApp.js file code starts from here..............."
var mApp = function () {
//var PostUrl = "http://localhost:52015/"
var PostUrl = isApp.serverUrl + "/";
var t = this;
var u = {};
this.ph, this.loc;
var user, Email, UserName;
var LoggedIn;
this.initiate = function () {
u = isApp.getUser();
if (u && u.LoggedIn) {
if (window.location.href.indexOf("index") == -1)
$.mobile.changePage("index.html#p-start");
//window.location = "index.html#p-home";
}
};
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initiate();
};
m = new mApp();
//"......mApp.js file code ends here..............."
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css starts here-->
<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<!--css ends here-->
<!--js starts here-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.signalR-2.2.0.min.js"></script>
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
<script src="js/home.js"></script>
<!--js ends here-->
<!--<script>
$(function () {
$('.image').click(function () {
alert("selection needed");
});
document.getElementById("startDate").valueAsDate = new Date();
});
</script>-->
</head>
<body>
<div data-role="page" id="p-start">
<div data-role="main" class="ui-content ui-responsive ui-body-a">
<div class="align-center">
<h3>Its our Rocking app</h3>
<a href="#p-login">
<img src="images/temp-logo.jpg" class="logo" />
</a>
</div>
</div>
</div>
</body>
</html>
You load your mApp.js file before your isApp.js file and both scripts are executed right away, so naturally the function isn't defined yet when mApp.js is executed.
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>