CODEWITHSUNDEEP
jqueryvisual-studioknockout.jsjqplot
tbogatchev
tbogatchev

Reputation: 1641

JQPlot not recognized by jQuery

I am working on a web app, and I very much like the drag graphs that JQPlot offers. I am referring to this example on their site: http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html

As I understand, to get JQPlot working, I need to include jQuery, the jQuery jqplot function, and a couple of styling files. The JQPlot download provides its own jquery.js and jquery.jqplot.js.

Additionally, I am also using Knockout.js as part of this project, and I am including the standard jquery-1.9.1.js file to get that working.

However, the definition file for "$" is jquery-1.9.1.js, and since JQPlot provides its own jQuery file, there must be some sort of conflict that makes the jqplot function unrecognizable. Is there a workaround for this? Here is my HTML code:

@model FluidBedSimulation.Models.BedState
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
}



<script type="text/javascript" src="../Scripts/jqPlot/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.trendline.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/jqPlot/jquery.jqplot.min.css" />

<h2>Index</h2>

@if (false)
{
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.2.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>

}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>







<script type ="text/javascript">
    $(document).ready(function () {


        $.jqplot.config.enablePlugins = true;

        s1 = [['23-May-08', 1], ['24-May-08', 4], ['25-May-08', 2], ['26-May-08', 6]];

        plot1 = $.jqplot('chartdiv', [s1], {
            title: 'Highlighting, Dragging, Cursor and Trend Line',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%#m/%#d/%y'
                    },
                    numberTicks: 4
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 10,
                tooltipLocation: 'n',
                tooltipAxes: 'y',
                tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
                useAxesFormatters: false
            },
            cursor: {
                show: true
            }
        });
    });
</script>


@*grab values from the view model directly*@

<p>Bed Weight: <strong data-bind="text: BedMass" id="BedMass"></strong></p>
<p>H2O Bed Weight: <strong data-bind="text: BedWaterMass" id="BedWaterMass"></strong></p>
<p>Fraction of Binder in Spray Solution: <strong data-bind="text: binderFraction" id="binderFraction"></strong></p>

<p>
    Enter the Bed Mass: 
            <input data-bind="value: BedMass" />

            @*Html.TextBoxFor(model => model.BedMass, new { data_bind = "value: BedMass" })*@
</p>
<p>
    Enter the H2O Mass in the Bed: 
            @Html.TextBoxFor(model => model.BedWaterMass, new { data_bind = "value: BedWaterMass" })
</p>
<p>
    Enter the Fraction of Binder in the Spray Solution: 
            @Html.TextBoxFor(model => model.binderFraction, new { data_bind = "value: binderFraction" })
</p>

<button data-bind="click: Simulate">Simulate</button>


@*to be used later as controls for the simulation*@
<div id="chartdiv" style="height:400px;width:300px; "></div>

<script type="text/javascript">

    this.BedMass = ko.observable(1);
    this.BedWaterMass = ko.observable(1);
    this.binderFraction = ko.observable(1);

    (function () {
        var model = '@Html.Raw(Json.Encode(Model))';
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

    })();

</script>

The exact error I get when I run the project is: "Uncaught TypeError: Cannot read property 'config' of undefined " This is the line that triggers it: $.jqplot.config.enablePlugins = true; When I write "$." in Visual Studio, jqplot is not even an option. I have searched a bunch of threads, but can't seem to find anything relevant. I would like to know if there is some way to use both jqplot and knockout (among other things that use the standard jquery file). Thanks in advance!

Upvotes: 1

Views: 1649

Answers (1)

Tom Perren
Tom Perren

Reputation: 106

I had the same problem. I traced through the processing of the jquery.jqplot.js file and it was being executed, the config was defined and by the end of the processing of the file everything seemed in place (i.e. the variables were correctly assigned to the jQuery variable and the $ alias). It would seem, however, that by the time I reach the $(document).ready() callback $.jqplot was undefined...

I found that the same issue occurred with the extension 'noty'... Eventually I noticed that at the end of my Layout.cshtml (I am implementing within MVC 4) I found that there was a @RenderSection("scripts", required: false) which was preceded by a reference to the JQuery bundle.

In summary: the jQuery bundle was being included in the head section (by me) of the HTML and then, again, in the footer (which overwrote all the extensions that had been included in the html <head>). This was a feature of the MVC 4 template - something I'm not over enamoured with.

Upvotes: 9

Related Questions