I am adding a JavaScript file in my Laravel 6 application using the asset helper: <script src="{{ asset('js/todolist.js') }}"></script> here is the error I get:
Facade\Ignition\Exceptions\ViewException
syntax error, unexpected 'js' (T_STRING), expecting ')' (View: C:\Dev\Laravel\teacher\resources\views\layouts\base.blade.php)
The JS file is under my public/js folder.
Here's my blade file content:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>
#section('title')
{{ config('app.name', 'Laravel') }}
#endsection
#yield('title')
</title>
<!-- plugins:css -->
<link rel="stylesheet" href="{{ asset('vendors/ti-icons/css/themify-icons.css') }}">
<link rel="stylesheet" href="{{ asset('vendors/css/vendor.bundle.base.css') }}">
<!-- endinject -->
<!-- Plugin css for this page -->
#yield('css_top')
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="{{ asset('css/vertical-layout-light/style.css') }}">
<!-- endinject -->
<link rel="shortcut icon" href="{{ asset('images/favicon.png') }}"/>
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html -->
#include('partials._navbar')
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_settings-panel.html -->
#include('partials._settings-panel')
<!-- partial -->
<!-- partial:partials/_sidebar.html -->
#include('partials._sidebar')
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
#yield('content')
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
#include('partials._footer')
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('js/off-canvas.js') }}"></script>
<script src="{{ asset('js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('js/template.js') }}"></script>
<script src="{{ asset('js/settings.js }}"></script>
<script src="{{ asset('js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
#section('css_bottom')
<script src="{{ asset('js/dashboard.js') }}"></script>
#endsection
#yield('css_bottom')
<!-- End custom js for this page-->
</body>
</html>
Please help.
UPDATE:
added blade file
There was an error somewhere in my blade file.
I forgot to put the apostrophe and close the parenthesis:
HERE: <script src="{{ asset('js/settings.js }}"></script>
and the error has been reported here:
<script src="{{ asset('js/todolist.js') }}"></script>
After making the correction by adding the apostrophe and parenthese, everything works well.
Related
I created a navigation bar inside the class jumbotron using bootstrap. But it seems that there is some problem with the navigation bar menu. There is no padding or styles in the "li" tags. All the li tags just sticked together in the following manner:
HOMEPRICEGALLERYMEDIAFAQsCONTACT US
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">here comes the image</img>
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</body>
you forgot to add a tags to your li tags. this a tag is responsible for the padding--
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</body>
</body>
If you wrap the text inside the list items in anchor tags, you would see it styled :) Let me know if it works
<ul class="nav navbar-nav">
<li><a href='#'>HOME </a></li>
<li><a href='#'>PRICE </a></li>
<li><a href='#'>GALLERY </a></li>
<li><a href='#'>MEDIA </a></li>
<li><a href='#'>FAQs </a></li>
<li><a href='#'>CONTACT US </a></li>
</ul>
Hello I am starting to learn in web programming language using asp.net mvc4 and bootstrap. I am getting this error (Server Error in '/' Application) when running my application but if it is in default code it is functioning fine.
These are my codes
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
I didn't change anything here
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="Corinthians 3" />
<title>Sample BS</title>
<!-- Bootstrap Core CSS -->
<link href="#Url.Content("~/plugin/bower_components/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- MetisMenu CSS -->
<link href="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.css")" rel="stylesheet" type="text/css" />
<!-- DataTables CSS -->
<link href="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
<!-- Animation CSS -->
<link href="#Url.Content("~/plugin/css/animate.css")" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="#Url.Content("~/plugin/dist/css/sb-admin-2.css")" rel="stylesheet" type="text/css" />
<!-- Custom Fonts -->
<link href="#Url.Content("~/plugin/bower_components/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="../../plugin/dateTimePicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div>
<label for="disabledSelect" style="color:#A94442; display:none;" id="lblTotalCollectibles"></label>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; background-color:#337AB7;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
< span class="sr-only"> Toggle navigation < /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
</button>
<a class="navbar-brand" href="#Url.Content("~/BS/BSSSS")" style="color:White;">BS</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li style="margin-top:13px;">
<span class="fa fa-clock-o" style="color:White;" id="timeTxt"></span>
</li>
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li> <!--style="display:none;"> -->
</li>
<li> <!--style="display:none;"> -->
</li>
<li>
<i class="fa fa-wrench fa-fw" id="side-menu-filemaintenance"></i> File Maintenance <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
</li>
<li>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper" style="background-image:url(../../Images/bg.gif); background-attachment: fixed;">
<div class="container-fluid">
#RenderBody()
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="#Url.Content("~/plugin/bower_components/jquery/dist/jquery.min.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/bootstrap/dist/js/bootstrap.min.js")" type="text/javascript"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.js")" type="text/javascript"></script>
<!-- DataTables JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/datatables/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/js/jquery.scrollUp.min.js")" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/moment-with-locales.js" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Custom Theme JavaScript -->
<script src="#Url.Content("~/plugin/dist/js/sb-admin-2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/userdefined/Sales/jsSales.js")" type="text/javascript"></script>
</body>
</html>
And Lastly for my View>BS>BSSSS.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<h1>aaaa</h1>
</div>
</body>
</html>
Here is the picture of the error.
UPDATED
#Gaurav here is the new error that i follow your suggested way.
Approach 1
Rename your BSSSS.cshtml to Index.cshtml and move it to Views/Home folder (replace existing file).
Leave the statement as return View(); in Home controller's Indexaction.
Approach 2
Let the BSSSS.cshtml file remain at path Views/BS/BSSSS.cshtml. In your Home controller's Index action change the return View(); to return View("BSS/BSSSS.cshtml");
I have tried many solutions from Stack Overflow and looked at the bootstrap documentation and have downloaded local copy of shiv.js and repond.js and included them in footer but after refreshing in IE8 its still same as before no javascript is working and even no media queries are rendering as rendered in google chrome. navbar is also no displaying.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Theme Webmonopolist">
<meta name="author" content="Faisal Naseer">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title> WebMonopolist</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link href="assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
</head>
<body>
.......
......
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/retina.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/jquery-func.js"></script>
<script type=”text/javascript” src=’https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/shiv.js"></script>
<script src="assets/js/respond.js"></script>
<![endif]-->
</body>
</html>
First of all, you should put your shiv and respond at the <head> tag, like they show here. It makes it possible detect browser's features before the whole page is loaded.
Second, here they say that serving respond.js from file:// pseudo-protocol is disabled for security purposes. Even serving it from a CDN, apparently, won't work, since here is indicated that for serving from another domain you must make some configuration.
So finally, I fixed all of it, ran the following code in localhost, not from file://, and the navbar works like a charm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv/dist/html5shiv.min.js"></script>
<script type="text/javascript" src="lib/respond/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1>Hello, from IE8!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I have a SearchGoogle html page which opens a google map.I want to load this html file into a modal dialog on the click of a button.
Defined a modal on my main index.jsp page and href the SearchGoogle.html. The content doesnt load up.Any help?
The below page is the remote page i want to load in an Modal Dialog.Have tried remote content loading.It is not working
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
If you look up the load method in the jQuery API doc, it says that the load method uses innerHTML to parse the page to be loaded and that:
During this process, browsers often filter elements from the document such as <html>,
<title>, or <head> elements.
I suggest putting the googleMap.css on the modal page and moving your scripts in the page above to the body tag like this:
HTML for the page to be loaded (which I'm calling remote.html):
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Google Map Modal Title</h4>
</div>
<div class="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>
HTML for the page with the modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Add the googleMap.css on this page -->
<link rel="stylesheet" type="text/css" href="css/googleMap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- The contents of remote.html will be injected here. Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I have created a simple project (Hybrid with Dojo) that contains one view with three pages - all created using the Dojo Mobile View wizard.
After I build all and deploy, and preview with the Worklight Console, the view doesn't render the arrows of the list items properly and once a list item is clicked, it looks like the new page opens on top of the view, instead of transitioning.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld2App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HelloWorld2App.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Heading'"></div>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 1',moveTo:'page1'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 2',moveTo:'page2'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 3',moveTo:'page3'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 1',back:'Back',moveTo:'view1'"></div>On page 1
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page2">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 2',back:'Back',moveTo:'view1'"></div>On page 2
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page3">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 3',back:'Back',moveTo:'view1'"></div>On page 3
</div>
<script src="js/initOptions.js"></script>
<script src="js/HelloWorld2App.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Since Virginie is not copying the answer from the comments, here is answer for all to know:
The above did not work while using the internal browser in Eclipse. After moving to use an external browser this is now working.