I master the method by which content (text) is uploaded to a web page from a json file. Content before being placed on the page is compiled with handlebars templates. Javascript files with logic for all of this, written as commonjs modules copied using browserify. I start the page from a local http server installed using NodeJS npm.
The test case worked, when I tried to apply this method to the finished web page, something was wrong. So as soon as I master this method, I will be grateful for the help.
So, there is:
- webContent.json - it stores the content (text) that will be loaded into index.html
- contentProcess.js - contains a function that sends an Ajax request to webContent.json , parses, compiles with the
Handlebars Templateand puts the content on the page (using innerHTML) - addContent.js - calls a function from contentProcess.js , substituting the necessary variables. contentProcess.js and addContent.js are written and linked as
commonjsmodules. Then they are compiled into main.js usingbrowserify. - index.html - contains the
Handlebars Template,div, where the content and link to main.js will be placed
The test version worked. When I tried to implement this approach with an existing web page, something was not working. The console complains about part of the logic from main.js , which was originally part of the function in contentProcess.js , which worked without problems in the test example (below are two screenshots): 
What is the problem here (did this function work in the test version)?
In snippet scattered code fragments of all the above files (separated by comments):
/* --- webContent.json --- */ { header: "Powerful business", describtion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis neque, sodales a faucibus at, viverra luctus urna. Suspendisse dignissim neque dui, in tincidunt arcu.' } /* --- contentProcess.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 you can check status of your request*/ xhr.onload = function () { if (xhr.status === 200) { callback(JSON.parse(xhr.responseText)); } else { alert(xhr.statusText); } }; /*Using onerror event handler you can check error state, if your 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); }) } /* --- addContent.js --- */ var addContent = require('./contentProcess'); addContent("../data/webContent.json", "main-template", 'maintext'); /* --- main.js (ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ addContent.js Ρ ΠΏΠΎΠΌΠΎΡΡΡ browserify) --- */ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ var addContent = require('./contentProcess'); /*MAINBLOCK*/ addContent("../data/webContent.json", "main-template", 'maintext'); },{"./contentProcess":2}],2:[function(require,module,exports){ 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 you can check status of your request*/ xhr.onload = function () { if (xhr.status === 200) { callback(JSON.parse(xhr.responseText)); } else { alert(xhr.statusText); } }; /*Using onerror event handler you can check error state, if your 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); }) } },{}]},{},[1]); <!-- ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΠΈΠ· index.html (Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ bootstrap, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅) --> <div id="maintext"> </div> <script id="main-template" type="text/x-handlebars-template"> {{{header}}} {{{describtion}}} {{{sentence3}}} </script> 
