Taking pictures and showing them on another page with Intel XDK - javascript

I'm very new with Intel-XDK.
Building a new App using the AppStarter framework.
I'm trying to make a very basic App that takes pictures on one "page", and then allows me to view the image(s) on another page, where I also want to capture details about each image.
I get the idea so far that you only really build one page with XDK, ie, everything is in index.html, and your "pages" are just div's.
I succesfully got the first page to envoke the camera, but I cannot get the image to "save" and be available for view on my "second page" yet.
On my iPhone, when testing this app, I can take a picture, but it isn't saved anywhere, on my Android device, it saves the image, but names it "test.jpg" and it saves to the root of the sdcard, and not to the usual DCIM folder.
I tried using the onclick events to kick-off the functions.
Any pointers welcome!
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(evt) {
if (evt.success == true)
{
// create image
var image = document.createElement('img');
image.src=intel.xdk.camera.getPictureURL(evt.filename);
image.id=evt.filename;
document.body.appendChild(image);
}
else
{
if (evt.message != undefined)
{
alert(evt.message);
}
else
{
alert("error capturing picture");
}
}
}
function showImages() {
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img2');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.setAttribute("style","width:100px;height:100px;");
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.body.appendChild(newImage);
}
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" style="">
<li>Take Picture
</li>
<li>View Pictures
</li>
<li>Help
</li>
</ul>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="capturePhoto();">Take Picture</a>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="showImages();">Show Pictures</a>
</div>
<div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style=""></div>
</div>
<div id="navbar">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</html>

OK, I managed to come right.
This code does what I need so far wrt taking the picture on one "page" and then displaying it on another.
Having issues with the use of the localStorage now - posted a new question.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(event)
{
if (event.success === true)
{
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
var pic1 = document.getElementById("pic1");
pic1.src = imagesrc;
localStorage.imagesrc = imagesrc;
}
else
{
if (event.message !== undefined)
{
alert(event.message);
}
else
{
alert("error capturing picture");
}
}
}
function showPicture()
{
var picture = document.getElementById("pic2");
var pic1src = localStorage.imagesrc;
picture.src = pic1src;
document.form2.locationview.value = localStorage.location;
document.form2.titleview.value = localStorage.title;
document.form2.metadataview.value = localStorage.metadata;
}
function saveForm()
{
localStorage.location = document.form1.location.value;
localStorage.title = document.form1.title.value;
localStorage.metadata = document.form1.metadata.value;
}
function updateForm()
{
localStorage.location = document.form2.locationview.value;
localStorage.title = document.form2.titleview.value;
localStorage.metadata = document.form2.metadataview.value;
}
function showStorage()
{
document.getElementById("page_3").innerHTML = localStorage.location;
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
style="background-image: url(images/splash.jpg);"
data-appbuilder-object="page" data-footer="footer_1">
<div class="centerbutton">
<a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
</div>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form1" name="form1">
<img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="location" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="title" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadata"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="saveForm();">Save</a>
</form>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form2" name="form2">
<img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
class="">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="locationview" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="titleview" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadataview"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="updateForm();">Update</a>
</form>
</div>
<div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
id="page_3" data-appbuilder-object="page" style=""></div>
</div>
<div id="navbar"> Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">PhotoTagger</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer">Home<a href="#page_1" class="icon camera"
onclick="capturePhoto();">Take Picture</a>
View Pictures
Local Storage
</footer>
</div>
</html>

Related

Page reloads after uploading a file using ajax

I am using ajax to upload a file to the server and generate a url for a specific purpose. But whenever the file upload is successful, the page reloads automatically. Even the console shows "File uploaded" for a second and then reloads. Can someone help me sort this problem.
Here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut ico n" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InShare - File Sharing Made Easy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="./logo.png" alt="Inshare logo" class="logo">
<section class="upload-container">
<form action="">
<div class="drop-zone">
<div class="icon-container">
<img src="file.svg" draggable="false" class="center" alt="File Icon">
<img src="file.svg" draggable="false" class="left" alt="File Icon">
<img src="file.svg" draggable="false" class="right" alt="File Icon">
</div>
<input type="file" id="fileInput">
<div class="title">Drop your Files here or, <span id="browseBtn">browse</span></div>
</div>
</form>
<div class="progress-container">
<div class="bg-progress"></div>
<div class="inner-container">
<div class="status">Uploading...</div>
<div class="percent-container">
<span class="percentage" id="progressPercent">0</span>%
</div>
<div class="progress-bar"></div>
</div>
</div>
<div class="sharing-container">
<p class="expire">Link expires in 24 hrs</p>
<div class="input-container">
<input type="text" id="fileURL" readonly>
<img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon">
</div>
<p class="email-info">Or Send via Email</p>
<div class="email-container">
<form id="emailForm">
<div class="filed">
<label for="fromEmail">Your email</label>
<input type="email" autocomplete="email" required name="from-email" id="fromEmail">
</div>
<div class="filed">
<label for="toEmail">Receiver's email</label>
<input type="email" required autocomplete="receiver" name="to-email" id="toEmail">
</div>
<div class="send-btn-container">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
<div class="image-vector"></div>
<div class="toast">Sample message</div>
<script src="index.js"></script>
</body>
</html>
Here is the ajax section of javascript code:
const uploadFile = () => {
console.log("file added uploading");
files = fileInput.files;
const formData = new FormData();
formData.append("myfile", files[0]);
//show the uploader
progressContainer.style.display = "block";
// upload file
const xhr = new XMLHttpRequest();
xhr.open("POST", uploadURL);
xhr.send(formData);
// listen for response which will give the link
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
onFileUploadSuccess(xhr.responseText);
}
};
};
const onFileUploadSuccess = (res) => {
fileInput.value = ""; // reset the input
console.log("Uploaded");
// remove the disabled attribute from form btn & make text send
emailForm[2].removeAttribute("disabled");
emailForm[2].innerText = "Send";
progressContainer.style.display = "none"; // hide the box
const { file: url } = JSON.parse(res);
console.log(url);
sharingContainer.style.display = "block";
fileURL.value = url;
};
Even e.preventDefault() has been used to prevent page reload. But still it does. Can someone help me solve this. Thank you in advance..

Why my script is returning last else right after loading the page?

I don't know why code is executed right after loading the page. It should be executed after clicking the button (function onclick). Script is returning "koszt paliwa:0zł." The browser isn't returing any errors (.........................................................................................)
//javascript
var rodzaj = document.getElementById("rodzajPaliwa").value;
var ilosc = document.getElementById("litry").value;
function pierwszyrodzaj(){
ilosc *= 4
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + ilosc + "zł";
}
function drugirodzaj(){
ilosc *= 3.5
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa:" + ilosc + "zł";
}
function inny(){
document.getElementById("koncowacenapaliwa").innerHTML = "koszt paliwa: 0zł";
}
function marcin (){
if(rodzaj = 1){
pierwszyrodzaj();
}else if(rodzaj = 2){
drugirodzaj();
}else{
inny();
}
}
document.getElementById("oblicz").onclick = marcin();
//html
<!DOCTYPE html>
<html lang="pl-PL">
<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">
<title>STACJA PALIW</title>
<link rel="stylesheet" href="styl3.css">
</head>
<body>
<div id="baner-lewy">
<h1>Stacja paliw</h1>
</div>
<div id="baner-prawy">
<a href="index.html">
<img src="home.png" alt="">
</a>
<a href="obliczenia.html">
<img src="znak.png" alt="">
</a>
</div>
<main>
<h3>Oblicz koszt paliwa</h3>
<label for="rodzajPaliwa">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" name="" id="rodzajPaliwa"><br><br>
<label for="litry">Ile litrów: </label><br>
<input type="number" id="litry"><br>
<br>
<button id="oblicz" >OBLICZ</button>
</br>
<span id="koncowacenapaliwa"></span>
<script src="skrypt.js"></script>
</main>
<div id="blok-lewy">
Pobierz kwerendy
</div>
<div id="blok-prawy">
<img src="samochod.png" alt="samochód">
</div>
<footer id="">
<p>© Stronę wykonał: Jan Kupczyk 4TID</p>
</footer>
</body>
</html>

Is it possible to close the menu after selecting an item using jquery?

I would like that after selecting an item from the menu, the latter closes to display the desired section
JS code :
$('#toggle').click(function(){
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
HTML code:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset='UTF-8'/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
<title>Piero Sabino</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<meta name="keywords" content="HTML5, CSS3">
<meta name="author" content="Piero Sabino">
<meta name="description" content="My website">
</head>
<body>
<div class='container'>
<!-- HEADER -->
<header id='about'>
<!-- ABOUT-->
<div class='content-wrap'>
<img class='profile-img col narrow' src='images/Piero Sabino.jpeg'>
<div class='col-wide'>
<h1>Piero Sabino</h1>
<p>Hi, my name's Piero Sabino, I'm 30 years old and live in Turi, Puglia. I have been passionate about website development since I went to school and today I decided to enroll the web programming course Start2impact to deepen my Web apps development skills and, at the same time, to become a full-stack developer, a figure sought after by companies operating on the web. Some time ago I took an online course about the Swift programming language. I like football and in my spare time I read or repair damaged objects.
</p>
</div>
</div>
<!-- END OF ABOUT -->
</header>
<!-- END OF HEADER -->
<main>
<!-- PROJECTS-->
<section id='projects'>
<div class='content-wrap'>
<h2>PROJECTS</h2>
<h3>Work in progress</h3>
</div>
</section>
<!-- END OF PROJECTS -->
<!-- CONTACT-->
<section id='contact'>
<div class='content-wrap'>
<div class='contacts'>
<h2>CONTACT</h2>
<form action='' method='get'>
<label for='name'>Name:</label><br />
<input id='name' type='text' name='name' placeholder='John Doe'/><br/>
<label for='email'>E-mail:</label><br/>
<input id='email' type='email' name='email' placeholder='john.doe#example.com'/><br />
<label for='message'>Message:</label><br/>
<textarea id='message' name='message' rows='10' cols='30' placeholder='Leave your message here...'></textarea><br/>
<button id='submit' value='submit' class='btn'>Send</button>
</form>
</div><br/>
<p>Or </p><br/>
<div class='email'>
<p>Send an e-mail to:<address><a href='mailto:piero.sa#icloud.com'>piero.sa#icloud.com</a></address></p>
</div>
</div>
</section>
<!-- END OF CONTACT-->
<!--FOOTER-->
<footer>
<div class='content-wrap'>
<div class='footer'>
<p>Created by Piero Sabino © 2020</p>
<a href='https://www.facebook.com/sabino.piero' target='_blank'><img src='images/social_facebook_box_blue_256_30649.png'/></a>
<a href='https://www.instagram.com/p13rr390/' target='_blank'><img src='images/3721672-instagram_108066.png'/></a>
<a href='https://www.linkedin.com/in/piero-sabino-15a1b671/' target='_blank'><img src='images/sociallinkedin_member_2751.png'/></a>
<a href='https://github.com/pierre1590' target='_blank'><img src='images/github-logo_icon-icons.com_73546.png'/></a>
</div>
</div>
</footer>
<!-- END OF FOOTER-->
</main>
</div>
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li>
<a href='#about'>About</a>
</li>
<li>
<a href='#projects'>Projects</a>
</li>
<li>
<a href='#contact'>Contact</a>
</li>
</ul>
</nav>
</div>
<script src='scripts/menu.js' type='text/javascript'></script>
</body>
</html>
I want to close the menu after selecting an item from the menu itself, For example, if I select the "about" item, the menu must close showing me the desired section.
For example if I click on link About, it must show my description.
Although your question is not completely clear what you want, as much I understood by your question, you want something like this, So create a custom select like this, and show the selected item
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown-at > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function() {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
$(function() {
var dd = new DropDown($('#dd'));
$(document).click(function() {
$('.wrapper-dropdown-3').removeClass('active');
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper-dropdown {
position: relative;
display: inline-block;
}
.wrapper-dropdown > span {
display: inline-block;
padding: 2px 10px;
border: 1px solid;
}
.dropdown-at {
position: absolute;
width: 100%;
left: 0;
list-style: none;
padding: 0;
display: none;
}
.wrapper-dropdown.active .dropdown-at {
display: block;
border: 1px solid;
border-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1">
<span>option 1</span>
<ul class="dropdown-at">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</div>

Phonegap - Audio will not play on Android device

Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Audio</title>
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 col-md-12">
<div class="s-it">Tap Here</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-4 col-md-4">
<div class="container">
<span style="display:none;" id="vX"></span>
<span style="display:none;" id="vY"></span>
<span style="display:none;" id="vZ"></span>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="sbell">
<img src="img/bell.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="s-text">Test</div>
</div>
<div class="col-md-12 col-xs-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="well">
<span class="sts">
<img src="img/shake-banner.png">
</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var myMedia1 = null;
var myMedia2 = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
var src1 = '';
var src2 = '';
if (device.platform == 'Android') {
src1 = '/android_asset/www/audiomp3/audio1.mp3';
src2 = '/android_asset/www/audiomp3/audio2.mp3';
}
myMedia1 = new Media(src1, onSuccess, onError);
myMedia2 = new Media(sec2, onSuccess, onError);
myMedia1.addEventListener('ended', function () {
setTimeout(function () {
$('#sbell').removeClass('animate-bell');
}, 2000);
setTimeout(function () {
$('.s-text').fadeOut(200);
}, 500);
}, false);
}
function onSuccess () {
alert("Audio Loaded");
}
function onError (e) {
alert(e.message);
}
window.ondevicemotion = function (event) {
var accX = event.accelerationIncludingGravity.x;
var accY = event.accelerationIncludingGravity.y;
var accZ = event.accelerationIncludingGravity.z;
if (accX >= 8 || accX <= -8) {
myMedia2.play();
}
document.getElementById('vX').innerHTML = accX;
document.getElementById('vY').innerHTML = accY;
document.getElementById('vZ').innerHTML = accZ;
};
$(document).ready(function () {
$('#sbell').click(function(event){
$(this).addClass('animate-bell');
$('.s-text').css('color', 'red').fadeIn(300);
myMedia1.play();
});
});
</script>
</body>
#ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue.
Phonegap Demo Apps (core)
The source is on github. It contains sound samples too. I have additional notes, if you need them.
Also, your app.initialize() should be called AFTER the deviceready event.

function not being called in backbone.js

I am trying to bind a function to a button using backbone.js,
but the event is not called on the button.
$(function () {
// expense model
// ----------
//
var ExpenseModel = Backbone.Model.extend({
// Default attributes for the todo item.
defaults: function () {
return {
month: "JAN",
category: Todos.nextOrder(),
amount: 0,
description: "empty string"
};
},
});
var ExpensesCollection = Backbone.Collection.extend({
model: ExpenseModel,
localStorage: new Backbone.LocalStorage("todos-backbone")
});
var ExpensesAddView = Backbone.View.extend({
el: $(".add-content"),
// The DOM events specific to an item.
events: {
"click .add-button": "ToggleDone"
},
ToggleDone: function () {
this.$el.slideToggle();
alert("done");
},
});
var ExpensesAppView = Backbone.View.extend({
el: $(".main-Page"),
// The DOM events specific to an item.
initialize: function () {
var addView = new ExpensesAddView({
model: ExpenseModel
});
}
});
var App = new ExpensesAppView;
});
This is the corresponding HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="styles/codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="lib/codiqa.ext.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/backbone.localStorage.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="mainPage" class="main-Page">
<div id="expense-page-header-id" data-theme="a" data-role="header" class="expense-page-header">
<h3 id="header-text-id" class="header-text">
Header
</h3>
</div>
<div data-role="content">
<a id="add-button-id" data-role="button" data-inline="true"
href="#mainPage" data-icon="plus" data-iconpos="notext" class="add-button">
</a>
<div class="add-content">
<div data-role="fieldcontain" class="category-input">
<input name="" id="category-input-id" placeholder="category" value=""
type="text" data-mini="true">
</div>
<div data-role="fieldcontain" class="amount-input">
<input name="" id="amount-input-id" placeholder="amount" value="" type="text"
data-mini="true">
</div>
<div data-role="fieldcontain" class="description-input">
<input name="" id="description-input-id" placeholder="description" value=""
type="text" data-mini="true">
</div>
<a id="reset-id" data-role="button" data-inline="true" href="#" data-icon="delete"
data-iconpos="notext" class="reset">
</a>
<a id="done-id" data-role="button" data-inline="true" href="#" data-icon="check"
data-iconpos="notext" class="done">
</a>
</div>
</div>
</div>
</body>
</html>
I am trying to bind the ToggleDone method to the button in ExpensesAddView
but its not getting invoked.
I am quite new to backbone.js.
Your view's el is div.add-content, and events in views only trigger on elements that are inside (children-of) the view's el.
The button.add-button is not a child of the div.add-content - its a sibling of div.add-content, and therefore events on it will never bubble up to the view's el and therefore never trigger the function.

Categories