VueJS - Template not rendering anything - vue.js

I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch
So here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="http://coinbetix.test/css/app.css">
<!-- Scripts -->
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Page Content -->
<main>
<div class="py-12 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
<form action="http://mysite.test/deposit" method="post">
<div class="w-1/2 mx-auto">
<input type="hidden" name="_token" value="Izbs4W1YHkxWODGgop8J1cOqpDuH7W1N9VoBzK6z"> <input type="hidden" name="coin" value="ETH">
<label for="coin" class="block text-sm font-medium text-gray-700">Select Crypto</label>
<select class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" name="coin" aria-label="Default select example">
<option value="ETH"> Ethereum</option>
<option value="LTC"> Litecoin</option>
<option value="ADA"> Cardano</option>
</select>
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<button type="submit" class="btn btn-outline-primary w-100">Generate Deposit Address</button>
</div>
</form>
</div>
</main>
</div>
<script src="http://mysite.test/js/app.js" defer></script>
</body>
</html>
<script type="module" src="/js/app.js">
import { ref } from 'vue'
import { Switch } from '#headlessui/vue'
export default {
components: {
Switch,
},
setup() {
const agreed = ref(false)
return {
agreed,
}
},
}
</script>
What is not rendered at all is that part:
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
Any idea why it is not shown at all ?


Just replace your setup method with this code -
setup() {
const enabled = ref(false)
return {
enabled,
}
},
You used enabled in Switch component as v-model so you should replace your agreed variable with enabled.
Or you may use agreed in v-model instead of enabled.

Related

b-dropdown is not rendering any css class

I am using bootstrap-vue to add <b-dropdown> components, but the button doesn't have an effect adding any css class.
Is this some bug with bootstrap-vue component or I am doing something wrong while adding a class?
new Vue({
el: "#vueapp",
data: function() {
return {}
}
})
.btn-circle {
width: 30px;
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="vueapp" class="vue-app">
<b-dropdown button-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>

I was using the wrong prop. So, I had to use the toggle-class prop for <b-dropdown>.
So, using the toggle-class solved the problem for me.
new Vue({
el: "#vueapp",
data: function() {
return {}
}
})
.btn-circle {
width: 30px;
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="vueapp" class="vue-app">
<b-dropdown toggle-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>

Tailwind center an absolute element

I want to create a little login pop-up card at the middle of the page when the client presses the login button. I managed to create the card itself, a gave it .absolute z-10 to be at the top of the other contents. I also wrapped it inside a container div with .relative to be able to position the card. My problem is I can't position it to the middle. If I add for example .right-0 it works, but I want to position it in the middle and I couldn't find anything in the documentation about that... Also, how can I add more height to my card that 64?
My code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jófogás</title>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<!-- header section -->
<header class="bg-white flex">
<div class="w-3/6">
<img
class="h-12 m-4"
src="./logo_img/jofogas_logo_original.jpg"
alt="jofogas_logo_original"
/>
</div>
<div class="mx-6 my-6 w-3/6 text-right">
<button class="bg-orange-500 rounded py-2 px-4 text-white">
Belépés
</button>
</div>
</header>
<!-- login card -->
<div class="relative">
<div class="absolute z-10 items-center right-0">
<div
id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
<!-- search bar -->
<div class="bg-gray-200 rounded-lg mx-10 md:pt-10" id="search-container">
<div class="text-center text-4xl hidden md:block" id="main-text">
Hirdess vagy vásárolj a Jófogáson!
</div>
<div class="py-10 text-center">
<input
class="w-5/6 md:w-3/6 md:h-12"
id="search-bar"
type="text"
placeholder="Mit keresel?"
/>
<i class="fa fa-search icon"></i>
</div>
</div>
<div class="text-center">
<button
class="bg-green-500 rounded py-4 px-8 md:py-8 md:px-16 text-white text-xl md:text-2xl my-10"
>
Hirdetésfeladás
</button>
</div>
</body>
</html>

Try this:
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
...
</div>

You can use flexbox along with items-center and justify-center to perfectly fit center on the screen. For this you need to set the height and width to 100% to center with respect to entire screen. checkout if this works:
<!-- login card -->
<div class="fixed h-full w-full flex items-center justify-center bg-opacity-50 bg-gray-700">
<div class="z-10">
<div id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
See the sample output here.

$(...).formSelect is not a function

enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here
'code'
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').formSelect();
$('.datepicker').datepicker();
});
</script>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>

I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
#section scripts{
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
}
You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.

How to show todos with ejs

I'm playing around with ejs and want to know how to have some todos appear in the html?
This is what i have to work with:
app.get("/", (req, res) => {
db.collection("todoejs")
.find()
.toArray((err, todoejs) => {
res.render("todo");
});
});
app.post("/create-item", (req, res) => {
console.log(req.body);
db.collection("todoejs").insertOne({todo: req.body.item});
res.redirect("/");
});
I have a todo.ejs in my views folder and would like to know how to get the todos to show.
This is what's in the ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 text-center py-1">To-Do App</h1>
<div class="jumbotron p-3 shadow-sm">
<form action="create-item" method="POST">
<div class="d-flex align-items-center">
<input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
<button class="btn btn-primary">Add New Item</button>
</div>
</form>
</div>
<ul class="list-group pb-5">
<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
<span class="item-text"><%= todoejs %></span>
<div>
<button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
<button class="delete-me btn btn-danger btn-sm">Delete</button>
</div>
</li>
</ul>
</div>
</body>
</html>

The second parameter of res.render takes in the variables you want to pass to the template.
In this example, you might want to do res.render("todo", { todoejs: todoejs });
Then todoejs is defined in the template and you can use it however you wish.

Dojo Mobile 522.remove is not a function - SpinWheelDatePicker locks on release event

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:
<script type="text/javascript">
// Fix incompatibility between Prototype and Dojo
Event.Handler.prototype.remove = function(){
this.stop();
};
</script>
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.