jQuery UI Widgets Forums Grid data binding in grid via $.ajax

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

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

    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

    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

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

You must be logged in to reply to this topic.