jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 10 months ago.

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

Author

data binding in grid via $.ajax Posts

July 5, 2012 at 11:15 am data binding in grid via $.ajax #5688

Nick

Member

Hi,

I have a problem with grid’s data binding using $.ajax call. As it works only for the first time, next time it doesn’t work.

On selection of tab (“Person Details”) i make a call ajax call which gets the data from server and shows it in the grid.

$.ajax({
type: “POST”,
url: “/app1/servlet/Servlet1?id=” + eId,
dataType: ‘json’,
beforeSend: function() {
// Here i am showing the loading spinner untill ajax data loads.
$(“#jqxgrid1”).html( ‘

‘ );
},
error: function(json, textStatus, errorThrown){
alert(‘ Error :’ + errorThrown);
},
success: function (data) {

// initailize grid
var gridData = data;
var gridSource =
{
localdata: gridData,
datatype: “json”,

};

var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$(“#jqxgrid1”).jqxGrid(
{
width: 700,
source: gridDataAdapter,
editable: true,
pageable: true,
autoheight: true,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘Name’, datafield: ‘name’, columntype: ‘textbox’, width:
60, editable: false },
{ text: ‘Address’, datafield: ‘address’, columntype: ‘textbox’,
width: 60, editable: false },
{ text: ‘Email’, datafield: ’email’, columntype: ‘textbox’, width:
80 , editable: true},
]
});

},
complete: function() {
// hide the loading image.
$(‘#spinner’).hide();

}
});

The problem i am facing is the data is been binded to the grid only the first time , the next time i click another tab and select the tab (“Person Details”) again , it makes the ajax call which indeed is successful but the grid is shown empty.

Please help me on the issue to bind the data on each request made via ajax call.

Thanks
Nick

July 5, 2012 at 12:15 pm data binding in grid via $.ajax #5694

Peter Stoev

Keymaster

Hi Nick,

Do you use the latest version of jQWidgets – ver.2.2.1? I have tried to reproduce the reported behavior locally, but without avail.

Here’s my test code:

<!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/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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.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 loadGrid = function () {
                $.ajax({
                    url: "../sampledata/beverages.txt",
                    dataType: 'json',
                    beforeSend: function () {
                        $("jqxgrid").html('');
                    },
                    error: function (json, textStatus, errorThrown) {
                        alert(' Error :' + errorThrown);
                    },
                    success: function (data) {
                        // initailize grid
                        var gridData = data;
                        var gridSource =
                        {
                            localdata: gridData,
                            datatype: 'json'
                        };
                        var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
                        $("#jqxgrid").jqxGrid(
                        {
                            width: 670,
                            source: gridDataAdapter,
                            editable: true,
                            pageable: true,
                            autoheight: true,
                            selectionmode: 'singlecell',
                            columns: [
                              { text: 'Name', datafield: 'name', width: 250 },
                              { text: 'Beverage Type', datafield: 'type', width: 250 },
                              { text: 'Calories', datafield: 'calories', width: 180 },
                              { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                              { text: 'Protein', datafield: 'protein', minwidth: 120 }
                          ]
                    });
                    }
                });
            }
            loadGrid();
            $("#Button").click(function () {
                loadGrid();
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input type="button" value="Button" id="Button" />
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 9, 2012 at 4:54 am data binding in grid via $.ajax #5762

Peter Stoev

Keymaster

Hi Nick,

Another thing that I see is that you replace the Grid’s content with some HTML, but you don’t destroy the Grid’s instance. If you want to display a loader element, do not change the Grid’s HTML and use absolute positioned DIV tag instead.

Another solution is to remove and add the Grid’s instance.

              var dataAdapter = new $.jqx.dataAdapter(source);
                        var parentElement = $("#jqxgrid").parent();
                        $("#jqxgrid").remove();
                        parentElement.append("<div id='jqxgrid'></div>");
                        $("#jqxgrid").jqxGrid(
                            {
                                source: dataAdapter,
                                columnsresize: true,
                                columns: [
                                  { text: 'Name', datafield: 'name', width: 250 },
                                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                                  { text: 'Calories', datafield: 'calories', width: 180 },
                                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
                              ]
                            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.