How to feed an image slider from a flat JSON file by Handlebars template?

Question

I want to feed an image slider (flexslider) from a flat JSON file by Handlebars template. for that I tried this.

$.ajax({
    type : 'GET',
    dataType : 'json',
    async: false,
    url: window.location.href + "JSON/carousel-data.json",
    success : function(data) {
        console.log(data); 
        var src = document.getElementById("sliderTemplate").innerHTML;
        var tmpl = Handlebars.compile(src);
        $('#imageslider').innerHTML = tmpl(data); 
        $('.flexslider').flexslider({animation: "slide"});
    } 
});

But slider is not instantiated by this code. However if I assign the same content of JSON file to a variable in same JS file and pass it to Handlebars template it works fine.

What is the problem with my ajax code?

Answer 1

I found the solution, everything is fine but one line that is

$('#imageslider').innerHTML = tmpl(data);

It should be

$('#imageslider').HTML(tmpl(data));

As it follows the jQuery syntex.