I'm following the example in "Mastering Dojo", Chapter 3, with dijox.grid.Grid. I've modified it slightly to use dojox.grid.EnhancedGrid. I've written a web service that returns some json in the format required by dojo. I've tested the web service independently and it returns the correct json. But when I put EnhancedGrid together with ItemFileReadStore it does not produce any errors in the browser error console but also does not display any data in the grid.
What steps can I take from here to debug this? Is there some verbose debugging flag I can give to dojo so that it (hopefully) clues me into what is going wrong?
EDIT:
Here's what I'm doing:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug:true"></script>
<link rel="stylesheet" href="/css/main.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"/>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
</script>
</head>
</body class="claro">
<style>
#msgs {
width=550px;
height=200px;
}
</style>
<div dojoType="dojo.data.ItemFileReadStore" jsId="xstore" url="/path/to/my/resource/data.json"></div>
<table id="msgs" dojoType="dojox.grid.EnhancedGrid" store="xstore">
<thead>
<tr>
<th field="id" width="50">Id</th>
<th field="ts" width="100">Date</th>
<th field="msg" width="400">Message</th>
</tr>
</thead>
</table>
</body>
</html>
The javascript returned is like this:
{
"identifier":"id",
"items":[
{
"id":"3425",
"custId":"2342525225",
"ts":"2011-07-23T07:00:00Z",
"msg":"test message"
}
]
}
I guess one open question: the json has one extra column that's not displayed in the table ("custId"). I'm hoping that this does not cause problems?!
EDIT2:
Also if I go into firebug's DOM console, I can see that xstore variable correctly holds the data from the JSON.
The two things that work are:
setting an inline style on the table to set the width/height, OR
set the EnhancedGrid property autoHeight which is what I ended up doing.
Related
I used grails3.1.2 to create my app. It's normal but now it isn't. My app contains a sub-app which is just html, js, css and so on. I put this sub-app under src/main/webapps folder. From my browser, I found all js and css used by html is not available.
I tried to adjust location of sub-app to src/main/resource/public , but it doesn't work for me.
My app has a gsp contains html as follow:
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title></title>
</head>
<body>
%{--<iframe height="100%" width="100%" src="<asset:assetPath src='events-list.html?t=${java.lang.System.currentTimeMillis()}' />" frameborder="0" />--}%
<iframe height="100%" width="100%" src="${resource(dir:'admin',file:'events-list.html')}" frameborder="0" />
</body>
</html>
The html used some js and css:
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
But those js and css is not accessed by browser(browser cannot find them)
I don't understand why it got worse. Hope you could submit some advises
can anybody please help me get a working sample of MVC application with tablesorter plugin applied ? I am a bit confused about how to apply latest tablesorter plugin to my MVC sample..I am trying to implement something like
$('table').trigger('sortReset')
in the below teble.
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric Sort</th>
<th>Currency</th>
<th>Alphabetical</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>£10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
<tr><td>abc 1</td><td>£234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
<tr><td>abc 9</td><td>£10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>zyx 24</td><td>£10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>abc 11</td><td>£3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>abc 2</td><td>£56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>abc 9</td><td>£3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>ABC 10</td><td>£87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>zyx 1</td><td>£99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
<tr><td>zyx 12</td><td>£234,10</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
</tbody>
</table>
Also the js and css files I am referring are as follows
<head>
<meta charset="utf-8">
<title>Basic Tablesorter Demo</title>
<link href="~/Content/jq.css" rel="stylesheet" />
<link href="~/Content/theme.default.css" rel="stylesheet" />
<script src="~/Scripts/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.widgets.min.js"></script>
<script>
$(function () {
$('.tablesorter').tablesorter({
widgets: ['zebra', 'columns'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
});
</script>
Not sure why I am not getting this working..It thorows an error like "Uncaught TypeError: undefined is not a function " for tablesorter()
Note: I learned that this functionality of resetting is available with plugin 2.4.7 onward.
Your help is greatly appreciated.
Thanks
You'll need to add an element on the page that allows the user to click to reset the sort. In this example, I'll use a button:
<button type="button" class="reset">Reset Sort</button>
then apply the appropriate script to give that button the ability to trigger the reset event:
$(function () {
$('.tablesorter').tablesorter({
widgets: ['zebra', 'columns'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
// make button reset the sort
$('.reset').click(function(){
$('.tablesorter').trigger('sortReset');
});
});
Alternatively, the user can use Ctrl + Left Click on any header cell to reset the sort. The key can be changed using the sortResetKey option.
I am now learning Dojo. So I want to build my first demo by how to use gauges in Dojo.
I downloaded the zip package and build an asp.net web project. then all the resources from Dojo package are imported to this project.
Because I saw the demo from DoJo website: http://demos.dojotoolkit.org/demos/gauges/demo.html, So I want to copy this demo in my local computer with existing DoJo resources.
HTML code below:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DojoDaemon.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dojo Circular Gauge Test Daemon</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/dojo-release-1.9.1/dojo/dojo.js" type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/CircularLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/HorizontalLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/SemiCircularLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
</head>
<body>
<form runat="server" id="form1">
<h2 align="center" style="color:white;">Predefined Glossy Gauges</h2>
<table style="height:100%; width:100%">
<tr>
<td align="center">
<div id="CircularGauge" background="{color:'rgba(0,0,0,0)'}" useTooltip="false" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/CircularLinearGauge" style="width:200px;height:200px" value="20"></div></td>
<td align='center'>
<div id="CircularGauge2" background="{color:'rgba(0,0,0,0)'}" useTooltip="false" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/SemiCircularLinearGauge" value="10" style="width:250px;height:200px"></div></td>
</tr>
<tr>
<td valign="middle" align="center" colspan="2">
<div id="HGauge3" style="margin:30px 0px 0px 0px;width:400px;height:60px" useTooltip="false" background="{color:'rgba(0,0,0,0)'}" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/HorizontalLinearGauge" value="20"></div></td>
</tr>
</table>
</form>
</body>
</html>
Above is the code I use, I have searched a lot of examples, but got nothing because no one article give me the detailed steps to teach me how to use the resources in dojox folder.
resources I found like :
http://dojotoolkit.org/api/dojox/dgauges/CircularGauge
http://dmandrioli.github.io/dgauges/dojox/dgauges/CircularGauge.html
Would anyone help me if familar with this? thank you ver much.
You only need to load dojo.js in the src and the src.js which they have included for the demo. Click on the View Source of http://demos.dojotoolkit.org/demos/gauges/demo.html and copy the code exactly!
Dojo can seem like a beast at first, but its a beautiful toolkit that you will come to love and appreciate. Give it time. I STRONGLY recommend you say Hi to Dojo before jumping to dguage and other advanced stuff.
I've been trying to make a jQuery tab UI like in the following Better alternative to an iframe? but after hours of troubleshooting I just don't know what I'm doing wrong.
My test.html:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
</body>
So in my folder I have test.html (the above), one.html, two.html, and three.html. When I load test.html, any tab I select just says Loading... and the html pages never load.
For a more visual explanation, I'm trying to do what this demo is but with html pages:
http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm
Please help haha I'm so lost as to what I'm doing wrong. Thanks in advance :)
I am trying to include some editing Widgets in my dojox.grid.DataGrid seem to be having a lot of difficulty. I have tried everything I can think of to get it to work, but something just isn't going right. When I started having problems, I tried to copy almost exactly from the grid tests and model my "breakout" of code just like that, but without success. Basic editing of the Grid seems to work. In the example below, the "Events" column allows edits, but the two columns that are using the cellType attribute don't work. In fact they also seem to ignore the other attributes (like the styles) which would seem to indicate that some sort of issue was run into, but there is nothing in FireBug. Also I get the same behaviour between Chrome and Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css">
<style type="text/css">
#import "css/gctilog.css";
#import "javascript/dojotoolkit/dojo/resources/dojo.css";
#import "javascript/dojotoolkit/dijit/themes/tundra/tundra.css";
#import "javascript/dojotoolkit/dojox/grid/resources/Grid.css";
#import "javascript/dojotoolkit/dojox/grid/resources/tundraGrid.css";
#import "javascript/dojotoolkit/ocp/resources/MultiStateCheckBox.css";
</style>
<script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"></script>
<script type="text/javascript">
dojo.require("dojo.currency");
dojo.require("dijit.dijit");
dojo.require("dijit.form.HorizontalSlider");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.layout.ExpandoPane");
dojo.require("dojox.timing");
dojo.require("ocp.MultiStateCheckBox");
dojo.require("dojo.parser");
formatCurrency = function(inDatum){
return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
}
</script>
<script type="text/javascript" src="javascript/formatter.js"></script>
<script type="text/javascript" src="javascript/utilities.js"></script>
</head>
<body class="tundra">
<div name="labelCallids">Call IDs</div>
<div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"></div>
<table dojoType="dojox.grid.DataGrid" id="callidGrid4" store="callidStore4" query="{ callid: '*' }" style="width: 950px; border: 1px solid rgb(0,156,221); margin-left: 15px;" clientSort="false" autoHeight="10" noDataMessage="No Call IDs Available...">
<thead>
<tr>
<th field="callid" width="375px">Call ID</th>
<th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'>Type</th>
<th field="event_count" width="40px" editable="true" styles="text-align: right;">Events</th>
<th field="start_ts" width="75px" formatter="secToHourMinSecMS">Start</th>
<th field="end_ts" width="75px" formatter="secToHourMinSecMS">End</th>
<th field="duration" width="75px" formatter="secToHourMinSecMS">Duration</th>
<th cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.HorizontalSlider" field="include" formatter="formatCurrency" constraint="{currency:'EUR'}" editable="true" width="10em" styles='text-align: right;'>Amount</th>
</tr>
</thead>
</table>
</body>
</html>
Is there anything that I am missing. It would seem to be fundamental, but I just can't seem to see it.
[EDIT]
What I have done instead is return a dijit Widget using the formatter to return a widget. So in the declarative model, I specify something like this:
<th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'>Type</th>
And then I wrote a JavaScript function like the below to return the widget I wanted.
function getMultiField(value) {
var jsonValue = JSON.parse(value); //I provide the value of the widget as JSON
//from my data store, so I need to parse it
var control = new ocp.MultiStateCheckBox({ //my custom widget
id : "dMSCB"+(new Date).getTime()+Math.ceil(Math.random()*100000), //generate a unique ID
value : jsonValue.value,
onChange : function (value {...}) //code to manipulate the underlying data store
});
return control; //The dojo 1.4 grid can handle a returned Widget
}