Question

I’m attempting to work with HandleBars JS and so far it’s mostly working. However I’ve run into an interesting issue.

I’m attempting to get HandleBars to render a user input form with three text fields. For testing I have pasted into my document the JSON string needed to build those three text fields and it works beautifully. However when I use $.getJSON and call the exact same JSON string via ajax when it renders the text fields no CSS or jQuery rules are applied to the form.

I know it’s due to the fact Document Ready has been called by this point as I added a Document Ready around my static string and the same thing happened that they didn’t render any CSS or JS rules.

Is there a way I can re-force all jQuery and CSS rules to refresh? or how can I get this to work?

Also, please note this is not jQuery Mobile.

Much thanks in advance.. and please ask if you have any questions before down voting.

EDIT – Here’s the code:

Static Version

var source   = $("#form-template").html();
var template = Handlebars.compile(source);
var data = { 
    info: { id: 'longbeach2012', name: 'Long Beach 2012' },
forms: [
{id: "1", label: "This is a label", description: "", type: "text", name: "t1", username: "alan" },
{id: "2", label: "This is a label2", description: "description2", type: "text", name: "t2", username: "allison" },
{id: "3", label: "This is a label3", description: "description3", type: "text", name: "t3", username: "ryan" }
]};
var example = {title: "Sample Title", body: "Sample Body"};
$("#testForm").html(template(data));

Dynamic Version

$.getJSON('http://register.local.dev/fetchtemplate',
{
    language: 'english',
    formid: 'longbeach2012'
},
function(data) {
    $.each(data, function(i,item){
        if( item.elem_type === 'text' )
        {
            var source = $("#textinput-template").html();
            var template = Handlebars.compile(source);
            $("#testForm").append(template(item));
        }
    });
});

Handlebars Template

<script id="textinput-template" type="text/x-handlebars-template">
<div id="q{{elem_id}}">
    <div class="small">{{trans_label}}{{#if trans_description}}</br />
    <span class="notice">{{trans_description}}</span>{{/if}}</div>
    <input type="{{elem_type}}" name="{{elem_name}}" id="{{elem_name}}" value="{{trans_defaultValue}}" tabindex="1" autocomplete="off" />
</div>

Answer 1

I figured it out.

I removed the majority of my javascript code from a document ready and had my getJSON call a function which executed the rest of my javascript after the getJSON had finished running.