I have the following code for a potential handlbars.js tmpl. It compiles correctly at tryhandlebarsjs.com however when I attempt to open the file independently in a browser the default text in the div is the only thing that renders. I know my .json call is wrong but I cannot figure out where.

Thanks for any help.

<div id="handlebarsTmplPlaceholder">Will be replaced with handlebars.js.</div>

        <!-- Start of bare bones handlebars.js tmpl -->
        <script id="handlebars-Template" type="text/x-handlebars-template>

            <div id="entry">
                    {{#if image_url}}
                        <figure id="figure1"><img src="{{image_url}}"></figure>

                {{#if title}}<h1>{{title}}</h1>{{/if}}
                    {{#if subtitle}}<h2>{{subtitle}}</h2>{{/if}}

                {{#if article}}<article id="article1">{{article}}</article>{{/if}}

                {{#if aside}}<aside id="aside1">{{aside}}</aside>{{/if}}

                <button id="readMore"><a id="readMoreButton" href="http://www.fleetwoodmax.com">read more</a></button>
                    <!-- div id="result"></div>   --> 

        <!-- First attempt at accessing json data -->

        <!--<script type="text/javascript">
        $(document).ready(function () {
            document.addEventListener("DOMContentLoaded", function() {

                //Get the contents from the script block
                var source = document.querySelector("#handlebars-Template").innerHTML;

                //Compile into a template
                template = Handlebars.compile(source);

                document.querySelector("#readMoreButton").addEventListener("click", function() {

                    var rmore = document.querySelector("#readMoreButton").value;

                    var html = template({"#readMoreButton": "#"});

                    document.querySelector("#result").innerHTML = html;




        <script type="text/javascript">
                var xhr;
                function init() {
                    xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = xhr_onReadyStateChangeHandler;
                    xhr.open("GET", "data.json");
                function xhr_onReadyStateChangeHandler(evt) {
                    if ((xhr.readyState === 4) && (xhr.status === 200)) {
                        var src = document.getElementById("handlebars-Template").innerHTML;
                        var tmpl = Handlebars.compile(src);
                        var json = JSON.parse(xhr.responseText);
                        document.getElementById("handlebarsTmplPlaceholder").innerHTML = tmpl(json);

Is it me or you have no call for function init()?

I have changed the file completely and it works! It is a lot less complicated than I originally posted and compiling the template in the json call displays perfectly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.