jQWidgets Forums

jQuery UI Widgets Forums ASP .NET MVC ASP .NET CORE Charts Uncaught ReferenceError: $ is not defined

Tagged: , , ,

This topic contains 6 replies, has 6 voices, and was last updated by  thenexttech 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • PawelKanarek
    Participant

    Hi everyone!
    I have problems with presenting charts on ASP.NET CORE 2.0, using MVC.

    I’ve installed yours product (followed this instruction on github).

    So, firstly i added nuget https://www.nuget.org/packages/Chart.AspNetCore.Mvc/ to my existing project, updated _ViewImports.cshtml, then i rebuild solution and finally added a new chart object.

    Sadly i can’t see chart on the screen, there is some JS error with message “Uncaught ReferenceError: $ is not defined” as seen on this screenshot screenshot

    This is my Model

    
        public class ChartDataItem
        {
            public int Keith
            {
                get;
                set;
            }
            public int Erica
            {
                get;
                set;
            }
            public int George
            {
                get;
                set;
            }
            public string Day
            {
                get;
                set;
            }
        }
    

    This is my Index method

    
            public async Task<IActionResult> Index()
            {
                return View(new List<ChartDataItem>()
                {
                    new ChartDataItem() { Day="Monday", Keith = 30, Erica = 15, George=25 },
                    new ChartDataItem() { Day="Tuesday", Keith = 25, Erica = 25, George=30 },
                    new ChartDataItem() { Day="Wednesday", Keith = 30, Erica = 20, George=25 },
                    new ChartDataItem() { Day="Thursday", Keith = 35, Erica = 25, George=45 },
                    new ChartDataItem() { Day="Friday", Keith = 20, Erica = 20, George=25 },
                    new ChartDataItem() { Day="Saturday", Keith = 30, Erica = 20, George=30 },
                    new ChartDataItem() { Day="Sunday", Keith = 60, Erica = 45, George=90 }
                });
            }
    

    and finally this is my view

    
    @model IEnumerable<MeteoWww.Models.ChartDataItem>
    @using jQWidgets.AspNetCore.Mvc.TagHelpers;
    @{
        ViewData["Title"] = "Index";
    
        Padding padding = new Padding() { Left = 5, Top = 5, Right = 35, Bottom = 5 };
        Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };
        Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };
        FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    }
    <div class="example-description">ASP .NET MVC Chart Line Series Example</div><br />
    <jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme02" padding="padding" title-padding="titlePadding" title="Fitness & exercise weekly scorecard" description="Time spent in vigorous exercise" show-legend="true" legend-position="legendPosition" source="Model">
        <jqx-chart-x-axis datafield="Day" show-grid-lines="true"></jqx-chart-x-axis>
        <jqx-chart-series-groups>
            <jqx-chart-serie-group show-labels="true" columns-gap-percent="50" series-gap-percent="0" type=@SerieType.Line>
                <jqx-chart-value-axis axis-size="auto" display-value-axis="true" description="Time in minutes" tick-marks-color="#888888" min-value="0" max-value="100" unit-interval="10"></jqx-chart-value-axis>
                <jqx-chart-series>
                    <jqx-chart-serie symbol-type="square" datafield='Keith' display-text='Keith'></jqx-chart-serie>
                    <jqx-chart-serie symbol-type="square" datafield='Erica' display-text='Erica'></jqx-chart-serie>
                    <jqx-chart-serie symbol-type="square" datafield='George' display-text='George'></jqx-chart-serie>
                </jqx-chart-series>
            </jqx-chart-serie-group>
        </jqx-chart-series-groups>
    </jqx-chart>
    

    Can you guys help me to solve this error? You’ve made a great work on those widgets and it would be awesome to use them in my project.


    PawelKanarek
    Participant

    Any ideas? I think i did not install some javascripts…

    But i don’t see anywhere complete instruction how to install those charts for total newbie like i’m. I followed only this instruction and i think this is to little to activate those charts.


    Peter Stoev
    Keymaster

    Hi Pawel,

    The installation instructions are available here: https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers-documentation/.

    $ is undefined means that jQuery reference is not available in the code.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com


    jefryarch
    Participant

    Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn’t loaded yet.

    To solve this error:

    Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

    There can be multiple other reasons for this issue:

    * Path to jQuery library you included is not correct
    * The jQuery library file is corrupted
    * Working offline
    * Conflict with Other Libraries


    thinsys
    Participant

    Are you a asp programmer? use thin client and enjoy


    decorsanthuong
    Participant

    https://decorsanthuong.com/ là trang thông tin cập nhật thường xuyên về các kiểu mẫu, xu hướng và tổng hợp những mẹo vặt, thủ thuật mới nhất xoay quanh việc trang trí sân thượng.
    Thông tin Liên Hệ:
    Địa Chỉ: P. Hào Nam, Chợ Dừa, Đống Đa, Hà Nội, Việt Nam
    Điện Thoại: 0876318489
    Website: https://decorsanthuong.com/
    Email: decorsanthuong@gmail.com
    Social Media
    Twitter: https://twitter.com/decorsanthuong
    Reddit: https://www.reddit.com/user/decorsanthuong
    Linkedin: https://www.linkedin.com/in/decorsanthuong/
    Youtube: https://www.youtube.com/@decorsanthuong/about
    Twitch: https://www.twitch.tv/decorsanthuong/about


    thenexttech
    Participant

    ASP .NET CORE Charts Uncaught ReferenceError: $ is not defined” indicates a common issue encountered when attempting to utilize jQuery within an ASP .NET Core application. This error typically occurs when the jQuery library is not properly loaded or referenced in the project. To resolve this issue, ensure that the jQuery library is included and correctly referenced in the HTML file or layout view where the ASP .NET Core Charts are being implemented. You can do this by either adding a CDN link to the jQuery library or by including the jQuery script file locally in your project. Once jQuery is properly loaded, the “Uncaught ReferenceError: $ is not defined” error should be resolved, allowing you to successfully integrate ASP .NET Core Charts with jQuery functionality.
    FedEx operational delay
    Snapchat premium app
    Walmart call out number
    Apps like moneylion
    Best youtube video downloader

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.