Develop Reference

Ajax not working in webview android (Uncaught TypeError: undefined is not a function)

I am trying to call ajax from android webview and it's not working. I am getting this error in console window
08-29 12:28:16.411: E/CONTENT(14146): [object Object] # 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.536: E/CONTENT(14146): Uncaught TypeError: undefined is not a function # 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.683: E/CONTENT(14146): Uncaught TypeError: undefined is not a function # 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.883: E/CONTENT(14146): Uncaught TypeError: undefined is not a function # 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:17.202: E/CONTENT(14146): Uncaught TypeError: undefined is not a function # 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
I am using this android code
webview = (WebView) findViewById(R.id.webview);
webview.setWebViewClient(new WebViewClient(){
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
return super.shouldOverrideUrlLoading(view, url);
}
public void onPageStarted(WebView view, String url, Bitmap favicon) {
dialog.show();
}
#Override
public void onPageFinished(WebView view, String url) {
if(url.equals("http://xyz")){
editor.putString("login", "true");
editor.commit();
trytologin = false;
}else if(url.equals("http://xyz")){
editor.clear();
editor.commit();
Intent intent = new Intent(WebActivity.this,MainActivity.class);
if(trytologin == true){
intent.putExtra("login", "failed");
}
startActivity(intent);
finish();
}
if(!isNetworkAvailable()){
alertDialog();
linearLayout.setVisibility(View.VISIBLE);
webview.setVisibility(View.GONE);
}else{
webview.setVisibility(View.VISIBLE);
imageView.setVisibility(View.VISIBLE);
}
dialog.dismiss();
//pd.dismiss();
//Toast.makeText(WebActivity.this, url, Toast.LENGTH_LONG).show();
}
});
webview.setWebChromeClient(new WebChromeClient(){
#Override
public boolean onConsoleMessage(ConsoleMessage cm)
{
Log.e("CONTENT", String.format("%s # %d: %s",
cm.message(), cm.lineNumber(), cm.sourceId()));
return true;
}
});
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAppCacheEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
webview.getSettings().setSupportZoom(true);
webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webview.getSettings().setAllowFileAccessFromFileURLs(true);
webview.getSettings().setAllowUniversalAccessFromFileURLs(true);
webview.getSettings().setLoadsImagesAutomatically(true);
webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setAllowContentAccess(true);
webview.getSettings().setUseWideViewPort(true);
I am trying to call this ajax file
function GoogleFetchAndFillHistoryLocation(t,e,n,o){$.ajax({url:"http://maps.googleapis.com/maps/api/geocode/json?latlng="+t+","+e,success:function(t){var e=[],c="",r="";t.results[0].address_components.forEach(function(t,n,o){"Unnamed Road"!=t.long_name&&e.push(t.long_name),t.types.includes("sublocality")&&(c=t.long_name),t.types.includes("locality")&&(r=t.long_name)}),console.log(t.results[0].formatted_address);var i=e.join(", "),a=c+", "+r;o.html(i),n.html(a)},error:function(t){o.html("Some error occurred while fetching address")}})}function HistorySelector(t){this.$selector=t}!function(t){"use strict";var e=function(t,n){var o=/[^\w\-\.:]/.test(t)?new Function(e.arg+",tmpl","var _e=tmpl.encode"+e.helper+",_s='"+t.replace(e.regexp,e.func)+"';return _s;"):e.cache[t]=e.cache[t]||e(e.load(t));return n?o(n,e):function(t){return o(t,e)}};e.cache={},e.load=function(t){return document.getElementById(t).innerHTML},e.regexp=/([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g,e.func=function(t,e,n,o,c,r){return e?{"\n":"\\n","\r":"\\r"," ":"\\t"," ":" "}[e]||"\\"+e:n?"="===n?"'+_e("+o+")+'":"'+("+o+"==null?'':"+o+")+'":c?"';":r?"_s+='":void 0},e.encReg=/[<>&"'\x00]/g,e.encMap={"<":"<",">":">","&":"&",'"':""","'":"'"},e.encode=function(t){return(null==t?"":""+t).replace(e.encReg,function(t){return e.encMap[t]||""})},e.arg="o",e.helper=",print=function(s,e){_s+=e?(s==null?'':s):_e(s);},include=function(s,d){_s+=tmpl(s,d);}","function"==typeof define&&define.amd?define(function(){return e}):t.tmpl=e}(this),HistorySelector.prototype.bindEvents=function(){var t=this;this.$selector.on("change",function(){t.fetchData()})},HistorySelector.prototype.fetchData=function(){$.ajax({context:this,url:this.$selector.data("url"),data:{profiles:{interval:this.$selector.val()}},headers:{"X-Auth-Token":$("#auth-token").data("token")},success:function(t){console.log(t),this.populateData(t),$(".location-panel").each(function(t,e){var n=$(e);setTimeout(function(){GoogleFetchAndFillHistoryLocation(n.data("lat"),n.data("long"),n.find(".short-location"),n.find(".formatted-address"))},200*t)})},error:function(t){console.log(t)}})},HistorySelector.prototype.populateData=function(t){var e=$(tmpl("history-locations",t).trim());$(".history-locations").empty().append(e),$("body").scrollTop()<180&&$("html, body").animate({scrollTop:"180vh"},"slow")},HistorySelector.prototype.init=function(){},$(function(){$(".selectors input").each(function(){var t=new HistorySelector($(this));t.init(),t.bindEvents()})});
you can see the ajax file on this link as well - http://www.loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
I am using this html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babatrucks</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lNJn5/GLbnS0cgUYjalFUT+UsgCcDckhWHcqI32OeJ0=" name="csrf-token" />
<link href="/assets/application-33b3164661d3b2d630f9cbc88419feb4.css" media="all" rel="stylesheet" />
<link href="/assets/m_application-9613cb73f45d486ef514a74fa1964a46.css" media="all" rel="stylesheet" />
<script src="/assets/application-95d8b0297f927b393dd0e1aaf163bc4d.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<link href="/assets/m/trucks/show-bcd1a590d01e03df2a78b4c5dbd1a975.css" media="screen" rel="stylesheet" />
<script src="/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js"></script>
<div class="row top-bar">
<div class="col-xs-2 text-center">
<a class="back-arrow" href="/m/trucks">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a> </div>
<div class="col-xs-8 text-center title">
NL 01L 2273
</div>
<div class="col-xs-2 text-right">
</div>
</div>
<div class="row">
<iframe class='locate-map' src="/m/trucks/296/locate"></iframe>
<div class="col-xs-12">
<div class="row">
<div class="selectors rohan-container">
<ul class="backline">
<hr class="rohan-hr">
<li>
<label for="profiles_interval_1">1 hours</label>
<!-- <input type="radio" id="f-option" name="selector"> -->
<input data-url="http://www.example.com/" id="profiles_interval_1" name="profiles[interval]" type="radio" value="1" />
<div class="check"></div>
</li>
<li>
<label for="profiles_interval_6">6 hours</label>
<!-- <input type="radio" id="s-option" name="selector"> -->
<input data-url="http://www.example.com/" id="profiles_interval_6" name="profiles[interval]" type="radio" value="6" />
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<label for="profiles_interval_24">24 hours</label>
<!-- <input type="radio" id="t-option" name="selector"> -->
<input data-url="http://www.example.com/" id="profiles_interval_24" name="profiles[interval]" type="radio" value="24" />
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<!-- rohan ends -->
</div>
<div class="row history">
<div class="col-xs-12">
<div class="row">
<div class="history-locations col-xs-12"></div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" id="auth-token" data-token=""></div>
<script src="/assets/timeline/modernizr-04ac4151e53119ba85cdc7679379cd0d.js"></script>
<script type="text/x-tmpl" id="history-locations">
<section id="cd-timeline" class="cd-container">
{% for (var i = 0; i < o['profiles'].length; i++) { %}
<div class="cd-timeline-block location-panel" data-lat="{%= o['profiles'][i]['lat'] %}" data-long="{%= o['profiles'][i]['long'] %}">
<div class="cd-timeline-img cd-picture">
<img alt="Picture" src="/assets/timeline/cd-icon-location-20955b176b47169a313e3c8c11803cc1.svg" />
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2 class="">{%= o['profiles'][i]['actual_received_at'] %}</h2>
<p class="formatted-address"></p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
{% } %}
</section>
</script>
<script src="/assets/timeline/main-f1dcfd5d7be80e6258f34c7dded2ee86.js"></script>
<script type="text/javascript">
function FetchAndFillLocation(lat, long, infoDiv, truckNumber, speed) {
var request = new XMLHttpRequest();
var method = 'GET';
var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='
+ lat
+ ','
+ long
+ '&sensor=true';
var async = true;
request.open(method, url, async);
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
var data = JSON.parse(request.responseText);
var address = data.results[0];
infoDiv.empty();
infoDiv.append('<div class="info-box-title"><span class="left-align-number"><i class="fa fa-truck"></i> '+ truckNumber +'</span><span class="right-align-speed"><i class="fa fa-tachometer"></i> ' + speed + ' Km/h</span></div><div class="info-box-text">' + address.formatted_address + '</div>');
}
};
request.send();
}
function UpdateMarkerPosition(current_location_div) {
var request = new XMLHttpRequest();
var method = 'GET';
var url = '/api/v1/trucks/location?truck[slug]=abc';
var async = true;
request.open(method, url, async);
request.setRequestHeader('X-Auth-Token', 'abc');
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200) {
var data = JSON.parse(request.responseText).current_cordinate;
var truckCords = { lat: data.lat, lng: data.long }
FetchAndFillLocation(truckCords.lat, truckCords.lng, current_location_div, data.key, data.speed);
}
setTimeout(function() {
UpdateMarkerPosition(current_location_div)
}, 10000);
}
};
request.send();
}
$(function() {
UpdateMarkerPosition($('.current-location'));
})
</script>
</div>
</div><!--/row-->
<footer>
</footer>
</div> <!-- /container -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-81486803-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

I assume, that a lot of individual files don't end their code with a semicolon. Most jQuery scripts end with (jQuery) and you need to have (jQuery);.
Consider adding jquery locally or via a CDN.

Ionic Popover cannot pass parameter to controller

Here is the code
App.js
(...)
.state('app.dishdetails', {
url: '/menu/:id',
views: {
'mainContent': {
templateUrl: 'templates/dishdetail.html',
controller: 'DishDetailController'
}
}
});
Controller.js
.controller('DishDetailController', ['$scope', '$stateParams', 'menuFactory', 'favoriteFactory', 'baseURL','$ionicPopover', '$ionicListDelegate', '$ionicModal', function($scope, $stateParams, menuFactory, favoriteFactory, baseURL, $ionicPopover, $ionicListDelegate, $ionicModal) {
$scope.addFavoriteMenu = function(index){
console.log("index is " + index);
};
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
}])
Main HTML
<ion-view view-title="Dish Details">
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<ion-content>
(...)
</ion-content>
</ion-view>
Popover HTML
<ion-popover-view>
<ion-content>
<ul class="list">
<li class="item" ng-click="addFavoriteMenu({{dish.id}})">
Add to Favorites
</li>
</ul>
</ion-content>
db.json
"dishes": [
{"id": 0};
{"id": 1};
{"id": 2};
]
I can't get the parameter in the "addFavoriteMenu({{dish.id}})" in the controller.js, it always come out as undefined
but, when I try to inspect using Google Chrome, the ID could display properly in [ion-popover-view]
Is there any mistake that I create on here? or anything?

Trying to reproduce your issue I noticed that your JSON is wrong: there are semicolons (;) at the end of each line instead of colons (,).
Howevere here is a working snippet:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicPopover) {
$scope.dishes = [
{"id": 0},
{"id": 1},
{"id": 2}
];
$scope.addFavoriteMenu = function(index) {
console.log(index);
alert("index is "+index);
}
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Popover</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="platform-ios" ng-controller="AppCtrl">
<div class="bar bar-header bar-positive">
<h1 class="title">Popover</h1>
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</div>
</div>
<ion-content class="padding has-header">
Click the more info icon in the top right. In an actual app the platform style will automatically be set.
</ion-content>
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<ul class="list">
<li ng-repeat="dish in dishes" class="item" ng-click="addFavoriteMenu({{dish.id}})">
Add to Favorites {{dish.id}}
</li>
</ul>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>

Phonegap Geolocation API always getting error code 3

I am using phonegap geolocation API in my phonegap android application.It always shows error code code 3,Timeout error.I am also try to change timeout variable value to increased,enableHighAccuracy to be true.But no change in result.But it will works on browser not runs in application.Give me the solution for this problem.
This is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/contact.css" type='text/css' />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"
type='text/css' />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJAbwOQjaVjDy9XJ0UEZCvTdZeW_atXak&sensor=false">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.9.0.js"></script>
<script src="jquery.mobile/jquery-1.10.2.min" type='text/javascript'></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
$(document).on("mobileinit", function() {
$.mobile.phonegapNavigationEnabled = true;
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.loadingMessageTextVisible = true;
$.mobile.pageLoadErrorMessage;
});
$(document).ready(function() {
$('#Login').show();
$('#Contacts').hide();
});
function success(name) {
alert(name);
}
function error() {
alert("error");
}
function login() {
var name = $("#name").val();
if (navigator.notification) {
navigator.notification.alert("Welcome " + name, alertDismissed, 'Sample App', 'Ok');
} else {
alert("Welcome " + name);
}
var options = {
enableHighAccuracy: true,
timeout: 8000,
maximumAge: 10000
};
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
$("#Login").hide();
$("#Contacts").show();
}
function alertDismissed() {
console.log("ok");
}
function onSuccess(position) {
var latt1 = position.coords.latitude;
var lont1 = position.coords.longitude; //alert(latt1+" "+lont1);
var myLatlng1 = new google.maps.LatLng(latt1, lont1);
var mapOptions1 = {
center: myLatlng1,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions1);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: "You are here! (at least within a " + position.coords.accuracy + " meter radius)"
});
var circle = new google.maps.Circle({
radius: 26000,
strokeColor: "#00FF00",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#C0C0C0",
fillOpacity: 0.35,
map: map
});
marker1.setIcon("./images/blue_dot_circle.png");
marker1.setMap(map);
}
function onError(error) {
if (navigator.notification) {
navigator.notification.alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n', alertDismissed, 'Sample App', 'Ok');
} else {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function AlertConfirmed(buttonIndex) {
if (buttonIndex == 1) {
device.exitApp();
console.log(buttonIndex);
} else {
console.log(buttonIndex);
}
}
function goHome() {
navigator.app.loadUrl("http://www.google.co.in", {
openExternal: true
});
}
</script>
<script src="jquery.mobile/jquery.mobile-1.3.1.min.js"
type='text/javascript'></script>
</head>
<body>
<div data-role="page" >
<div id="Login">
<div data-role="header" data-position="fixed" data-theme="b"
data-tap-toggle="false" class="header" data-transition="none"
id="myFixedHeader">
<p>Sample Application</p>
</div>
<div data-role="content">
<div id="title">
<div
style="width: 90%; padding-left: 5%; padding-right: 5%; padding-top: 3%; padding-bottom: 1%;">
<input type="text" name="password" id="name" data-mini="true"
placeholder="Enter Your Name " value="" data-inline="true">
</div>
<center>
<div id="log" onclick="login()">Login</div>
</center>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>>
</div>
</div>
<div id="Contacts">
<div data-role="header" data-theme="b" data-tap-toggle="false"
data-position="fixed" class="header" data-transition="none">
<h3 id="htitle">Home Page</h3>
</div>
<div data-role="content" id="map_canvas" >
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>
</div>
</div>
</body>
</html>
I have added Permissions INTERNET,FINE_LOCATION,COARSE_LOCATION in manifest file
and corrova 2.9.0.js

Please make sure that you have <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> set in your android manifest.

I made one mistake in config.xml.Now,I have added
<access origin="*"/>
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
in my config.xml file.googlemap geolocation showed successfully

Make entry in app/res/xml/config.xml
Entry:
And in app/AndroidManifest.xml
Entry:
Also make sure that the enablehighAccuracy parameter is set to true.
Cheers!!

Swipe event - move the div

Please find the below code...
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<p class="question"></p>
<div class="answerTxt"></div>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
var ct = 0;
var jsonObj = {
"questions": [
"question 1",
"question 2",
"question 3"
],
"Type": [
"radio",
"checkbox",
"radio"
],
"Value": [
["Yes","No","Not Applicable"],
["Land","Garden","House","Office"],
["Good","Fair","Poor"]
]
}
$(document).on('pagebeforeshow',"[data-role=page]", function() {
init();
});
$(document).on("swipeleft","[data-role=page]",function(event) {
ct++;
init();
});
$(document).on("swiperight","[data-role=page]",function(event) {
ct--;
init();
});
function init() {
$(".answerTxt").empty();
$(".question").text((ct+1)+". "+jsonObj.questions[ct]);
if (jsonObj.Type[ct] == "radio" || jsonObj.Type[ct] == "checkbox"){
$(".answerTxt").append('<fieldset data-role="controlgroup" id="compCon"/>');
for(var i=0; i<jsonObj.Value[ct].length; i++){
$("#compCon").append('<label for="'+i+'"id="'+i+'">'+jsonObj.Value[ct][i]+'</label><input type="'+jsonObj.Type[ct]+'" name="rg2" id="'+i+'"/>');
$(".answerTxt").trigger("create");
$("input[type='"+jsonObj.Type[ct]+"']:first").attr("checked",true).checkboxradio("refresh");
}
}
}
</script>
</body>
</html>
In this example i am using swipe event to change the question. It works fine...
My question is how i move the content div in the swipe direction, and load the same div with new question and data..
for example please find the following link ... http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html#
NOTE:
above example shows loading a new page in each swipe. Here what i want is how i load the new div with new data?
Thanks in advance...

if you look at the source code of the demo you mention youll see it shows
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
});
you will just need to use the swiperight and swipeleft events to do what you need

Phonegap + Jquery mobile on Android: Multiple HTML Pages Javascript not working

Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.

In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.