populate dataAdapter with ison - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ajax, data, file, HTTP, jqxDataAdapter, json, local data, No data to display, server, success

This topic contains 11 replies, has 5 voices, and was last updated by RG 9 years, 8 months ago.

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

Author

populate dataAdapter with ison Posts
December 12, 2013 at 12:37 pm populate dataAdapter with ison #46404

musikka
Participant

I use the jQuery’s Ajax function and then try to populate the dataAdapter with data in the Ajax success function (spring web application). Server returns the valid json-string but dataAdapter can’t recognize json-format. The same json-string works fine if it is initiated as local variable.

Json string : {“root”:[{“firstname”: “Anna”,”lastname”: “wkwkwk”},{“firstname”: “Catrin”,”lastname”: “Kajsjs”}]}

function retrieveData() {
return $.ajax(
data: {prameter:”serviceName”},
type: ‘POST’,
dataType: ‘json’,

success: function(data) {

var source =
{
datatype: “json”,
localdata: data,
datafields: [
{ name: ‘firstname’ },
{ name: ‘lastname’ }

],
root: ‘root’
};

var dataAdapter = new $.jqx.dataAdapter(source);
var dataAdapter = new $.jqx.dataAdapter(source, {

loadComplete: function () {
var records = dataAdapter.records;
var length = records.length;
var html = “<table border=’1′>
for (var i = 0; i < length; i++) {
var record = records[i];
html += “<tr>”;
html += “<td>” + record.firstname + “</td>”;
html += “<td>” + record.lastname + “</td>”;
html += “</tr>”;
}
html += “</table”;
$(“#jqxWidget”).html(html);
}
});

dataAdapter.dataBind();

},
error: function( jqXHR, textStatus, errorThrown ){
var message = “Ajax error: ” + textStatus + ” ” + errorThrown;
alert( message );
}

})
}

What is wrong?

December 13, 2013 at 6:45 am populate dataAdapter with ison #46454
Dimitar
Participant
Hello musikka,

Your JSON is valid. Here are two grids, loaded with your data:

1) Loaded from a local variable:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";

            var sampleJSON = '{ "root": [{ "firstname": "Anna", "lastname": "wkwkwk" }, { "firstname": "Catrin", "lastname": "Kajsjs"}] }';

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' }
                ],
                root: 'root',
                localdata: sampleJSON
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 250 },
                  { text: 'Last Name', datafield: 'lastname', width: 250 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
2) Loaded from a file:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";

            var url = "sampleJSON.txt";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' }
                ],
                root: 'root',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                autoheight: true,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 250 },
                  { text: 'Last Name', datafield: 'lastname', width: 250 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
sampleJSON.txt:
```
{
    "root": [
        {
            "firstname": "Anna",
            "lastname": "wkwkwk"
        },
        {
            "firstname": "Catrin",
            "lastname": "Kajsjs"
        }
    ]
}
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
December 17, 2013 at 11:21 am populate dataAdapter with ison #46647

musikka
Participant

Hello, Dimitar!
I know that my json is valid and works fine as local variable or if it’s read from file.
But I need that web server returns it. Web server return it, but dataAdapter doesn’t display it.

December 17, 2013 at 11:34 am populate dataAdapter with ison #46648

Dimitar
Participant

Hi musikka,

Please make sure you are using the latest version of jQWidgets (3.0.4). Please also try out the examples we provided, modifying them to get data from your server.

Best Regards,
Dimitar

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

December 1, 2014 at 4:58 pm populate dataAdapter with ison #63593

Prabhakaran R
Participant

While trying option “2) Loaded from a file:”, I get the message “No data to Display”. I am using v 3.6. Can someone help me please.

December 2, 2014 at 7:48 am populate dataAdapter with ison #63622

Dimitar
Participant

Hello Prabhakaran R,

Did you create a file named sampleJSON.txt and populate it with the sample data given after the example?

Best Regards,
Dimitar

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

December 2, 2014 at 7:58 am populate dataAdapter with ison #63623

Prabhakaran R
Participant

Hi Dimitar,
Ofcourse, I had sampleJSON.txt file in the same location of htm file.

Infact, many of the samples (for e.g. jqwidgets-ver3.6.0/demos/jqxtreegrid/javascript-tree-grid-context-menu.htm) when opened in browser says “No data to display” with a note “To run a sample that includes data binding, you must open it via “http://…” protocol since Ajax makes http requests.”

Does that mean we need web server to refer to external file?

Thanks,
Prabhakar.

December 2, 2014 at 1:59 pm populate dataAdapter with ison #63656

Dimitar
Participant

Hi Prabhakar,

Yes, you may need to run the examples on a server. A local server, such as the Visual Studio ASP.NET Development Server would do just fine. For testing purposes you may also use http://jsfiddle.net/ or a similar platform.

Best Regards,
Dimitar

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

January 16, 2015 at 4:40 pm populate dataAdapter with ison #65521

RG
Participant

I can not figure out a way to get the dataAdapter to make a Request Body passing name value pair with json format in POST. Help would be appreciated.

What I’m trying to do is to post with a Request Body in the format {“name”: “value”}. I have not been able to do this with either data: or formatData:. Any working example of dataAdapter using type: “POST” with json Request Body data would be appreciated. Need to have the braces and double quotes in the Body.

Thanks

January 16, 2015 at 4:50 pm populate dataAdapter with ison #65529

Peter Stoev
Keymaster

Hello RG,

Set data of the source object for adding custom HTTP variables to your Ajax calls.

Best Regards,
Peter Stoev

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

January 16, 2015 at 8:25 pm populate dataAdapter with ison #65533

RG
Participant

No matter what setting I try, I still end up with the ‘Request Body’ being sent as name: value instead of {“name”: “value”}

January 17, 2015 at 1:28 am populate dataAdapter with ison #65540

RG
Participant

found solution http://www.jqwidgets.com/community/topic/post-not-sending-json/
Author

Posts

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

You must be logged in to reply to this topic.