Displaying Data in Dojogrid using dojo.xhrget() method

问题

I want to display a set of data which i am retrieving by an asynchronous call to the server using dojo.xhrget() method. I am retrieving data through a URL and i want that everytime a user clicks in content pane a new set of values gets displayed in grid without refreshing whole page. The problem is that data is not getting displayed in Grid. I am receiving an error by xhrget() error method.

The code for my script is ::

<script>
function populateGrid(){
    dojo.xhrGet({
        url: "http://localhost:8080/2_8_2012/jsp/GetJson.jsp",
        load: fillGrid,
        error:handleError,
        preventCache:true
        });
}

function fillGrid(data, ioArgs)
{
    alert(data);
        var newData = {
            identifier: "ID",
            items: data
    };

    var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
    var gridStructure =[[

                          { field: "ID",
                                name: "ID_Emp",
                                width: "20%",
                                classes:"firstName"
                          },
                          {
                              field: "Names",
                              name: "Name",
                              width: "20%",
                              classes: "firstName"
                          },
                          { field: "Email",
                                name: "Mail",
                                width: "20%",
                                classes:"firstName"
                          }

                    ]
              ];

    var grid = dijit.byId("grid.DataGrid");     
    grid.setStore(dataStore);
    grid.startup();
}

function handleError() {
    alert("An error occurred while invoking the service.");
}
</script>

Now , here the output of alert(data) and http://localhost:8080/2_8_2012/jsp/GetJson.jsp is same i.e ::

[{"ID":1,"Names":"Shantanu","Email":"shantanu.tomar@gmail.com"},{"ID":2,"Names":"Mayur","Email":"mayur.sharma@gmail.com"},{"ID":26,"Names":"Rohit"}]

My xhr.get function is working fine in terms of data retrieval. i.e when i update the values in a database. I do get the alert(data) output with that updated value without refreshing the whole page again. But data is not displayed in Data grid.

I am receiving an alert

An error occurred while invoking the service.

The code for http://localhost:8080/2_8_2012/jsp/GetJson.jsp is ::

<%@ page language="java" contentType="application/json; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ page import="MyPackage.PopulateTextbox" %>
<%
String temp1;
PopulateTextbox obj = new PopulateTextbox();
temp1 = obj.method();
%>
<%=temp1 %>

The markup code is ::

<div id="grid.DataGrid" data-dojo-type="dojox.grid.DataGrid"  title="Simple Grid" data-dojo-props= "autoWidth:true, structure: gridStructure" style="width:900px; height:200px;"></div>

<div id="contentpaneid" dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" onclick="populateGrid">

I am not getting what's the problem. Can u please help me out on why am i getting an error alert. thanks.

回答1:

Pratik Chandra rightly alluded to the issue - the datagrid is being populated without any store being set. I suggest changing your datagrid to be populated programmatically

So your declaration:

<div id="grid.DataGrid" data-dojo-type="dojox.grid.DataGrid" 

neeeds to be changed to:

<div id="mygrid" ></div>

and then change the line:

var grid = dijit.byId("grid.DataGrid");

to:

var grid = new dojox.grid.DataGrid({
                id: "grid",
                jsid: "grid",
                store: dataStore,
                structure: gridStructure,
                style: 'width:900px;height:300px;'
            }, dojo.byId("mygrid"));
grid.startup();

Also note that whenever you want to refresh the data in the grid, you do not need to repopulate the grid, you can just update the datastore with new values and the datagrid will automatically refresh with new data :-) Dojo takes care of that part.

To clean existing data in the datastore and populate it with new data, set the clearOnClose property on your IFRS. See: Updating Dojo Dijit FilteringSelect's store with asynchonous data to learn about clearOnClose

来源：https://stackoverflow.com/questions/9768294/displaying-data-in-dojogrid-using-dojo-xhrget-method