1

我正在编写一个在网格中显示俱乐部列表的 JSP。网格显示俱乐部的名称及其纬度、经度、网站和描述。

要显示的实际数据存储在名为 clubStore 的变量（dojo.data.ItemFileWriteStore）中。

加载页面时，将调用 servlet 以检索数据。然后，处理函数删除存储中的所有项目并添加 servlet 返回的新项目。

JSP代码如下所示：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clubs</title>
    <style type="text/css">
        @import "./dojoroot/dojo/resources/dojo.css";
        @import "./dojoroot/dijit/themes/tundra/tundra.css";
        @import "./dojoroot/dojox/grid/resources/Grid.css";
        @import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
    </style>
    <script type="text/javascript" src="dojoroot/dojo/dojo.js" 
            djConfig="parseOnLoad: true, isDebug: false">
    </script>
    <script language="JavaScript" type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dojo.data.ItemFileWriteStore");
        var clubData={
            items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
        };
        var layoutClub=[{field:"name", name:"Name", width:10},
                        {field:"lat", name:"Lat", width:5},
                        {field:"lon", name:"Long", width:5},
                        {field:"webSite", name:"Web Site", width:10},
                        {field:"description", name:"Description", width:'auto'}];
        var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
    </script>
    <link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
    <%@include file="header.jsp"%>
    <div id="clubGrid"
        style="width: 800px;"
        autoHeight="true"
        data-dojo-type="dojox/grid/DataGrid"
        data-dojo-props="store:clubStore,
                         structure:layoutClub,
                         query:{},
                         queryOptions:{'deep':true},
                         rowsPerPage:40">
    </div>  
    <br>
    <script>
        var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
        dojo.xhrGet({
            url: urlString,
            handleAs: "text",
            load: function(data) {
                // remove items...
                var allData=clubStore._arrayOfAllItems;
                for (i=0; i<allData.length; i++) {
                    if (allData[i]!=null) {
                        clubStore.deleteItem(allData[i]);
                    }
                }               
                var jsonClubArray=JSON.parse(data);
                for (var i=0; i<jsonClubArray.clubs.length; i++) {
                    var club=jsonClubArray.clubs[i];
                    var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
                    clubStore.newItem(newClub);
                }
                clubStore.save();                   
            }
        });
    </script>
</body>
</html>

处理 servlet 响应的脚本有时会失败，因为 clubStore 未定义（使用 Firebug 进行调试）。这似乎是一个虚假的错误，因为有时一切都很完美。

任何帮助理解如何定义 clubStore 变量将不胜感激。

谢谢。

詹姆士。

4

4 回答 4

1

我认为可能发生的情况是主体脚本有时会在头部脚本之前运行，所以这是一种竞争条件。您可以尝试将您的正文脚本包装成dojo.ready. （我从您的代码中假设您使用的是 dojo 1.6 或更早版本，因为您没有使用 AMD 加载程序样式。）

dojo.ready(function(){
  // Put your xhr request code here.
});

您可能还想尝试在 head 和 body 脚本中使用 firebug 断点进行测试。看看头部是否有时会先运行。

于 2013-04-03T02:01:04.163 回答
1

所以问题原来是声明中的语法错误 - 行中缺少'{'

var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});

错误的虚假方面是一个红鲱鱼 - 我之前已将变量声明为 DOM 对象的一部分，这导致了虚假错误。所以我搞砸了我的回归测试以及引入了一个语法错误！

谢谢。

詹姆士。

于 2013-04-03T15:47:24.177 回答
0

Put your clubStore in the global space... just remove the var keyword in front of it...

于 2013-04-03T14:58:51.530 回答
0

您可以尝试切换 require 语句的顺序，如下所示：

    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.parser");

如果失败，您可以将 parseOnLoad 设置为 false，然后在您的商店被实例化后调用 dojo.parser.parse()，如下所示：

（假设您根据您的代码使用 dojo 1.6 或更早版本）

dojo.addOnLoad(function() {
  dojo.parser.parse();
});
于 2013-04-03T02:41:32.867 回答