Script tag does not append to table

Question

I don,t know why I always have the weirdest problems. I am using Kendo UI Charting. which is in a PartialView. When the PartialView is called by jQuery, it generates div and some jQuery code at runtime. I append the whole div and JQ code below the clicked row of the table row. The problem is this, that it only appends div, it ignores script tag and its code, which is neccessary for rendering chart.

My PartialView is:

@(Html.Kendo().Chart()
        .Name("XXXProducts")
        .Title("XXX Products")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series =>
        {
            series.Bar(Model.SalesAxis).Name("Total Sales");
        })
        .CategoryAxis(axis => axis
            .Categories(Model.MonthsAxis)
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Max(Model.SalesAxis.Max() + 100)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
)

My jQuery Code on other page to render the view:

    function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        chartData = "<tr style='height:300px;'><td colspan='5'>" + data + "</td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
    });
}

When I alert "chartData", it shows the following:

<tr><td colspan='5'><div class="k-chart" id="XXXProducts"></div><script>    jQuery(function(){jQuery("#XXXWaterProducts").kendoChart({"chartArea":{"background":"transparent"},"title":{"text":"Site Visitors Stats /thousands/"},"legend":{"visible":false},"series":[{"name":"Total Sales","type":"bar","data":[56000,74500,45000,86000,49850,63482,97600,63250,79860,42100,32010,89200]}],"categoryAxis":[{"majorGridLines":{"visible":false},"categories":["January","February","March","April","May","June","July","August","September","October","November","December"]}],"valueAxis":[{"majorGridLines":{"visible":true},"line":{"visible":false},"max":97700}],"tooltip":{"template":"#= series.name #: #= value #","visible":true}});});</script> </td></tr>

But when I check the source it only shows:

<tr><td colspan='5'> <div class="k-chart" id="XXXProducts"></div></td></tr>

The scripts tag is nowhere to be found.

Sigh. You cannot append a script tag which resides in a string. This question have been asked and answered hundred of times already... — mekwall, Jun 26 '13 at 08:18

score 1 · Answer 1 · answered Jun 26 '13 at 08:39

Generating client side code is not good practice. In your case would better to return json data in data attribute of generated div. After that you can parse string from data attribute to object with JSON.parse() method and run method which create chart.

function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        var dataObj = JSON.parse(data);
        chartData = "<tr style='height:300px;'><td colspan='5'></td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
        $("#XXXWaterProducts").kendoChart(dataObj);
    });
}

You need modify @Url.Action("MonthlyChart", "Chart") to return onlu string with json data. Also you can return JsonResul type and use $.getJSON method to avoid using json parsing (var dataObj = JSON.parse(data);)

Script tag does not append to table

1 Answers1