i got this error while using Mobile PopOver when click 'Select Location'
My Page is like below:
<div data-role="view" >
<div> Home </div>
</div>
<div data-role="view" data-layout="pop" id="Location">
<div data-role="popover" id="PLocation" data-popup='{"height": 140, "width": 350}'>
<ul data-role="listview" data-click="closeParentPopover">
<li><label>Sydney, Australia <input name="location" type="radio"></label></li>
<li><label>New York, USA <input name="location" type="radio"></label></li>
<li><label>Miami, USA <input name="location" type="radio"></label></li>
</ul>
</div>
</div>
<div data-role="layout" data-id="pop">
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" href="#PLocation" data-role="button">Select location</a>
</div>
</div>
</div>
My Page is like below:
<div data-role="view" >
<div> Home </div>
</div>
<div data-role="view" data-layout="pop" id="Location">
<div data-role="popover" id="PLocation" data-popup='{"height": 140, "width": 350}'>
<ul data-role="listview" data-click="closeParentPopover">
<li><label>Sydney, Australia <input name="location" type="radio"></label></li>
<li><label>New York, USA <input name="location" type="radio"></label></li>
<li><label>Miami, USA <input name="location" type="radio"></label></li>
</ul>
</div>
</div>
<div data-role="layout" data-id="pop">
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" href="#PLocation" data-role="button">Select location</a>
</div>
</div>
</div>
1 Answer, 1 is accepted
0
aremuga
Top achievements
Rank 1
Rank 1
answered on 26 Sep 2012, 05:04 AM
Try this.. it works fine..
<!DOCTYPE>
<html>
<head>
<title>Action PopOver</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="main" data-layout="app">
<div data-role="popover" id="myPopOver">
<div data-role="view">
<ul data-role="listview" data-style="inset">
<li >Print</li>
<li >Send </li>
<li >Export </li>
</ul>
</div>
</div>
</div>
<div data-role="layout" data-id="app">
<header data-role="header">
<div data-role="navbar">
<span>PopOver Demo</span>
</div>
</header>
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" data-role="button" href="#myPopOver" data-rel="popover">Action</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<title>Action PopOver</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="main" data-layout="app">
<div data-role="popover" id="myPopOver">
<div data-role="view">
<ul data-role="listview" data-style="inset">
<li >Print</li>
<li >Send </li>
<li >Export </li>
</ul>
</div>
</div>
</div>
<div data-role="layout" data-id="app">
<header data-role="header">
<div data-role="navbar">
<span>PopOver Demo</span>
</div>
</header>
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" data-role="button" href="#myPopOver" data-rel="popover">Action</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>