jQuery UI Widgets Forums Plugins Data Adapter populate dataAdapter with ison

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • 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?

    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/

    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.

    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/

    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.

    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/

    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.

    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/

    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

    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/

    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”}

    populate dataAdapter with ison #65540

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

You must be logged in to reply to this topic.