Help please find the error in the code.
We have:
test.json - contains the content (text) that will be uploaded to the web page.
test.js - contains a function that sends an Ajax request to test.json, parses, compiles with Handelbars Temlate and puts content into an HTML page (using innerHTTML).
addcontent.js - a javascript file that calls a function from test.js
index.html - c contains the Handlebars Template, Div, where the content and link (link) to addcontent.js will be placed.
Everything works if there is a link directly to test.js in index.html . Everything works if you wrap the code in test.js in a function with variables and call it in the same file.
But when I try to call this function in addcontent.js , connecting addcontent.js and test.js as commonJS modules, it does not work (by running the local server, I see an empty page at localhost: 8080).
I do not see an error in the syntax. Checked files with online validators. Checked through the developer console, swears at the incomprehensible syntax commonjs: ReferenceError: module is not defined ReferenceError: require is not defined
I just learn commonjs, downloaded the library via npm, connected /node_modules/commonjs/lib/system.js to index.html (right?) - the result is the same.
Help please deal with this test example, I only master the modular method.
PS I use NodeJS, NPM, in the end I will merge all js files using browserify.
https://jsfiddle.net/pf33u8km/
/* test.js */ module.exports = function(jsonDir, templId, finId){ function sendGet(callback) { /* create an AJAX request using XMLHttpRequest*/ var xhr = new XMLHttpRequest(); /*reference json url taken from: http://www.jsontest.com/*/ /* Specify the type of request by using XMLHttpRequest "open", here 'GET'(argument one) refers to request type "http://date.jsontest.com/" (argument two) refers to JSON file location*/ xhr.open('GET', jsonDir); /*Using onload event handler to check status of the request*/ xhr.onload = function () { if (xhr.status === 200) { callback(JSON.parse(xhr.responseText)); } else { alert(xhr.statusText); } }; /*Using onerror event handler to check error state, if the request failed to get the data*/ xhr.onerror = function () { alert("Network Error"); }; /*send the request to server*/ xhr.send(); } //For template-1 var dateTemplate = document.getElementById(templId).innerHTML; var template = Handlebars.compile(dateTemplate); sendGet(function (response) { document.getElementById(finId).innerHTML += template(response); }) } /* test.json */ { "time": "03:47:36 PM", "milliseconds_since_epoch": 1471794456318, "date": "08-21-2016-123", "test": "lalala 123" } /* addcontent.js */ var addContent = require('./test'); addContent("json/test.json", "date-template", 'testData'); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="handlebars-v4.0.5(2).js"></script> </head> <body> <!-- template-1 --> <div id="testData"></div> <script id="date-template" type="text/x-handlebars-template"> Date:<span> <b>{{date}}</b> </span> <br/> Time: <span><b>{{time}}</b> </span> </script> <script type="text/javascript" src="node_modules/commonjs/lib/system.js"></script> <script type="text/javascript" src="addcontext.js"></script> </body> </html> Above, I put the code from test.json and addcontent.js, separated by a comment, just to make it easier to see the code in all files.
