CODEWITHSUNDEEP
javascriptjqueryajax
Carcigenicate
Carcigenicate

Reputation: 45806

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?

Upvotes: 2

Views: 1130

Answers (1)

adeneo
adeneo

Reputation: 318302

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.");
    });
}

Upvotes: 1

Related Questions