未捕获的TypeError：$（…）.ddBarChart不是函数

Question

Working on MVC 5 project. This particular page is a partial page (Razor), if that makes any difference.

I'm trying to utilize a ddchart jQuery library. ( http://kiersimmons.com/ddchart/index.html ) I keep getting this error...

Uncaught TypeError: $(...).ddBarChart is not a function

The line of code that the error is happening on is here:

$("#chart_div_static").ddBarChart({
        chartDataLink: "~/Scripts/plugins/ddchart/Chart_Data.js?1=10",
        action: 'init',
        xOddClass: "ui-state-active",
        xEvenClass: "ui-state-default",
        yOddClass: "ui-state-active",
        yEvenClass: "ui-state-default",
        xWrapperClass: "ui-widget-content",
        chartWrapperClass: "ui-widget-content",
        chartBarClass: "ui-state-focus ui-corner-top",
        chartBarHoverClass: "ui-state-highlight",
        callBeforeLoad: function () { $('#loading-Notification_static').fadeIn(0); },
        callAfterLoad: function () { $('#loading-Notification_static').stop().fadeOut(0); },
        tooltipSettings: { extraClass: "ui-widget ui-widget-content ui-corner-all" }
    });

I know the function exists and the reference (to the js file that contains the function) is placed before ddBarChart is called. FYI the reference is....

<script src="~/Scripts/plugins/ddchart/jquery.ddchart.js"></script>

As a test: In my jquery.ddchart.js file I even made a test() function that simply pops up an alert. I wrote this function on the line before the ddBarChart function. When I call the test function it works fine. So I know the reference to the external js file (jquery.ddchart.js) is correct.

**** Update ****

FYI: The ddBarChart function, in the external file, starts off as...

jQuery.fn.ddBarChart = function(options) {
        function setupDrillDown(strID, intDelay, strH, strW, strL) {
            $(strID+ "> .ddchart-chart-final").css("z-index","2");
               :
               :
        }

        function aniDrillDown(strID,intDelay) {
            $(strID+ " > .ddchart-chart-final > .ddchart-chart-wrapper-sub").animate( {width: "100%",height: "100%",left: "0%"}, intDelay-500, function(){aniCleanUp(strID)});  
        }
               :
               :

**** Update Note **** (This is a MVC 5 partial page (razor), if that makes any difference. Seemed to work when I created a normal non-partial page in a different project.)

Any ideas what this could be? Thanks!

Answer 1

I've encountered a problem like this before. The problem was that the jQuery library was being included twice.

This happened in the following order:

• The HTML file loaded the jQuery file, defining the jQuery object.
• The HTML file loaded the plugin file, attaching a function to jQuery.fn
• The HTML file loaded the jQuery file, redefining the jQuery object.

After this, any references to jQuery will be on the newly defined jQuery object, which does not have the plugin function attached to it.

This would be consistent with it only failing when included from a partial view. You have to ensure the plugin is included only after the single jQuery source is included.