CODEWITHSUNDEEP
variablesdojodeclaration
user1936427
user1936427

Reputation: 53

Declaring Variables in DOJO

I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.

The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.

When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.

The JSP code is shown below:

<%@ 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>

The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.

Any assistance in understanding how to define the clubStore variable would be appreciated.

Thanks.

James.

Upvotes: 1

Views: 852

Answers (4)

user1936427
user1936427

Reputation: 53

So the problem turned out to be a syntax error in the declaration - missing '{' in the line 

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

The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!

Thanks.

James.

Upvotes: 1

Philippe
Philippe

Reputation: 6828

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

Upvotes: 0

Jess
Jess

Reputation: 25129

I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)

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

You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.

Upvotes: 1

Ali Gangji
Ali Gangji

Reputation: 1501

You could try switching the order of your require statements, so it's like this:

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

If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:

(assuming you are using dojo 1.6 or earlier based on your code)

dojo.addOnLoad(function() {
  dojo.parser.parse();
});

Upvotes: 0

Related Questions