Binding JSON not working?

[nickgowdyParticipant]

Hello forum,

I am trying to bind my JSON to a DataTable from a remote source (ASP.NET MVC). I’m new to jqwidgets so perhaps I am missing something basic however I don’t see any errors in the console of my browser. Where the grid is supposed to be it says “no data to display”.

<script type="text/javascript">
 $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "jsonp",
                dataFields: [
                    { name: 'BodyText', type: 'string' },
                    { name: 'Title', type: 'string' }
                ],
                id: 'uniqueId',
                url: '@Url.Action("AjaxGetNewsItems", "News")'
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        $.extend(data, {
                            featureClass: "P",
                            style: "full",
                            username: "jqwidgets",
                            maxRows: 5
                        });
                        return data;
                    }
                }
            );

            console.log(dataAdapter);

            $("#dataTable").jqxDataTable(
            {
                width: 500,
                pagerButtonsCount: 10,
                source: dataAdapter,
                showHeader: false,
                columns: [
                    { text: 'Body Text', dataField: 'BodyText', width: 300 },
                    { text: 'Title', dataField: 'title', width: 200 }
                ]
            });
        });
    </script>

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="dataTable">
    </div>
</div>

My url definitely works because my breakpoint is hit when I debug my application. This is what my JSON looks like:

[
    {
        "AddedBy": "RHSNET\\leighhunt",
        "AddedOn": "2013-09-16T09:38:39.333",
        "BodyText": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
        "BodyTextFormatted": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called I...",
        "EndDate": "2014-12-09T00:00:00",
        "Historic": false,
        "NewsItemImage": {
            "Extension": "jpg"
        },
        "NewsItemImageReference": "9750cf57-bc14-4205-9e6c-83c8406f3f82.jpg",
        "RecordVersion": 4,
        "StartDate": "2014-06-17T00:00:00",
    
    "Title": "Tree fungus ID: Inonotus dryadeus",
        "UniqueId": 6,
        "UpdatedBy": "RHSNET\\anithapolimetla",
        "UpdatedOn": "2014-06-17T14:34:04.467",
        "EndUserNetworkLoginName": null
    }
]

My JSON is valid, I checked using JSONLint. Any ideas why it’s not binding?

[Peter StoevKeymaster]

Hi nickgowdy,

I can’t understand two things in the provided code:

1. If you are on the same domain then why do you use “jsonp” and not “json”?
2. Why do you need formatData in this code? Your Controller does not seem to be aware of parameters like featureClass, username, etc. which are specific to the Geonames Service and which it seem you just copied and pasted in your code.

Best Regards,
Peter Stoev

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

[nickgowdyParticipant]

Hi Peter,

I copied and pasted some of the code from the demo. Now you mentioned it I don’t need jsonp because it’s all on the same domain. I’ve also removed format data because I didn’t know that I don’t need it for my JSON.

Now I have removed what you’ve said I get an error:

Uncaught Error: Syntax error, unrecognized expression: [ jquery-2.1.1.js:143

<script type="text/javascript">
 $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'BodyText', type: 'string' },
                    { name: 'Title', type: 'string' }
                ],
                id: 'uniqueId',
                url: '@Url.Action("AjaxGetNewsItems", "News")'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            console.log(dataAdapter);

            $("#dataTable").jqxDataTable(
            {
                width: 500,
                pagerButtonsCount: 10,
                source: dataAdapter,
                showHeader: false,
                columns: [
                    { text: 'Body Text', dataField: 'BodyText', width: 300 },
                    { text: 'Title', dataField: 'title', width: 200 }
                ]
            });
        });
    </script>

Nick

[Peter StoevKeymaster]

Hi Nick,

Ok, what is that error “unrecognized expression”? I can’t find the problem from the provided code. I’d also suggest you to look at the ASP .NET MVC demos on our website which are online.

Best Regards,
Peter Stoev

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

[nickgowdyParticipant]

Hi Peter,

I’ve simplified my code so that the JSON being returned is smaller and I’ve fixed the errors. I now just can’t get the data to bind.

<script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var url = '@Url.Action("AjaxGetNewsItems", "News")';
        console.log(url);

        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'title', type: 'string' },
                { name: 'text', type: 'string' },
                { name: 'id', type: 'int' }
            ],
            url: url
            //id: 'id'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        console.log(dataAdapter);

        $("#dataTable").jqxDataTable(
        {
            source: dataAdapter,
            showHeader: true,
            columns: [
                { text: 'Title', dataField: 'title', width: 300 },
                { text: 'Body Text', dataField: 'text', width: 200 },
                { text: 'ID', dataField: 'id', width: 200 }
            ]
        });
    });
</script>

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="dataTable">
    </div>
</div>

This is my JSON:

[
    {
        "title": "Tree fungus ID: Inonotus dryadeus",
        "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
        "id": 6
    }
]

[Peter StoevKeymaster]

Hi Nick,

If your server returns that JSON, then I don’t see any problem. I prepared a working demo based on your code:http://jsfiddle.net/jqwidgets/spwodw7z/

Best Regards,
Peter Stoev

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

[nickgowdyParticipant]

Hello Peter,

Thanks for the fiddle link. I’ve discovered something weird is going on with my partial view. Since I am using MVC and I am creating widgets inside partial views. I pasted your code in the view so our code is identical and it works.

[nickgowdyParticipant]

Furthermore, I think the problem is using jqxDocking with partial views.

This is my main view:

@{
ViewBag.Title = “Index”;
}

@* @{
        @Html.Action("_MyEnquiriesWidget", "Enquiry")
    }

    @{
        @Html.Action("_AdvisorySchedulesCalendar", "Calendar")
    }

    @{
        @Html.Action("_KPIsWidget", "KPIs")
    }*@

@*<div id="LayoutContainer">
    <table width="100%">
        <tbody>
            <tr align="top">
                <td width="35%"></td>
                @{
                    @Html.Action("_NewsWidget", "News")
                }
                <td width="65%">
                    @{
                        @Html.Action("_ShortcutsWidget", "Dashboard")
                    }
                </td>
            </tr>
        </tbody>
    </table>
</div>*@

<script type="text/javascript">
    $(document).ready(function () {
        //$('#docking').jqxDocking({ orientation: 'horizontal', width: 800, mode: 'docked' });
        $('#docking').jqxDocking({ mode: 'docked' });
        $('#docking').jqxDocking('disableWindowResize', 'window1');
        $('#docking').jqxDocking('disableWindowResize', 'window2');
       
        //$('#calendar').jqxCalendar({ width: 180, height: 180 });
        //$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 });
        //$('#listbox').jqxListBox({ source: source, width: 375, height: 181 });
        //$('#zodiak').jqxPanel({ width: 375, height: 180 });
    });
</script>

    <div id="docking" style="width:100%">
            <div id="window1" style="width: 35%; padding:20px;">
                @Html.Action("_NewsWidget", "News")
            </div>
            <div id="window2" style="width: 65%;">
                @Html.Action("_ShortcutsWidget", "Dashboard")
            </div>
    </div>

This is my partial view

<script>
    $(document).ready(function() {
        var data = [
     {
         "title": "Tree fungus ID: Inonotus dryadeus",
         "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
         "id": 6
     }
        ];
        var source =
             {
                 dataType: "json",
                 dataFields: [
                     { name: 'title', type: 'string' },
                     { name: 'text', type: 'string' },
                     { name: 'id', type: 'int' }
                 ],
                 localData: data,
                 //id: 'id'
             };
        var dataAdapter = new $.jqx.dataAdapter(source);

        console.log(dataAdapter);

        $("#table").jqxDataTable(
        {
            source: dataAdapter,
            showHeader: true,
            autoRowHeight: false,
            columns: [
                { text: 'Title', dataField: 'title', width: 300 },
                { text: 'Body Text', dataField: 'text', width: 200 },
                { text: 'ID', dataField: 'id', width: 200 }
            ]
        });
    });
</script>

    <div id="table">
    </div>

Currently I get the error invalid structure unless I change this:

 <div id="table">
    </div>

To this:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="table">
    </div>
</div>

But then the table says undefined.

Any ideas?
Nick

[Peter StoevKeymaster]

Hi Nick,

It’s raising invalid structure because your docking’s stucture is invalid and it is because each window should have 2 nested DIV tags – one for title and one for content. I would suggest you to look at the jqxWindow and jqxDocking Getting Started help topics and demos.

Regards,
Peter

[nickgowdyParticipant]

Hello Peter,

I’ve finally got the table to work. I removed $document.ready(function() {}); from the partial view and added a function to init the code. In my ActionResult method in C#, I injected some JavaScript to fire the function. I believe that a combination of using partial views and being unfamiliar with jqxDataAdapter and jqxDataTable made it tricky to figure out the problem.

Your jsFiddle help me determine that it wasn’t a problem with the binding but how my partial views work in my site.

Thanks for all your help.

Kind regards,
Nick

[Author]

Posts