Phonegap: playAudio is not defined - javascript

i'm a newbie in Android programming.,
now, i'm trying to play sound onclick with phonegap.,
here's my full code.,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="script/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="script/blues.min.css"/>
<link rel="stylesheet" href="script/style.css"/>
<script src="cordova-2.3.0.js"></script>
<script src="script/jquery-1.8.0.min.js"></script>
<script src="script/jquery.mobile-1.2.0.min.js"></script>
<script src="script/scripts.js"></script>
<script type="text/javascript">
var sound;
function playAudio(src) {
sound = new Media('/android_asset/www/sounds/' + src, onSuccess, onError);
sound.play();
}
function onSuccess() {
console.log("playAudio():Audio Success");
}
function onError(e) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
Upper Menu
Search
</div>
<div data-role="content">
<div class="ui-grid-d" align="center">
<div class="ui-block-a">
<a href="#a" data-rel="popup" data-position-to="window" data-position="center"
data-inline="true"><img
data-role="button" src="images/hiragana/base/a.png"></a>
</div>
</div>
</div>
<div data-role="popup" id="a" class="photopopup" data-overlay-theme="a" data-corners="false"
data-tolerance="30,15">
Close<img src="images/hiragana/a.gif">
<div align="center">
<img data-role="button" data-iconpos="notext" src="images/sound.png"/>
</div>
</div>
</div>
</body>
</html>
and the problem is i've got this error:
CordovaLog Uncaught ReferenceError : playAudio is not defined
Web Console Uncaught ReferenceError : playAudio is not defined at file:///android_asset/www/hira_menu.html : 1
note: file hira_menu.html is the file before this file.
I've searched the solving on this forum, but it's still not working.,
Anyone knows the solve, please...

Related

Dynamically Creating Pages on jQuery-mobile using javascript that reads JSON

Basically I'm trying to make my jquery-mobile application as dynamic as possible so therefore it takes as much variables as possible from a JSON file. I've set up a javascript method that takes in the JSON file, has a series of link buttons with different names and they link to pages which I'm trying to create dynamically and display information on via collapsible elements.
I'll concede that it's a faily ambitious method but it is valid unerrored javascript but I feel that jquery-mobile just won't be able to handle it.
If someone could take a look over my code and tell me if it is possible to do and if so what am I doing wrong? Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="Page1">
<div data-role="header" data-theme="c">
<a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back">Back</a>
Info
<h2>Skin & Soft Tissue</h2>
</div>
<div data-role="content" data-theme="c" id="Page1_Content">
<p class="infotext"><b>Clinical Condition:</b></p>
<div id="texts"></div>
<script type="text/javascript">
$(document).on("pageinit", "#Page1", function () {
var info = "";
var dpages = "";
var pageno = 1;
var imp = "Json/empirical.json";
$.getJSON(imp, function (data) {
$.each(data.tcontent, function (i, item) {
if (item.Name == 'Skin and Soft Tissue Infections') {
var search = item.Variations;
$.each(search, function (j, subitem) {
info += '' + subitem.condition + '';
dpages += '<div data-role="page" data-theme="a" id="Paged' + pageno + '"> <div data-role="header" data-theme="c"> <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a> Info <h2>Skin & Soft Tissue</h2> </div> <div data-role="content" data-theme="c" id="Paged ' + pageno + '_Content"> <div data-role="collapsible-set"><div data-role="collapsible" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-theme="d" data-content-theme="d"> <h3> Likely Organisms </h3> <p class="guidelinetext"> ' + subitem.organisms + ' </p></div></div> <div data-role="footer" data-theme="c"> <h2>(c) Darragh O Connor </h2></div> </div></div>';
pageno++;
});
}
$("#texts").empty().append(info).collapsibleset();
$("#pages").empty().append(dpages);
});
});
});
</script>
</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>
</div>
<div id="pages"></div>
</body>
</html>

Background using .html (content)

How can I change the background in this code to change dynamically? I tried incorporating the entire code in the dynamicCodeContainer1 but did not succeed.
<div style="background-color:#000000;height:200px;width:500px;float:left;"
id="consumed1">
<div id="dynamicCodeContainer1">no dynamic code loaded.</div>
</div>
Here is the full code:
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.1.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<style type="text/css">
<script type="text/javascript">
var refresh = 500;
function init()
{
loop(refresh);
}
function loop(x)
{
if (MW1002==false)
{
var content = '<input type="submit" id="Button1" value="Button1" data-corners="true" data-theme="a" />';
$('#dynamicCodeContainer1').html(content).trigger("create");
}
if (MW1002==true)
{
var content = '<input type="submit" id="Button1" value="Button1" data-corners="true" data-theme="b" />';
$('#dynamicCodeContainer1').html(content).trigger("create");
}
}
</script> </head>
<body onload="init()">
<script type="text/javascript"></script>
<section id="page1" data-role="page">
<div style="background-color:#000000;height:200px;width:500px;float:left;"
id="consumed1">
<div id="dynamicCodeContainer1">no dynamic code loaded.</div>
</div>
</section>
</body>
</html>

Phonegap - Changing css for offline mode not working

In onDeviceReady I'm trying to detect if a network connection is present with navigator.connection.type and if it's not then a div with the offline content is shown, but it's not working. running it on a device (Z10).
My page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone-no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/mustache.js"></script>
<script src="phonegap.js"></script>
</head>
<body onload="init()">
<div data-role="page" id="main">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div data-role="content">
<ul id="canlist" data-role="listview">
</ul>
New can
</div>
<div data-role="footer" data-theme="c">
<h2 class="offline">Offline Mode</h2>
</div>
</div>
<div data-role="page" id="newcan">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div id="candetailcontent" data-role="content">
</div>
<div data-role="footer" data-theme="c">
<p>Snapcan!</p>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('ready');
var networkstate = navigator.connection.type;
if(networkstate == "none")
{
$(".offline").css("visibility","visible");
}
}
</script>
</body>
</html>
my index.css:
.offline{
visibility: hidden;
color: #f00;
font-style:italic;
}
If there is no connection then the red"Offline Mode' should be visible but it's not. Any ideas?
I think you should try with cordova's offline eventlistener.
have you tried using the css property "display" on your offline class and either have it set to "none" if online or "" is offline?

Jquery mobile popup above/with google maps

With jQuery Mobile I can't get a popup with google maps loaded.
If I touch id="popupBasic" nothing pops up. Very strange, but if the google map api not is loaded the popup works!
>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/map.js"></script>
<script type="text/javascript" charset="utf-8" src="markers.js"></script>
<script>
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
$(document).on('pageshow', '#map', function (event)
{
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
</script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.mobile.js"></script>
</head>
<body onload="onLoad()">
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a></li>
<li>Favs</li>
<li>My position</li>
<li>Open Popup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>
Does someone have the same problem? I can't figure it out..
Greetz,
Frank
Working example: http://jsfiddle.net/Gajotres/GHZc8/
I have changed your example, popup will display if you click on a button #myposition.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script>
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1>
</div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p> This is popup</p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a>
</li>
<li>
Favs
</li>
<li>
My position
</li>
<li>
Open Popup
</li>
</ul>
</div>
<!-- /navbar -->
</div>
</div>
</body>
</html>
CSS :
#popupBasic {
width: 300px !important;
height: 300px !important;
}
Javascript:
$(document).on('pageshow', '#map', function (event) {
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
function max_height() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find('[data-role="content"]').height(content_height);
}
function onSuccess(position) {
var minZoomLevel = 15;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function onError() {
alert('Error');
}

Phonegap Jquery Mobile Saving Data to Phone

Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.
Where am I going wrong below?
Do i need to put this code block somewhere else?
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
Full html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>
Home Page</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile! new page
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
<h1>
new Page</h1>
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs
$(document).on("pageinit","#newpage",function(){
$('#saveButton').click(function() {
localStorage.setItem("name", $('#name').val());
});
});
$(document).on('pageshow','#newpage', function() {
var personName = localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their command does not work for me. See my answer: https://stackoverflow.com/a/12707386/561545
Small correction! .val should be .html. Please see the below code.
$('#my_name').html(personName);
add:
div id="my_name"

Categories