Declaring Variables in DOJO

Question

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.

First, I would recommend that you not mix JSP and JS. You can create a separate JS file and include it much like you did with dojo.js. — Jess, Apr 03 '13 at 01:55
could you clarify the "sometimes fails" part? any particular browser in use? Also, which line is the failure happening on? (I'm guessing `var allData=clubStore._arrayOfAllItems;` but just wanted to be sure) Finally, can you confirm that `clubStore` is defined if you let all scripts (and errors) finish and check on the console? — Frances McMullin, Apr 03 '13 at 09:37
The "sometimes fails" part was (another) mistake on my part. In an earlier version of the code I had copied an example from the web where the store variable was declared in a DOM object. That caused a spurious fault as the script was running before the DOM object had finished loading (i.e. the problem suggested by Jessemon below). When I moved the declaration to the script I introduced a syntax error but assumed the fault was still spurious - it wasn't. All fixed now. Thanks for your help. — user1936427, Apr 03 '13 at 15:51

Jess · Answer 1 · 2013-04-03T14:55:50.987

1

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.

edited Apr 03 '13 at 14:55

answered Apr 03 '13 at 02:01

Jess

23,901
21
124
145

1

Thanks - this is a "learning project" for me as I'm a c++ programmer by trade and completely new to javascript. Understanding how to structure these projects is very useful. Thanks. – user1936427 Apr 03 '13 at 15:43
1

Just posted an answer to my own question below - the problem was a syntax error. Thanks again. – user1936427 Apr 03 '13 at 15:48
@user1936427 OK cool. FYI you can use http://www.jslint.com to detect issues. See also this SO link for ways to improve your formatting with tools: http://stackoverflow.com/questions/7564139/any-tool-to-automatically-fix-simple-jslint-issues – Jess Apr 03 '13 at 15:55

score 1 · Answer 2 · answered Apr 03 '13 at 15:47

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.

score 0 · Answer 3 · answered Apr 03 '13 at 02:41

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();
});

score 0 · Answer 4 · answered Apr 03 '13 at 14:58

0

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

answered Apr 03 '13 at 14:58

Philippe

6,703
3
30
50

Removing `var` is not recommended according to this post: http://stackoverflow.com/questions/2291252/javascript-global-variables – Jess Apr 03 '13 at 15:11

Declaring Variables in DOJO

4 Answers4