Getting a 404 despite having the right path, why?

[antonioOrtiz]

The following setup gets a jQuery plugin mixitup working perfectly.

"browser": {
        "mixitup": "./app/bower_components/mixitup/src/jquery.mixitup.js",
        "jquerymustache": "./app/bower_components/jquery-Mustache/src/jquery.mustache.js"
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "browserify-shim": {
        "mixitup": {
            "exports": "mixitup",
            "depends": [
                "jquery:jQuery"
            ]
        },
        "jquerymustache": {
            "exports": "Jquerymustache",
            "depends": [
                "jquery:jQuery",
                "mustache:mustache"
            ]
        }
    },

However, when I try to apply the same convention to jquery-Mustache, I am not able to get my templates fetch:

 "browser": {
   "jquerymustache": "./app/bower_components/jquery-Mustache/src/jquery.mustache.js"
  }

and

"jquerymustache": {
      "exports": "Jquerymustache",
      "depends": [
        "jquery:jQuery",
        "mustache:mustache"
      ]
    }

I don't get an error from the terminal, (that would prove the package.json setup is kosher) but I do get this error from the console:

Which points to this:

This is my app.js file, feel this is the most relevant information:

var $ = jQuery = require('jquery');
var mixitup = require('mixitup');
var Jquerymustache = require('jquerymustache');
var mustache = require('mustache');

And the function which is fetching the template.

function templateLoader(e) {
        var doc = document,
            event = EventUtility.getEvent(e),
            target = EventUtility.getTarget(event);
        $.Mustache.options.warnOnMissingTemplates = true;

        $.Mustache.load('templates/index.html')
            .fail(function() {
                $('#overlay').append('Failed to load templates from <code>templates.htm</code>');
            })
            .done(function() {
                var output = $('#overlay');
                $('body').mustache('templateID');
            });
    }

And the file path for good measure, to prove the path in the function is correct:

[jonnyreeves]

Hey @antonioOrtiz, sorry to hear you are having issues.

The console error message you attached, and source code that you pasted shows that the templates are being loaded from templates/index.html (via: $.Mustache.load('templates/index.html')).

However, the directory tree screenshot you posted show that your templates reside in public/js/templates/index.html; could you try modifying your code to load them from there instead:

$.Mustache.load('js/templates/index.html')

[antonioOrtiz]

Hey Jonny! Thanks for your help!
I tried $.Mustache.load('js/templates/index.html') but that didn't work. However, just as a test, I put the template in the same directory (app.js and index.html live in the same directory, js in this case), that didn't work either. But in the console, strangely I get a messsage indicating it's ok. (The load request)

Yet as you can see there is no template in the DOM...

This is the template markup, that's the only thing I can think of is wrong,

<script id="templateID" type="text/html">
<div id="overlay">
    <div id="container" class="container">
        <div class="row">
            <div class="twelve columns">
               <div class="modal-container">
                    <div id="modal" class="modal-animation">
                        <p>Bitters pop-up authentic actually, next level fashion axe ethical lomo cold-pressed.  Pickled Wes Anderson +1 retro squid, chia cray umami cred dreamcatcher selfies.
                        <a id="appButton" class="button button-primary modal-button">lets get started!</a>
                        </p>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>

</script>

but now I feel I am grasping at straws. Do you think it's cause I am using browserify-shim. I have talked to guys who made browserify-shim at they don't think it is, as I am not getting errors regarding bs. I ask because I am using jquery-Mustache in another project at it works perfectly?

https://github.com/antonioOrtiz/accessibility_project

<script id="templateID" type="text/html">

This app will go through some of your markup to determmine if it could be more accessible. We will start by checking the alt tags on your images, seeing if they exist, or if the tags are empty!
lets get started!

</script>

[antonioOrtiz]

Hey Jonny,

I also went back and tried to implement a simpler instance, based on your examples:

jQuery(document).ready(function($) {

function templateLoader() {
    $.Mustache.load('single-template.html')
        .done(function() {
            var output = $('body');
            output.append($.Mustache.render('single-template', {
                name: "Dave"
            }));
        });

}
var flimFlam = document.getElementById('Container');
EventUtility.addHandler(flimFlam, 'click', templateLoader);

});

And that didn't work...
I also checked the app.js file to see the if the jquery-Mustache.js and mustache.js and being distilled in there (they are). I wonder if it's a jQuery name spacing/alias issue?

Also I noticed you had a TUT for require js, you think my browserify-shim needs fixing?

"main": "./app/_js/app.js",
"browser": {
    "mixitup": "./app/bower_components/mixitup/src/jquery.mixitup.js",
    "jquerymustache": "./app/bower_components/jquery-Mustache/jquery.mustache.js"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"browserify-shim": {
    "mixitup": {
        "exports": "mixitup",
        "depends": [
            "jquery:jQuery"
        ]
    },
    "jquerymustache": {
        "depends": [
            "jquery:jQuery",
            "mustache:mustache"
        ]
    }
},

And this is how I am requiring them:

var $ = jQuery = require('jquery');
var mixitup = require('mixitup');
var Mustache = require('jquerymustache');
var mustache = require('mustache');

And this is the concatenated app.js file that gets spit out to the public/js
app

Thanks so much!!!