Carcigenicate Carcigenicate - 4 years ago 325
Javascript Question

jQuery's `getScript` fails. The path is correct, and the script was downloaded properly.

I wrote up a website using Mustache.js. The templates are loaded using AJAX via jQuery.

When I was running the website locally and testing, everything loaded fine. When I uploaded the site to my school server however, jQuery's

getScript
is reporting a failure to load
mustache.min.js
.

Whenever I need to run render a template, I'm using the following helper function:

doWithMustache: function(f) {
$.getScript("./js/mustache.min.js", function() {
f();

}).fail(
console.error("Failed to fetch mustache script.");
);
}


and am using it like:

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, data, { articleBody: renderedBody });

$('head').append(renderedHead);
$('body').html(renderedArticleBody);

console.log("Templates Loaded.");
});

}).fail(function() {
console.error("Failed to fetch templates or site data.")
});

}


Locally, this worked as expected. After uploading it however, I'm getting console errors telling me that it "Failed to fetch mustache script". Unfortunately,
fail()
doesn't seem to report any errors, so I have no idea what's causing the problem.

The obvious issue would be that the path is wrong, but when I checked Edge's "Network" tab in "Developer Tools", everything, including the mustache script, is being loaded correctly:

enter image description here

I also verified this by changing the load path to something I knew was wrong. Not only did I get the failure to fetch error, I also got "Bad URI" errors.

So, I know the path is correct, but it still won't load the script.

Does anyone know what the problem may be, or how to get closer to finding it?

Answer Source

You forgot the anonymous function reference, right now you're always running the console.log and returning the result to fail() (which would be undefined).

Change it to

doWithMustache: function(f) {
    $.getScript("./js/mustache.min.js", function() {
        f();
    }).fail(function() {
        console.error("Failed to fetch mustache script.");
    });
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download