Im inserting an widget within template like this:
<script id="example-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>#= example #</h3>
</div>
</script>
But the widget is does not initialize, just show as plain html.
Some people suggest to use kendo.mobile.init and it works, but looks like a hack. This method is not at least documented.
My question is: what can I do to properly initialize widgets inside template?
Complete example:
<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
<script>
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
}
function expandHandler(){
console.log("expand");
}
</script>
</body>
</html>
Not sure how you do that mvvm way, go on with this initializing it on the javascript instead if it is okay
See the example :
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function expandHandler(){
console.log("expand");
}
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
$(".test").kendoMobileCollapsible({
expand: expandHandler
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div class="test">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
</body>
</html>
Related
Here is a small sample of using Vuetify. How can I correctly translate it into brython ?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
//https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
})
</script>
</body>
</html>
I can't correctly translate js part of the code to brython. I expect to get working brython sample with Vuetify.
I saw samples of using pure Vue from brython and I like to see the same with Vuetify, because with Vuetify I can use ready components, just fill new html tags and fill json.
I found. Javascript objects are called through window.
'''
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython_stdlib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body onload="brython(1)">
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script type="text/python">
#https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
from browser import document, window
Vue = window.Vue
app = Vue.new({
'el': '#app',
'vuetify': window.Vuetify.new(),
'data': {
'colors': [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4'
],
'slides': [
'First',
'Second',
'Third',
'Fourth',
'Fifth'
]
}
})
</script>
</body>
</html>
'''
I am having trouble creating a drop down that can sort my search results, any help is welcome. I have tried a couple of different methods that I have found from the internet but so far none have worked (I have no doubt in my mind that it is user error as others seem to have had success using those methods.) I apologise in advance for my being new at coding.
I have put my new code into this post if you could assess it and explain to me why it is not working I would be eternally grateful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jenewan Pets</title>
<link rel="icon" type="image/gif/png" href="img/Logo.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<body background="img/bckgrnd.png">
<div id="container">
<div id="header">
<img src="img/Header.png" style="position: absolute; top: 0px;"/>
<h1>
<img src="img/logo.png" alt="logo" height="100px" width="100px" border="0px" style=position:relative; />
<div class="box">
<div class="container-1">
<form method="get" action="searchresults11.php" id="searchForm">
<input type="text" id="searchBox" name="q" placeholder="Let's Sniff it Out...">
<div class="search-icon">
<img class="search-icon" img src="img/PawSearch.png" width="18" height="18" alt="search icon" />
</div>
</div>
</div>
</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href="/index.php">Home</a></li>
<li>Dogs</li>
<li>Cats</li>
<li>Birds</li>
<li>Reptiles/Exotic</li>
<li>Aquatics</li>
</ul>
</div>
<div id="Results">
<h2>We sniffed and we found...</h2>
<?php
$con=mysqli_connect("localhost","root","","catalog");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($_GET['q'])){
$searchq = $_GET['q'];
}
$q = mysqli_query($con,"SELECT * FROM final_dog_catologue_full where
keywords LIKE '%$searchq%' OR brand LIKE '%$searchq%' OR name LIKE '%$searchq%' LIMIT 0, 40") or
die(mysqli_error("Sorry we lost the scent..."));
echo "<table border='2'>
<tr>
<th> </th>
<th id='Name_Header'>Item Name</th>
<th>Brand</th>
<th id='Price_Header'>Price</th>
</tr>";
while($row = mysqli_fetch_array($q))
{
echo "<tr>";
echo "<td><img src='img/".$row['Picture']."'></td>";
echo "<td headers='Name_Header'>" . $row['Name'] . "</td>";
echo "<td headers='Brand'>" . $row['Brand'] . "</td>";
echo "<td headers='Price_Header'>£" . $row['Retail_Price_With_Delievery'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<script type="text/javascript">
var table = $('table');
$('#Name_Header, #Price_Header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
</script>
</div>
</div>
<div id="footer">
Copyright © 2017 Jenewan Pets
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
I'm testing ckeditor.
I'm trying to create a ckeditor which fits the "div" where it's placed.
This is what I've tried, but only works on startup and not with resize window.
Is there an easy way to fit ckeditor the div where it's places?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/menu.css">
<script src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script>
function iniciar()
{
e= CKEDITOR.replace( 'editor1',
{ uiColor: '#CCEAEE' ,
on: { 'instanceReady' : function( evt )
{redimensionar();}
}
} );
}
var r;
function redimensionar(p1)
{
if (p1==1)
{ console.log("e: " + $("#").width() +','+$("#c1").height());
console.log("c1: " + $("#c1").width() +','+$("#c1").height());
e.resize($("#c1").width(),$("#c1").height());
}
else
{ if (r)
clearTimeout(r);
r=setTimeout(redimensionar, 500, 1);
}
}
</script>
</head>
<body class="easyui-layout" onload="iniciar()" onresize="redimensionar()">
<!-- Norte -->
<div data-options="region:'north'" style="height:10%">
My title
</div>
<!-- Centro -->
<div id="c1" data-options="region:'center'" style="height:80%; background:skyblue;">
<textarea id="editor1" >
<p>This is some <strong>sample text</strong>. You are using CKEditor.</p>
<p><iframe align="middle" frameborder="1" height="500" id="portada" longdesc="La gran portada" name="Portada" scrolling="yes" src="portada.html" style="background: green" title="La portada" width="500">Contenido iframe.</iframe></p>
<p> </p>
</textarea>
</div>
<!-- Pie -->
<div data-options="region:'south'" style="height:30px">
Foot
</div>
</body>
</html>
Is there any alternative which can make struts2 jqgrid better in IE6. The images are sample images.
In my application I have developed several grids using plugins All are working fine in all browsers but looking weird in IE6
You can find the differences between them IN IE6 header columns looks weird and that hide/unhide button also missing ..
Please help me how to fix this thing My application has to work in IE6
versoins I am using
Struts2-core 2.3.8
Struts2-jquery-grid-3.6.1
Struts2 jQuery-3.6.1
This one is the html code by clicking on view source
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="struts2,jquery, hibernate, plugin,showcase, grid" />
<meta http-equiv="description" content="Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins" />
<title>Struts2 jQuery Grid Plugin Showcase - 3.7.0</title>
<link href="/struts2-jquery-grid-showcase-3.7.0/styles/flexible-grids.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="/struts2-jquery-grid-showcase-3.7.0/yaml/core/iehacks.min.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-ui.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.form.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.subscribe.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/struts2/jquery.struts2.min.js?s2j=3.7.0"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.7.0";
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath = "/struts2-jquery-grid-showcase-3.7.0/struts/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.7.0");
});
</script>
<link id="jquery_theme_link" rel="stylesheet" href="themes/showcase/jquery-ui.css?s2j=3.7.0" type="text/css"/>
<script type="text/javascript">
var employee_detail_url = '/struts2-jquery-grid-showcase-3.7.0/employees-detail.action;jsessionid=3934431750DCFB5887508B8F186FD38D';
</script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/js/showcase.js; jsessionid=3934431750DCFB5887508B8F186FD38D"></script>
</head>
<body>
<header class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-wbox" style="padding: 5px 0 0 0;">
<div>
<h1 class="ui-state-default" style="background: none; border: none; margin: 0;">Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins</h1>
<h4 class="ui-state-default" style="background: none; border: none;">Struts2 jQuery Plugin - Version 3.7.0 / Full Hibernate Plugin - Version 2.2.1 GA</h4>
</div>
</div>
</header>
<nav id="nav" class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-hlist">
<ul id="navlist">
<li><a id="gridlink" href="javascript:void(0)">Grid (Editable)</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridlink = {};
options_gridlink.jqueryaction = "anchor";
options_gridlink.id = "gridlink";
options_gridlink.targets = "main_content";
options_gridlink.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridlink'),options_gridlink);
});
</script></li>
<li><a id="gridsubgridlink" href="javascript:void(0)">Grid with Subgrid</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridsubgridlink = {};
options_gridsubgridlink.jqueryaction = "anchor";
options_gridsubgridlink.id = "gridsubgridlink";
options_gridsubgridlink.targets = "main_content";
options_gridsubgridlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- subgrid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridsubgridlink'),options_gridsubgridlink);
});
</script></li>
<li><a id="griddndlink" href="javascript:void(0)">Grid with Drag and Drop</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_griddndlink = {};
options_griddndlink.jqueryaction = "anchor";
options_griddndlink.id = "griddndlink";
options_griddndlink.targets = "main_content";
options_griddndlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- dnd.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#griddndlink'),options_griddndlink);
});
</script></li>
<li>Struts2 jQuery Plugin</li>
<li>Full Hibernate Plugin</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div class="ym-wrapper">
<div id="main_content"
class="ym-wbox"
>
<img id="indicator" src="images/indicator.gif" alt="Loading..."/>
</div><script type='text/javascript'>
jQuery(document).ready(function () {
var options_main_content = {};
options_main_content.jqueryaction = "container";
options_main_content.id = "main_content";
options_main_content.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#main_content'),options_main_content);
});
</script>
</div>
</div>
<footer>
<div class="ym-wrapper">
<div class="ym-wbox">
<p style="text-align: center;">
Written by Johannes Geppert and José Yoshiriro<br/>
Layout based on YAML
</p>
</div>
</div>
</footer>
</body>
I was testing out this demo on query-ui-maps:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
Everything is the same except for the head section of my index.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css" />
<link href="css/jquery.mobile-swatch.css" rel="stylesheet" type="text/css"/>
<link href="css/custom-icons.css" rel="stylesheet" type="text/css"/>
<link href="css/mapapp.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-iphone.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="js/jquery-ui-autocomplete-1-8-15.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
The demo works in safari on my desktop but loads the screen attached whether I test in an ios5 simulator or an ios5 phone. No errors are logged to the console. I am testing in Xcode and using phone gap.
Please help.
This is the code:
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
</head>
<body>
<div id="directions_map" data-role="page">
<div data-role="header">
<h1>jQuery mobile with Google maps v3</h1>
<!--<a data-rel="back">Back</a>-->
</div>
<div data-role="content">
<div class="ui-bar-f ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas_1" style="height:300px; width:100%;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-f" type="text" value="Göteborg, Sweden" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-f" type="text" value="Stockholm, Sweden" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div>
</div>
</body>
After much searching, this has proved to be the best answer:
http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position