Problem
(After posting this question, I came a little closer to resolving it, but I'm still stuck. Please check the update at the end of the question).
I have a website that was a template using Mustache.js. When a site runs locally, it works fine. Templates load, Mustache replaces the mustache tags with the given data, and the page displays as expected.
When a site starts from my (school) server, it develops an odd problem. For some reason, Mustache.render replaces all mustache tags in my template with nothing (as in empty lines). Obviously, this causes my site to load very incorrectly.
What have I tried to diagnose?
Using console logging, I tracked downloaded templates and what Mustache produces. The following are the results:
Data for connecting to templates (siteData.json):
{ "headerClasses": "mainHeader", "headerTitle": "Uromastyces Fact Site", "sideBarClasses": "mainSideBar", "sideBarImgClasses": "sideBarImage", "sideBarImgAlt": "A Picture of Pascal", "sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg", "navBarClassNames": "navBar", "navLinks": [ { "name": "Home", "link": "index.html" }, { "name": "Enclosure", "link": "enclosure.html" }, { "name": "Diet", "link": "diet.html" }, { "name": "Behavior and Life", "link": "behaviorAndLife.html" }, { "name": "About Me", "link": "aboutMe.html" } ], "uniqueBodyClasses": "uniqueBody", "uniqueBodyContent": "DEFAULT UNIQUE BODY", "footerClasses": "mainFooter", "authorWrapperClasses": "footerAuthor footerWrapper", "dateModifiedWrapperClasses": "footerModified footerWrapper", "authorName": "Brendon Williams", "lastModifiedDate": "DEFAULT LAST MODIFIED DATE", "indexNavBarClasses": "indexNavBar" }
Body Template (BodyTemplate.mustache):
<header class="{{headerClasses}}"> <h1> {{headerTitle}} </h1> </header> <aside class="{{sideBarClasses}}"> <img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}"> <nav class="{{navBarClassNames}}"> <ul> {{#navLinks}} <li><a href="{{link}}" tabindex="1">{{name}}</a></li> {{/navLinks}} </ul> </nav> </aside> <section class="{{uniqueBodyClasses}}"> <div id="indexDiv"> <div id="indexContents"></div> </div> {{> uniqueBodyContent}} </section> <footer class="{{footerClasses}}"> <span class="{{authorWrapperClasses}}"> Author: {{authorName}} </span> <span class="{{dateModifiedWrapperClasses}}"> Last Modified: {{> lastModifiedDate}} </span> </footer> <script src="./js/Indexer.js"></script>
Here where he is different. After running the specified files through Mustache.render locally, here are the results:
<header class="mainHeader"> <h1> Uromastyces Fact Site </h1> </header> <aside class="mainSideBar"> <img class="sideBarImage" src="../images/pascal-cropped-shrunk.jpg" alt="A Picture of Pascal"> <nav class="navBar"> <ul> <li><a href="index.html" tabindex="1">Home</a></li> <li><a href="enclosure.html" tabindex="1">Enclosure</a></li> <li><a href="diet.html" tabindex="1">Diet</a></li> <li><a href="behaviorAndLife.html" tabindex="1">Behavior and Life</a></li> <li><a href="aboutMe.html" tabindex="1">About Me</a></li> </ul> </nav> </aside> <section class="uniqueBody"> <div id="indexDiv"> <div id="indexContents"></div> </div> <h4>Introduction</h4> <h5>Hi...</h5> <p> I created this site to... </p> <p> ... </p> <p> ... </p> <h4>Contact Me</h4> <p> Want to send me a message? Use the form below: </p> <form enctype="text/plain" method="post" action="mailto: brendonw5@gmail.com "> <label class="contactLabel">Subject:</label> <input class="contactInput" type="text" name="subject"> <label class="contactLabel">Body:</label> <input class="contactInput" type="text" name="body"> <input type="submit" name="submit" value="Submit"> </form> </section> <footer class="mainFooter"> <span class="footerAuthor footerWrapper"> Author: Brendon Williams </span> <span class="footerModified footerWrapper"> Last Modified: 15.12.26 </span> </footer> <script src="./js/Indexer.js"></script>
As I expected. All mustache tags have been removed and replaced with the corresponding data from JSON
However, here are the results when starting from my school server (same code):
<header class=""> <h1> </h1> </header> <aside class=""> <img class="" src="" alt=""> <nav class=""> <ul> </ul> </nav> </aside> <section class=""> <div id="indexDiv"> <div id="indexContents"></div> </div> <h4>Introduction</h4> <h5>Hi...</h5> <p> I created this site to... </p> <p> ... </p> <p> ... </p> <h4>Contact Me</h4> <p> Want to send me a message? Use the form below: </p> <form enctype="text/plain" method="post" action="mailto: brendonw5@gmail.com "> <label class="contactLabel">Subject:</label> <input class="contactInput" type="text" name="subject"> <label class="contactLabel">Body:</label> <input class="contactInput" type="text" name="body"> <input type="submit" name="submit" value="Submit"> </form> </section> <footer class=""> <span class=""> Author: </span> <span class=""> Last Modified: 15.12.26 </span> </footer> <script src="./js/Indexer.js"></script>
Note that all mustache tags were simply removed instead of being replaced with data.
I know that everything loads fine, so this is not a problem:
While I have been using my mustache for about a week, I have no idea how to diagnose such a problem. The above snippets were the result of a console statement, so I checked the input included in Mustache.render and it all checks. And again, this only happens with remote placement.
Here's my rendering module (templateLoader.js) (the console log fragment in the middle of renderPage is the source of the above fragments via Developer Cosole):
var TemplateLoader = { /** * Draws the templated page, along with the given unique body. * * @param {string|Node} uniqueBodyElement Data representing the unique body to display. Should either be a string * of HTML, or a DOM element containing the HTML. * @param {string} lastModifiedDate The date that the page was last modified. */ renderPage: function(uniqueBodyElement, lastModifiedDate) { var data; var headTemplate; var bodyTemplate; var articleTemplate; //Wait until all data is available $.when( $.get("./templates/siteData.json", function(d){ data = d }), $.get("./templates/HeadTemplate.mustache", function(hT){ headTemplate = hT }), $.get("./templates/BodyTemplate.mustache", function(bT){ bodyTemplate = bT }), $.get("./templates/ArticleTemplate.mustache", function(aT){ articleTemplate = aT }) ).done(function() { Helpers.doWithMustache(function() { var partial = TemplateLoader.getTemplatePartial(uniqueBodyElement); partial.lastModifiedDate = lastModifiedDate; var renderedHead = Mustache.render(headTemplate, data); var renderedBody = Mustache.render(bodyTemplate, data, partial); var renderedArticleBody = Mustache.render(articleTemplate, {}, { articleBody: renderedBody }); console.group(); console.log("Data: \n" + data); console.log("Body Template: \n" + bodyTemplate); console.log("Article Template: \n" + articleTemplate); console.log("Rendered Body: \n" + renderedBody); console.log("Rendered Article Body: \n" + renderedArticleBody); console.groupEnd(); $('head').append(renderedHead); $('body').html(renderedArticleBody); console.log("Templates Loaded."); }); }).fail(function() { console.error("Failed to fetch templates or site data.") }); }, getTemplatePartial: function(templateData) { var uniqueBodyString; if (typeof templateData === "string") { uniqueBodyString = templateData } else { uniqueBodyString = templateData.innerHTML; } return { uniqueBodyContent: uniqueBodyString }; } }; var Helpers = { doWithMustache: function(f) { $.getScript("./js/mustache.min.js", function() { f(); }).fail(function() { console.error("Failed to fetch mustache script.") }); } };
And here are the full results of the magazine:
Data: { "headerClasses": "mainHeader", headerTitle: "Uromastyces Fact Site", "sideBarClasses": "mainSideBar", "sideBarImgClasses": "sideBarImage", "sideBarImgAlt": "A Picture of Pascal", "sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg", "navBarClassNames": "navBar", "navLinks": [ { "name": "Home", "link": "index.html" }, { "name": "Enclosure", "link": "enclosure.html" }, { "name": "Diet", "link": "diet.html" }, { "name": "Behavior and Life", "link": "behaviorAndLife.html" }, { "name": "About Me", "link": "aboutMe.html" } ], "uniqueBodyClasses": "uniqueBody", "uniqueBodyContent": "DEFAULT UNIQUE BODY", "footerClasses": "mainFooter", "authorWrapperClasses": "footerAuthor footerWrapper", "dateModifiedWrapperClasses": "footerModified footerWrapper", "authorName": "Brendon Williams", "lastModifiedDate": "DEFAULT LAST MODIFIED DATE", "indexNavBarClasses": "indexNavBar" } templateLoader.js (41,14) Body Template: <header class="{{headerClasses}}"> <h1> {{headerTitle}} </h1> </header> <aside class="{{sideBarClasses}}"> <img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}"> <nav class="{{navBarClassNames}}"> <ul> {{#navLinks}} <li><a href="{{link}}" tabindex="1">{{name}}</a></li> {{/navLinks}} </ul> </nav> </aside> <section class="{{uniqueBodyClasses}}"> <div id="indexDiv"> <div id="indexContents"></div> </div> {{> uniqueBodyContent}} </section> <footer class="{{footerClasses}}"> <span class="{{authorWrapperClasses}}"> Author: {{authorName}} </span> <span class="{{dateModifiedWrapperClasses}}"> Last Modified: {{> lastModifiedDate}} </span> </footer> <script src="./js/Indexer.js"></script> templateLoader.js (42,14) Article Template: <section> {{> articleBody}} </section> templateLoader.js (43,14) Article Template: <section> {{> articleBody}} </section> templateLoader.js (43,14) Rendered Article Body: <section> <header class=""> <h1> </h1> </header> <aside class=""> <img class="" src="" alt=""> <nav class=""> <ul> </ul> </nav> </aside> <section class=""> <div id="indexDiv"> <div id="indexContents"></div> </div> <h4>Introduction</h4> <h5>Hi, I'm Brendon, and I'm a long-time reptile and Uromastyx owner.</h5> <p> I created this site to act as a centralized collection of facts on Uromastyces. The conditions that Uromastyces should be housed in are quite different than most other reptiles, so it can be confusing to new owners as to what the correct conditions are, and what they can be fed. </p> <p> To the best of my ability, I will reference external sites and provide links to the original information. Note though that new information about Uromastyces may come to light after the publication of this site, so I can't guarantee that this information will forever remain in-date, and that contradictory information won't appear later; although I'll do my best to evaluate all of the sources I use. </p> <p> In the top-left of every page is my current Uromastyx, <em>Pascal</em>. She was injured in-transit on the way to my Dad wholesale warehouse (her right eye was damaged) and was deemed unsellable, so I adopted her to ensure that she can still live a long-life. Besides her lack-of a left eye, she so healthy, you'd never know that she injured (except when she walks in circles looking for food). </p> <h4>Contact Me</h4> <p> Want to send me a message? Use the form below: </p> <form enctype="text/plain" method="post" action="mailto: brendonw5@gmail.com "> <label class="contactLabel">Subject:</label> <input class="contactInput" type="text" name="subject"> <label class="contactLabel">Body:</label> <input class="contactInput" type="text" name="body"> <input type="submit" name="submit" value="Submit"> </form> </section> <footer class=""> <span class=""> Author: </span> <span class=""> Last Modified: 15.12.26 </span> </footer> <script src="./js/Indexer.js"></script></section> templateLoader.js (45,14) Templates Loaded. templateLoader.js (51,14)
Any guidance here would be appreciated.
Update:
So, while debugging it, I discovered a potential source of the problem, but I have no idea how to solve it. When debugging locally, the data object (inside renderPage ) interprets Edge as a JS object and lists each of its attributes. However, when it is deleted, the data object is interpreted as a String (local on the left, remote on the right):
So the problem is that data.json not reading correctly on the server side.
I should note that I use Windows locally, but the school server is "Apache / 2.2.3 (Red Hat)" (according to the Edge Network tab). I changed the return from \r\n to \n to adhere to Unix standards, but didn't change anything.
I ran the JSON file through all the top JSON authentication and it checks them at all, so this is not a formatting issue.