JavaScript does not execute in emulator (PhoneGap in Android) - javascript

I am facing a strange behavior in my PhoneGap Application.I am new to this so your every help will be appreciable.
I've made an application in PhoneGap(Cordova) where I have designed two Index.html file.
Using Index.html file when I click on Icon(my_notification_new) I move to Notification.html.(In which data displayed in list view loaded from Server).
A) Index.html (Which works perfect)
<!DOCTYPE html>
<html>
<head>
<!-- /* Title */ -->
<title>Newa: HTML Template</title>
<!-- /* Meta Tags */ -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- /* Stylesheets */ -->
<link rel="stylesheet" href="css/my-custom-theme.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-role="page">
<div class="header">
<p>Smart Self-Service</p>
</div>
<div class="content">
<div class="bar">
/***********Move to Notification.html******************/
<div class="one_half">
<a href="Notification.html">
<img src="images/my_notification_new.png" align="center" /></a>
<p class="dashfont" align="center">Notifications</p>
</div>
/********************************************************/
<div class="one_half">
<a href="#">
<img src="images/new_request_new.png" align="center" /></a>
<p class="dashfont" >Self-Service request</p>
</div>
</div>
<div class="bar">
<div class="one_half">
<a href="#">
<img src="images/setting.png" align="center" /></a>
<p class="dashfont" align="center">Settings</p>
</div>
<div class="one_half">
<a href="#">
<img src="images/exit.png" align="center" /></a>
<p class="dashfont" align="center"ali>Exit</p>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Now after changes some design I've make this Index.html
B)Index.html(through this when I move to Notification.html I cant see data in list view JS is not execute)
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
#center_content{
text-align:center;
min-height:400px;
}
#dashboard{
width:350px;
margin:0px auto;
display:block;
clear:both;
text-align:center;
}
.dashaboard_icon{
padding:block;
padding:35px;
float:center;
margin-bottom:10px;
}
</style>
</head>
<body>
<div data-role="page" data-theme="f">
<div data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap">Smart Self Service</h1>
</div><!-- /header -->
<div data-role="content" data-theme="f">
<div id="center_content">
<div id="dashboard">
/********* Move to Notification.html**********/
<img id="dIcon_notification" src="images/mdpi/my_notification_new.png" class="dashaboard_icon" alt="" >
/*******************/
<img id="dIcon_request" src="images/mdpi/new_request_new.png" class="dashaboard_icon" alt="" >
<img id="dIcon_setting" src="images/mdpi/setting.png" class="dashaboard_icon" alt="" >
<img id="dIcon_exit" src="images/mdpi/exit.png" class="dashaboard_icon" alt="" >
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
and here is my Notification.html. which works perfect.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="moment.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
function soap() {
Hr_Offer();
Hr_Vacancy();
function Hr_Offer() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://180.211.97.41:7777/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>CBROWN<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">welcome<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_OFFER<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "process");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
//alert(startDate[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
function Hr_Vacancy() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ip:port/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>Hello<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">world<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_VACANCY<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "action_name");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
}
</script>
</head>
<body onload="soap()">
<div data-role="page" data-theme="f">
<form name="Worklist" action="" method="post">
<div>
<div id="response" />
</div>
</form>
<div data-role="header" data-position="fixed">
<h1>Worklist</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="c" id="list_workList">
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
And strange thing is that It works in eclipce browser and in preview.

if you want to redirect page on Notification.html then add data-ajax="false" in your anchor tag
<a href="Notification.html" data-ajax="false">

Related

How to load individual HTML file into div content

i am using this animation on my website.
https://codepen.io/alvarotrigo/pen/YzYbdxV
I'm trying to figure out how to load a individual file into the content of each box.
So every box doesn't have the same content.
I've already written a method in my JS file:
function loadHTML (id, filename) {
console.log(`div id: ${id}, filename: ${filename}`);
let xhttp;
let element = document.getElementById(id);
let file = "/electronic_projects/" + (filename.replace(/\s/g, '_') + ".html").toLowerCase();
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
console.log(this.responseText);
if (this.status == 200) {element.innerHTML = this.responseText;}
if (this.status == 404) {element.innerHTML = "<h1>Page not found.</h1>";}
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
It takes the ID of my div and the HTML file, which i want to load.
It does work if i give it the exact name of the file.
What i can't get to work is, that it loads a html file, which is the same as the boxes name (declared on top of the JS file).
Does anybody have an idea for that?
Thanks very much!
This is my modified html approach:
<!doctype html>
<html>
<style>
#ep {
text-decoration: underline #0088a9;
text-underline-offset: 5px;
}
</style>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" href="projects_style.css" type="text/css">
<script src="electronic_projects_script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electronic Projects</title>
</head>
<body>
<header>
<a class="logo" href="index.html">COPPER CREW</a>
<nav>
<ul class="nav_links">
<li><a id="ep" href="electronic_projects.html">Electronic Projects</a></li>
<li><a id="sp" href="software_projects.html">Software Projects</a></li>
<li><a id="a" href="">About</a></li>
</ul>
</nav>
</header>
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
<div class="page">
<div class="grid">
<div class="grid-item" ng-repeat="item in boxes">
<box class="box" id="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}" onclick="loadHTML('content', filename=selected)"></box>
</div>
</div>
</div>
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
<div class="scroller" ng-show="selected.length">
<a class="close-button" ng-click="clearSelection()">
<i class="material-icons">close</i>
</a>
<h1 id="name">{{selected[0].item.name}}</h1>
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
<img ng-src="{{item.item.image}}" alt="" />
<div class="content" id="content">
</div>
</div>
</div>
</div>
</body>
</html>

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>

Why does the live search not show up with live results in this script?

this is the header which contains the search box and the ul in which the live search results should be showing up. It prints the information about the data items out to the console, which means that the data can be found but it doesn't change anything in the ul which is linked to be altered when search results are found. I also checked the jsonSerialize function and it seems to be correct.
<< ? php
//require_once('../Models/AuctionData.php');
require_once('../Models/AuctionDataSet.php');
$auctionDataSet = new AuctionDataSet();
$auctionDataSet = $auctionDataSet - > fetchSearch($_GET["q"]);
echo json_encode($auctionDataSet);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/my-style.css" rel="stylesheet">
<!--<script src="js/Script.js"></script>-->
<title>Auction Website -
<?php echo $view->pageTitle; ?>
</title>
</head>
<body role="" document ">
<div class="container ">
<div class="row ">
<div id="title " class="col-xs-12 ">
<img src="images/iconhead.jpg "/>
<div class="pull-right "> <h1><?php echo $view->pageTitle ?> </h1></div>
</div>
</div>
<div class="row ">
<div id="menu " class="col-xs-6 col-sm-3 col-md-2 ">
<ul class="nav navbar_default nav-stacked ">
<li>Home </li>
<?php if(isset($_SESSION['id']))
{
echo " <li><a href='Logout.php'>Logout</a></li>"; } else{ echo "
<li><a href='Login.php'>Login</a></li>"; echo "
<li><a href='Register.php'>Register</a></li>"; } ?>
<form><input type="text" class="form-control input-lg" id="search" placeholder="search">
</form>
<ul class="list-group" id="txtHint"></ul>
</ul>
</div>
<script type=application/javascript>
document.addEventListener("DOMContentLoaded", readyPage);
function readyPage() {
let searchIn = document.getElementById("search");
searchIn.addEventListener("keyup", showHint);
console.log("ready");
}
function showHint(event) {
const text = event.target.value;
console.log(event);
let xmlhttp = new XMLHttpRequest();
let uic = document.getElementById("txtHint");
if (text.length > 1) {
xmlhttp.open("GET", "Ajax/ajaxSearch.php?q=" + text);
xmlhttp.send();
return;
}
if (text.length < 2) {
uic.innerHTML = "";
return;
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let data = JSON.parse(this.responseText);
let uic = document.getElementById("txtHint");
uic.innerHTML = "";
data.forEach(function(obj) {
console.log(obj);
uic.innerText += '<li class="list-group-item"><p>' + 'obj._id' + 'obj._title' + '</p>';
});
}
};
}
</script>
<div id="content" class="col-xs-6 col-sm-9 col-md-10">

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.

Whenever I try and load my JSON data into my listview or select menu, nothing shows up

So basically, when I load my data from the server script (retrieve.php), it shows up the in the showlist.html using $('#result').html(data). But whenever I try to load my listview or selectbox with that data..nothing happens. PLEASE ADVICE what I might be doing wrong
//SERVER-SIDE SCRIPT - retrieve.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=sports_rush;charset=utf8', 'root', '');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try {
$query = "SELECT eid,event_title FROM event_table";
$result = $pdo->prepare($query);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
echo json_encode($row);
}
$db_connection = null;
} catch (PDOException $e) {
echo $e->getMessage();
}
//I found this recursive function online to enable me force convert to UTF-8 all the strings contained in an array
function utf8ize($d) {
if (is_array($d)) {
foreach ($d as $k => $v) {
$d[$k] = utf8ize($v);
}
} else {
return utf8_encode($d);
}
return $d;
}
?>
//FILE THAT SHOWS MY DATA FROM SERVER-SIDE SCRIPT - Showlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>SHOW LIST</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery-mobile/jquery-1.9.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a">
<h1>Header</h1>
</div>
<div data-role="content">
<select name="zip" id="zip" onChange="initializeRetrieve()"></select>
<div id="result"></div>
<ul data-role="listview" data-inset="true" id="postallist"></ul>
</div>
</div>
<script>
$(function(){
$.ajax({
url : 'retrieve.php',
type : "POST",
success : function(data){
var output = '';
$('#result').html(data); //This is just a test to see my data
$.each(data, function (index, value) {
output += '<li>' + value.eid + '</li>';
});
$('#postallist').html(output).listview("refresh");
}
});
});
function initializeRetrieve(){
var $select5 = $('#zip');
//request the JSON data and parse into the select element
$.getJSON("retrieve.php", function(data){
//iterate over the data and append a select option where eid is in the json file
$.each(data, function(key, value){
$select5.append('<option>' + value.eid + '</option>');
});
});
}
</script>
</body>
</html>
Have you tried using the GET method
Try putting your request to $(document).ready
$(document).ready(function(){
$.getJSON('retrieve.php', function(data) {
$('#result').html(data);
})
});
//FINALLY GOT IT WORKING. The problem was in my showlist.html. Needed to change up my initialization when my page opens
<html>
<meta charset="utf-8" />
<title>SHOW LIST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Sports Rush Events</h1>
</div>
<div data-role = "content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$.ajax({
url : 'retrievelist.php',
type : "POST",
dataType: 'json',
success : function(data){
$.each(data,function(i,dat){
$("#list").append("<li><b>ID: </b>"+i+"</br><b> Name: </b>"+dat.event_title+"</li>");
});
$("#list").listview('refresh');
}
});
});
</script>
<div data-role="footer" data-position="fixed">
</div>
</div>

Categories