Hi,

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>
                        <figcaption>{{caption}}</figcaption>
                    {{/if}}

                {{#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>
                    <!-- div id="result"></div>   --> 
        </script>


        <!-- 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>-->
        <script type="text/javascript">
            //<![CDATA[
                var xhr;
                function init() {
                    xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = xhr_onReadyStateChangeHandler;
                    xhr.open("GET", "data.json");
                    xhr.send(null);
                }
                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);
                    }
                }
            //]]>
        </script>

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.