无法调用外部Javascript方法

Question

I am using an external Javascript file from an MVC 5 web app to render a chart to the view. the chart uses the model which is only accessible server side so I encode the model in JSON with inline js as shown below and then call the external function passing in the JSON string.

<script type="text/javascript">

$(document).ready(function () {

    var JSONdata = @Html.Raw(Json.Encode(Model.PastModels));
    var count = @Html.Raw(Json.Encode(Model.PastModels.Count));
    createChart(JSONdata, count);

});

The function is defined in an external file.

function createChart(JSONdata, count) {
    var dates = [];
    var scores = [];
    var name = ""


    for (i = 0; i < count; i++) {
        dates[i] = JSONdata[i].TheDate;
        scores[i] = JSONdata[i].TotalScoreT;
    }
    var chart = 'totalChart';
    name = " Total Score";
    renderChart(chart, name);


    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        var tab = this.id;

        switch (tab) {
            case 'socialTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].SocialPhobiaT;
                }
                chart = socialChart;
                name = ' Social Phobia';
                break;

            case 'panicTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].PanicDisorderT;
                }
                chart = panicChart;
                name = ' Panic Disorder';
                break;

            case 'depressionTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].MajorDepressionT;
                }
                chart = depressionChart;
                name = ' Major Depression';
                break;

            case 'separationTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].SeparationAniextyT;
                }
                chart = separationChart;
                name = ' Separation Anxiety';
                break;

            case 'obsessiveTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].ObsessiveCompulsiveT;
                }
                chart = obsessiveChart;
                name = ' Obsessive Compulsive Disorder';
                break;

            case 'generalTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].GeneralizedAnxietyT;
                }
                chart = generalChart;
                name = ' Generalized Anxiety';
                break;

            case 'totalTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].TotalScoreT;
                }
                chart = totalChart;
                name = ' Total Score';
                break;
        }

        renderChart(chart, name);
    });
}

I am including the external file using a section.

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

 }

However whenever the page is loaded I get the error 'function createChart is undefined'.

Any suggestions would be much appreciated.

Thanks.

Answer 1

The above problem arise due to external script not successfully loaded or call before the $(document).ready function call. Make sure that section for script load before your createChart function call on page.

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

 }

Hope it will help you out.

Happy coding

Thanks