I am very new to dojo (And this is my first question on stackoverflow so go easy :) ). I am working on a new project at work and was asked to investigate dojo mobile. The purpose of the following code is just to test the different available widgets that dojo mobile provides in a simple html page.
I have come across the following issue, when i run this code in a browser or deploy it to a mobile device there seems to be an issue with the release event that should fire after clicking the mouse or releasing on a touch screen, important to note is that this only happens with widgets that involve dragging an object. For example, the buttons and the tab bar works fine. This is only with SpinWheelDatePicker/SpinWheelTimePicker, slider, switch etc. In the developer console i get the following error
In Chrome:
Uncaught TypeError: Object #<klass> has no method 'remove' dojo.js:17
_51d.disconnect dojo.js:17
_a.onTouchEnd libs/dojo/dojox/mobile/scrollable.js:401
_3e6 dojo.js:17
Event.Handler.Class.create.handleEvent prototype.js:5767
__method prototype.js:396
responder
In Firefox:
522.remove is not a function
[Break On This Error]
... function(){return _2f4.apply(window,arguments)&&_2f5.apply(window,arguments);};...
dojo.js (line 17)(
I am using 1.7.2 toolkit, and the project is deployed onto a worklight server.
Here is the code:
<!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Android DOJO Test</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link type="text/css" rel="Stylesheet" href="css/blackbird/blackbird.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/common/SpinWheel.css" >
<!-- <link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/iphone/iphone.css" type="text/css" media="screen" title="no title" /> -->
<script type="text/javascript" src="libs/blackbird/blackbird.js"></script>
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, mblAlwaysHideAddressBar:true"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
<script type="text/javascript">
var jsonData = {
items:[
{ src: "images/4242373_460s.jpg"},
{ src: "images/4242618_460s.jpg"},
{ src: "images/4242864_460s.jpg"},
{ src: "images/icon.png"},
{ src: "images/thumbnail.png"}
]
};
log.info('Attempting to load dojo libraries');
require(["dojox/mobile/parser",
"dojo/data/ItemFileReadStore",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/Carousel",
"dojox/mobile/Button",
"dojox/mobile/TabBar",
"dojox/mobile/ScrollableView",
"dojox/mobile/PageIndicator",
"dojox/mobile/SwapView",
"dojox/mobile/CheckBox",
"dojox/mobile/ToggleButton",
"dojox/mobile/TextBox",
"dojox/mobile/Switch",
"dojox/mobile/Slider",
"dojox/mobile/RadioButton",
"dojox/mobile/SpinWheelDatePicker",
"dojox/mobile/SpinWheelTimePicker",
"dojox/mobile/Overlay",
"dojox/gauges/GlossyCircularGauge",
"dojox/gauges/GlossyHorizontalGauge",
"dojox/gauges/GlossySemiCircularGauge",
"dojo/on",
"dojo/domReady!"
],
function(store, mobile, parser) {
log.info('Dojo libraries loaded succesfully');
});
function setTabBar(to){
if(to!=null){
var selectedTab = dijit.byId(to);
selectedTab.select();
}
else{
log.error('From or To parameter/s are empty or not a string value');
return;
}
}
</script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
<h1 data-dojo-type="dojox.mobile.Heading">DOJO TEST APP</h1>
<ul data-dojo-type="dojox.mobile.TabBar" id="mainTabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" id="homeBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="mainView" >Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="fadeBar" icon1="images/Button-Blank-Green-icon.png" moveTo="fadeView" >Fade</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="slideBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="slideView" >Slide</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="swapBar" icon1="images/Button-Blank-Green-icon.png" moveTo="swapViewExample" >Swap View</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="formBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="formButtons" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="carouselBar" icon1="images/Button-Blank-Green-icon.png" moveTo="carouselView" >Carousel</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="pickerBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="pickerView" >Picker</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="overlayBar" icon1="images/Button-Blank-Green-icon.png" moveTo="overlayView" >Overlay</li>
<li data-dojo-type="dojox.mobile.TabBarButton" id="gaugesBar" icon1="images/Aqua-Ball-Red-icon.png" moveTo="gaugeView" >Gauges</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="mainView" selected ="true">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="fadeView" transition="fade" onClick = "setTabBar('fadeBar');" >Fade</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="slideView" transition="slide" onClick = "setTabBar('slideBar');" >Slide</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="swapViewExample" transition="scaleIn" onClick = "setTabBar('swapBar');" >Swap View</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="formButtons" transition="scaleOut" onClick = "setTabBar('formBar');" >Form Buttons</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="carouselView" transition="swirl" onClick = "setTabBar('carouselBar');" >Carousel</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="pickerView" transition="flip" onClick = "setTabBar('pickerBar');" >Picker Examples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="overlayView" transition="zoomOut" onClick = "setTabBar('overlayBar');" >Overlay Eaxmples</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="gaugeView" transition="zoomOut" onClick = "setTabBar('gaugesBar');" >Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="fadeView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Fade View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="slideView">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Slide View</h2>
</div>
<div data-dojo-type="dojox.mobile.View" id="swapViewExample">
<div data-dojo-type="dojox.mobile.View" selected="true">
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 1</h2>
<img src="images/4242373_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 2</h2>
<img src="images/4242618_460s.jpg">
</div>
</div>
<div data-dojo-type="dojox.mobile.SwapView">
<div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Swap View Page 3</h2>
<img src="images/4242864_460s.jpg">
</div>
</div>
</div>
<div data-dojo-type="dojox.mobile.PageIndicator" fixed="bottom"></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="formButtons">
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.Button" data-dojo-props='label:"Click me!", onClick:function(e){ alert("button clicked");return true; }'></button></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>CheckBox</span><br>
<div align="right"><input data-dojo-type="dojox.mobile.CheckBox" type="checkbox" data-dojo-props='onChange:function(checked){ alert("checked state changed to " + checked); },checked:true' /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Radio Button</span><br>
<div align="right"><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="true" name="radioGroup" value="yes" /><input type="radio" data-dojo-type="dojox.mobile.RadioButton" checked="false" name="radioGroup" value="no" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Slider</span><br>
<div align="right"><input type="range" style="width:200px;" data-dojo-type="dojox.mobile.Slider" value="10" max="20" /></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Switch</span><br>
<div align="right"><div data-dojo-type="dojox.mobile.Switch" align="right"></div></div>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList" shadow="true">
<span>Toggle Button</span><br>
<div align="right"><button data-dojo-type="dojox.mobile.ToggleButton" checked="true">Toggle me</button></div>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="carouselView">
<div data-dojo-type="dojox.mobile.ScrollableView" >
<span data-dojo-type="dojo.data.ItemFileReadStore" id="store1" data-dojo-props="data:jsonData"></span>
<div id="carousel1" data-dojo-type="dojox.mobile.Carousel" store = "dijit.registry.byId('store1')" data-dojo-props="height:'500px', navButton:'true' , numVisible:2, title:'Photo Gallery'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="pickerView">
<h2 data-dojo-type="dojox.mobile.Heading">Date Picker</h2>
<div align="center"><div id="spin1" data-dojo-type="dojox.mobile.SpinWheelDatePicker" align="center"></div></div>
<h2 data-dojo-type="dojox.mobile.Heading">Time Picker</h2>
<div align="center"><div id="spin2" data-dojo-type="dojox.mobile.SpinWheelTimePicker" align="center"></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="overlayView">
<div align="center"><button data-dojo-type="dojox.mobile.Button" onClick="dijit.registry.byId('customPicker').show()" data-dojo-props='label:"Select date"'></button></div>
<div id="customPicker" data-dojo-type="dojox.mobile.Overlay">
<h1 data-dojo-type="dojox.mobile.Heading" label="Custom Picker">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="width:45px;float:right;" onClick="dijit.registry.byId('customPicker').hide()"></div>
</h1>
<div id="spin3" data-dojo-type="dojox.mobile.SpinWheelDatePicker"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.View" id="gaugeView">
<div data-dojo-type="dojox.mobile.View" id="gaugeMainView">
<div align="center"><h2 data-dojo-type="dojox.mobile.Heading">Guages</h2></div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyCircView" transition="fade" onClick = >Glossy Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossySemiView" transition="slide" onClick = >Glossy Semi Circular</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="glossyHorView" transition="scaleIn" onClick = >Glossy Horizontal</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="simpleAnalog" transition="scaleOut" onClick = >Simple Analog Gauges</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyCircView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Circular</h1>
<div align="center"><div id="CircularGauge" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossySemiView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Semi Circular</h1>
<div align="center"><div id="CircularGauge1" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossySemiCircularGauge' width='200' height='200' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="glossyHorView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Glossy Horizontal</h1>
<div align="center"><div id="CircularGauge2" background='{color : "rgba(0,0,0,0)"}'useTooltip='false' data-dojo-type='dojox.gauges.GlossyHorizontalGauge' width='400' height='30' value='20'></div></div>
</div>
<div data-dojo-type="dojox.mobile.View" id="simpleAnalog">
<h1 data-dojo-type="dojox.mobile.Heading" back="Gauge View" moveTo="gaugeMainView" onClick="console.log('Going back');">Simple Analog Gauges</h1>
</div>
</div>
</body>
</html>
I think you hit a known incompatibility between the Worklight JavaScript libraries (more specifically prototype.js) and Dojo.
Your precise problem is that prototype.js adds an "on" method to all Elements, but unfortunately this method is not compatible with what Dojo expects (Dojo wants 'on' to return an object with a remove() method, whereas prototype.js returns an object with a stop() method).
As a workaround, try to add the following script to your page:
You must add this after the place where Worklight will insert prototype.js, in your page I would say between auth.js and your main script should be the right place.