jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by fgaonet 12 years, 8 months ago.

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

Author

dataAdapter.dataBind() does not trigger data loading Posts

August 23, 2012 at 5:31 pm dataAdapter.dataBind() does not trigger data loading #7063

Member

I am trying to use jqx.dataAdapter loading json data. See below for my code. While running the code, nothing happens. However, if I comment out the dataAdapter.dataBind(), and use the last line of code ($(“#jqxWidget”).jqxListBox()), the result shows correctly. It means all setting on dataAdapter are correct.

It seems that dataAdapter.dataBind() does not trigger the data loading. What is I missed?

Thanks.

$(document).ready(function() {
var source = {
type: “POST”,
url: “../Services/Services.asmx/GetNames”,
datatype: “json”,
datafields: [{ name: “Name” }, { name: “ID”}]
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: “application/json; charset=utf-8”,
loadComplete: function() {
var records = dataAdapter.records;
var length = records.length;
var html = “NameID”;
for (var i = 0; i < length; i++) {
var record = records[i];
html += "”;
html += “” + record.Name + “”;
html += “” + record.ID + “”;
html += “”;
}
html += “”;
$(“#jqxWidget”).html(html);
}
});
dataAdapter.dataBind();
//$(“#jqxWidget”).jqxListBox({ source: dataAdapter, displayMember: “Name”, valueMember: “ID”, width: 200, height: 250 });
});

August 23, 2012 at 5:36 pm dataAdapter.dataBind() does not trigger data loading #7060

fgaonet

Member

It seems that dataAdapter.dataBind() does not trigger the data loading. What is I missed?

Thanks.

“;
for (var i = 0; i < length; i++) {
var record = records[i];
html += "

“;
html += “

“;
}
html += “

Name	ID
” + record.Name + “	” + record.ID + “

“;
$(“#jqxWidget”).html(html);
}
});
dataAdapter.dataBind();
//$(“#jqxWidget”).jqxListBox({ source: dataAdapter, displayMember: “Name”, valueMember: “ID”, width: 200, height: 250 });
});

August 23, 2012 at 7:49 pm dataAdapter.dataBind() does not trigger data loading #7066

Peter Stoev

Keymaster

Hi fgaonet,

This sample shows how to use the jqxDataAdapter with jqxListBox: listboxbindingtojson.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 23, 2012 at 9:44 pm dataAdapter.dataBind() does not trigger data loading #7067

fgaonet

Member

I know and that is why I said:”if I use the last line of code ($(“#jqxWidget”).jqxListBox()), the result shows correctly. ”

My question is the dataAdapter.dataBind() can’t trigger data loading. If I comment out the last line in my code (see above), it does NOT show the html table.

Maybe you missunderstood my question due to the post editor. It always changes my code after publishing.

August 24, 2012 at 4:36 am dataAdapter.dataBind() does not trigger data loading #7074

Peter Stoev

Keymaster

Hi fgaonet,

– For posting code, please take a look at this topic: http://www.jqwidgets.com/community/topic/code-formatting/. Its in the Getting Started Forum.

– The dataBind method triggers the jqxDataAdapter’s callbacks – loadComplete, downloadComplete(if the data is from url), etc.. Actually all widgets like ListBox, Grid, ComboBox, Chart internally call this method.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) {
                        alert("Data is Loaded");
                    }
                });
                // perform Data Binding.
                dataAdapter.dataBind();
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 24, 2012 at 3:00 pm dataAdapter.dataBind() does not trigger data loading #7100

fgaonet

Member

Thank you, Peter!

I tried to use downloadComplete, but it still not working. I added a loadError function, and tested again. Following is my test code. While running dataAdapter.dataBind(); I got: Internal Server Error. Continuing to run $(“#jqxWidget”).jqxListBox(), I got: Data is Loaded.

Can you reproduce it?

By the way, I still can’t format my code after following your instruction. I used to use the simple text editor in other forums, and still need more practice to use yours. Sorry for my poor code!

   <script type="text/javascript">
        $(document).ready(function() {
            var source = {
                type: "POST",
                url: “../Services/Services.asmx/GetNames”,
                datatype: "json",
                datafields: [{ name: "Name" }, { name: "ID"}]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                contentType: "application/json; charset=utf-8",
                loadError: function(jqXHR, status, error) {
                    alert("Request failed: " + error);
                },
                downloadComplete: function(edata, textStatus, jqXHR) {
                    alert("Data is Loaded");
                }
            });
            dataAdapter.dataBind();//Request failed: Internal Server Error
            $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "Name", valueMember: "ID", width: 200, height: 250 }); //Data is Loaded
        });
        
    </script>

August 24, 2012 at 3:26 pm dataAdapter.dataBind() does not trigger data loading #7104

Peter Stoev

Keymaster

Hi fgaonet,

I won’t be able to reproduce this because I can’t test on your server. However, the jqxListBox internally does exactly the same – calls the jqxDataAdapter’s dataBind method and depending on the loaded data populates the ListBox with items. The difference is that it defines an additional parameter in the source object – data and send it as {}, i.e something like that:

          var source = {
                type: "POST",
                url: “../Services/Services.asmx/GetNames”,
                datatype: "json",
                data: {},
                datafields: [{ name: "Name" }, { name: "ID"}]
            };

In addition, did you try my code from the previous post?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 25, 2012 at 4:03 pm dataAdapter.dataBind() does not trigger data loading #7137

fgaonet

Member

Hi, Peter:

I did try your code. It works on local data. My issue is loading json data by jqx.dataAdapter.

I just wonder that if the jqxListBox internally calls the jqxDataAdapter’s dataBind method, why it can pass the load error as dataBind() used outside of jqxListBox.

Never mind it any more. I will use regular ajax to download json data instead of jqx.dataAdapter.

I appreciate your effort very much. Thank you!

August 25, 2012 at 4:48 pm dataAdapter.dataBind() does not trigger data loading #7138

Peter Stoev

Keymaster

Hi fgaonet,

Here’s a sample with JSON from remote data. The beverages.txt file is included in the download package.

<!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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () {
                alert('data is loaded');
            }
            });
            dataAdapter.dataBind();
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'">
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 25, 2012 at 8:28 pm dataAdapter.dataBind() does not trigger data loading #7141

fgaonet

Member

The big different is contentType, I think. As my above code, I use

contentType: “application/json; charset=utf-8”,

If I comment out this line, I got the error in both of dataAdapter.dataBind() and $(“#jqxWidget”).jqxListBox().

Thanks,

Author

Posts

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

You must be logged in to reply to this topic.