jQuery UI Widgets Forums Lists DropDownList $.jqx is undefined, result in undefined dataAdapter

This topic contains 20 replies, has 4 voices, and was last updated by  mrueda 6 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author

  • arashmoeen
    Member

    Hello everyone,

    I go straight to the problem, I’m using VS2012, MVC 4, and here’ s my for my user create view

    @model KhoonehYab.Models.User

    @{
    ViewBag.Title = “Create”;
    }

    @Styles.Render(“~/Scripts/jqwidgets/styles/jqx.base.css”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxcore.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxdata.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxbuttons.js”)
    @Scripts.Render(“~/Scripts/gettheme.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxscrollbar.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxlistbox.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxcheckbox.js”)
    @Scripts.Render(“~/Scripts/jqwidgets/jqxdropdownlist.js”)

    function generateSource(items) {
    var source = {
    localdata: items,
    datatype: ‘observablearray’
    };
    return new $.jqx.dataAdapter(source);
    }
    var createElements = function()
    {
    $(“#userTypes”).jqxDropDownList({
    source: generateSource(userViewModel.relatedObjects.UserTypes()),
    height: 30,
    width: 300,
    theme: getDemoTheme(),
    displayMember: ‘Code’,
    valueMember: ‘Description’
    });
    }
    var userViewModel = {};
    $(document).ready(function () {
    userViewModel.relatedObjects = ko.mapping.fromJSON(‘@Html.Raw(ViewBag.userRelatedObjects)’);
    ko.applyBindings(userViewModel);
    createElements();
    });

    so basically I’m getting the ” Cannot read property ‘dataAdapter’ of undefined ” in my chrome console, and I’ve checked to make sure that the jqxdata.js is included correctly by putting a simple alert at the beginning of it, it just doesn’t seem to be able to call “a.jqx.dataAdapter = function (e, b)” functioin. I’m really stuck with this and and any help would be appreciated.

    I also have to mention that jquery 1.8.3 is being used and included via bundle.

    Thanks.


    Peter Stoev
    Keymaster

    Hi,

    A sample with MVC4 is available in this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm. Also make sure that you run your code in the jQuery’s document.ready function.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    arashmoeen
    Member

    Hi Peter,

    Thanks for the fast reply and the link but I’m not using that method to get data from my controller, I’m just wondering why doesn’t it work with the new version, I used version 2.4.2 in another application and it worked perfectly with no problem although most of my functions were called outside document.ready function, I can’t really figure it out how to handle this and oh yea I wanna integrate it with knockoutjs that’s why I’m using this method.

    Thanks again for your hard work and help.


    arashmoeen
    Member

    Peter I’m not sure if this might help or not but I’ve added few alerts in jqxdata.js
    this is the beginning part of the minified version of jqxdata.js:

    alert(‘1’);
    (function (a) { alert(‘2’); a.jqx.dataAdapter = function (e, b) { alert(‘3’);this._source=e;this._options=b…

    it’s goes 1, 2 but not 3 … I really don’t know what’s missing here, now I’m pretty sure it doesn’t have anything to do with the version because I tried the older versions as well and encountered the same error it just doesn’t recognize the dataAdapter, could be the jquery? I’m really out of ideas…

    Thanks again.


    Peter Stoev
    Keymaster

    Hi,

    All of the script code should be in the jQuery’s document.ready function. Otherwise, you may try to use code which is still not loaded.

    est Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    arashmoeen
    Member

    Peter even this is not working , and gives me an error “Uncaught TypeError: Cannot read property ‘dataAdapter’ of undefined” … it happens with any other jqwidget component even a simplest one jqxButton … can you please tell me what I might be doing wrong ?

    @model KhoonehYab.Models.User

    @{
    ViewBag.Title = “Create”;
    }

    $(document).ready(function () {
    var data = new $.jqx.dataAdapter([]);
    });

    Thanks


    arashmoeen
    Member

    I don’t know why the script tags are removed in the previous post of mine,

    @model KhoonehYab.Models.User
    @{
    ViewBag.Title = "Create";
    }
    <script src="~/Scripts/jqwidgets/jqxcore.js"></script>
    <script src="~/Scripts/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var data = new $.jqx.dataAdapter([]);
    });
    </script>

    Peter Stoev
    Keymaster

    Hi,

    I suggest you to follow the instructions from the help topics. We are unable to reproduce that locally. That error can be raised only if the scripts are not loaded correctly.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    arashmoeen
    Member

    Yea I understand that, but it’s strange how it just doesn’t work .. it’s a simple view, I remove all the pre generated codes by .net, then add a simple jqxbutton or even a new dataAdapter inside the document.ready and it doesn’t work… I tried loading the scripts directly into the view, bundle, shared _layout with any possible way of including the scripts but it just doesn’t seem to work 😐 I’ve no idea what I’m doing wrong because I already did use your 2.4.2 version in another mvc4 project and it just did work like a magic but for some crazy unknown reason I can’t make it work this time :\ any suggestions ?

    thanks


    Peter Stoev
    Keymaster

    The code in MVC4 is expected to be in scripts section. See below the code from our help topic:

    @section scripts {
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'BirthDate', type: 'date' },
    { name: 'Gender', type: 'string' },
    { name: 'JobTitle', type: 'string' },
    { name: 'SickLeaveHours', type: 'string' },
    { name: 'VacationHours', type: 'string' }
    ],
    url: 'Employee/GetEmployees'
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#grid").jqxGrid(
    {
    width: 600,
    source: dataAdapter,
    columns: [
    { text: "Birth Date", datafield: "BirthDate", cellsformat: 'd' },
    { text: "Gender", datafield: "Gender" },
    { text: "Job Title", datafield: "JobTitle" },
    { text: "Sick Leave Hours", datafield: "SickLeaveHours" },
    { text: "Vacation Hours", datafield: "VacationHours" }
    ]
    });
    });
    </script>
    }

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    Gowri
    Participant

    Hi,
    I’m using JQWidgets 3.0.1 and I have refered all JQX references and knockout.js also.But still it throws $.jqx is undefined. Can any one help me out of this.


    Peter Stoev
    Keymaster

    Hi Gowri,

    The reason is most probably the same as in the other guys. It is possible that you do not run your code in document.ready. It is also possible the path to the required files to be incorrect. Please, check our demos and the sample I posted here.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    Gowri
    Participant

    Hi peter,
    I just followed the steps, given in the documentation.
    please check below refered scripts

    JQuery and Knockout

    then In my document.ready

    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = “Controller/Action”;
    // prepare the data
    var source = {
    datatype: “json”,
    datafields: [{ name: ‘Name’, type: ‘string’ },
    { name: ‘Comments’, type: ‘string’ },
    { name: ‘CreatedBy’, type: ‘int’ },
    { name: ‘CanDelete’, type: ‘string’ },
    { name: ‘CreatedDate’, type: ‘string’ }],
    id: ‘Id’,
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#jqxgrid”).jqxGrid({
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: [{ text: ‘Name’, datafield: ‘Name’, width: 250 },
    { text: ‘Comments’, datafield: ‘Comments’, width: 250 },
    { text: ‘CreatedBy’, datafield: ‘CreatedBy’, width: 180 },
    { text: ‘CanDelete’, datafield: ‘CanDelete’, width: 120 },
    { text: ‘CreatedDate’, datafield: ‘CreatedDate’, minwidth: 120 }]
    });
    });
    Error occured in below line

    new $.jqx.dataAdapter(source);

    In console it says that $.jqx is undefined.

    Am I doing anything wrong..? or missed any reference..?

    Thanks
    Gowri


    Peter Stoev
    Keymaster

    Hi Gowri,

    Please, format your page’s code and post it again. Use the Code formatting button in the Toolbar.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Gowri
    Participant

    Sorry, Lasttime I’m unable to submit script reference, Please refer below..

    src=”../../jqwidgets/jqxcore.js”
    src=”../../jqwidgets/jqxbuttons.js
    src=”../../jqwidgets/jqxscrollbar.js
    src=”../../jqwidgets/jqxmenu.js
    src=”../../jqwidgets/jqxgrid.js
    src=”../../jqwidgets/jqxgrid.selection.js
    src=”../../jqwidgets/jqxgrid.columnsresize.js
    src=”../../jqwidgets/jqxdata.js
    src=”../../scripts/gettheme.js

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.