更新 <h1> div内的数据

Question

I have a div which has some dynamic <h1> elements embedded inside it. I want to update these <h1> elements. But I am not able to figure out how. I am using handlebars to feed data to the <h1> 's.

This is the code for the div.

<div class="homepage-availability-div">
    {{#each availData as |index|}}
    <div class="homepage-availability-inner-div">
        <h1 class="homepage-availability-text"> {{@key}}: <span class="dashboard-success">{{this}}% </span> </h1>
    </div>
    {{/each}}
</div>

This is how i am trying to do it.

$.ajax({
    url: url,
    headers: { 'x-cyclops-ajax': 'yes' },
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        var chart = $('#container').highcharts();
        var keys = Object.keys(data["histData"]);
        $( ".main-div" ).empty();
        for( var i=0; i< keys.length; i++) {
            chart.series[i].setData(data["histData"][keys[i]]["histFailure"], true);
            $( ".main-div" ).append( "<div class=homepage-availability-inner-div><h1 class=homepage-availability-text> " + keys[i] + ": <span class=dashboard-success>" + data["availData"][keys[i]] + " </span> </h1></div>" );
        }
        chart.xAxis[0].setCategories(data["histKeys"]);
        console.log("Data:" + JSON.stringify(data["availData"]));
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("Did not hit the AJAX call");
    }
});

Any help would be appreciated. :)

Answer 1

I see no connection between your handlebars template and your JavaScript. You make an ajax request and then take that data and attempt to manually update the content of your <div class="main-div"> tag:

var keys = Object.keys(data["histData"]);
    $( ".main-div" ).empty();
    for( var i=0; i< keys.length; i++) {
        chart.series[i].setData(data["histData"][keys[i]]["histFailure"], true);
        $( ".main-div" ).append( "<div class=homepage-availability-inner-div><h1 class=homepage-availability-text> " + keys[i] + ": <span class=dashboard-success>" + data["availData"][keys[i]] + " </span> </h1></div>" );
    }

This data is coming from your ajax call not from your template (unless of course you are applying this template server side?!).

Now, the logic here is incorrect because your div's are improperly formed. The class, for example needs to be quoted:

... '<div class="homepage-availability-inner-div"><h1 class="homepage-availability-text"> ...'

and later on:

... <span class="dashboard-success"> ...

I use single quotes around the outer strings so I can use double quotes within it. Otherwise you have to escape them which is a pain.

I would suggest to get further assistance if this doesn't resolve your issue, that you explain how (and where) you are invoking your handlebars template.