Phonegap - Audio will not play on Android device - javascript

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.

Related

Add a Google Sheet list of values to the materialize autocomplete function

I'm trying to create a simple web app that add countries to a google sheet. And use materialize autocompletes to assist the user (which simply autocomplete the country, with no images attached). I saw a couple of examples of the materialize autocomplete, but always with a predefined autocomplete list. This is the html I used:
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete">
<label for="autocomplete-input">Country</label>
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(data) {
var availableTags = data;
$('input.autocomplete').autocomplete({
data: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
And this is my code in google script, the function getCountry works, and returns a list of countries. But I didn't succeed in adding them to the materialize autocomplete function.
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1_GtmVrdD1Es6zQZna_Mv-Rc3JkIu66-q_knQ8aqcUIc/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
var data = "{";
for (var i = 0; i < list.length; i++) {
data = data + "'" + list[i] + "': null,";
}
data = data.slice(0, -1) + "}";
Logger.log(data);
return data;
}
This is the information on https://materializecss.com/autocomplete.html
// Or with jQuery
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});

Answer:
You can use web polling to update your page with a set interval such that it always retrieves updated data from the Sheet.
Code:
Piggybacking off the answer here, edit your script to include:
function polling(){
setInterval(update, 500);
}
function update(){
google.script.run.withSuccessHandler(tags).getCountry();
}
and make sure that you run the polling() function on load:
<body onload="polling()">
<!-- your body goes here -->
</body>
Full page.html:
<html>
<head>
<meta charset="utf-8">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body onload="polling()">
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete" placeholder="Country">
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<script>
function polling(){
setInterval(update, 500);
}
function update(){
google.script.run.withSuccessHandler(tags).getCountry();
}
google.script.run.withSuccessHandler(tags).getCountry();
function tags(list) {
console.log(list);
var availableTags = list;
$("#autocomplete-input").autocomplete({
source: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
And leave your code.gs file unchanged.
References:
Stack Overflow - Creating an autocomplete function in Google Script that works with a list of values from the Google Sheet
Stack Overflow - Is it possible to import XML or JSON data from a table within a Word online document into Apps Script website as an HTML table?

Changing the getCountry() function, so it reads the data as an object and not as a string fixed it.
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1_GtmVrdD1Es6zQZna_Mv-Rc3JkIu66-q_knQ8aqcUIc/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
var data = {};
for (var i = 0; i < list.length; i++) {
data[list[i]] = null;}
return data;
}
And the html stayed the same:
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete">
<label for="autocomplete-input">Country</label>
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(data) {
var availableTags = data;
$('input.autocomplete').autocomplete({
data: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>

parseTime and functions in D3 have errors

I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html

You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki

Having trouble setting document.getElementById and then sessionStorage.setItem

I am using HTML and JavaScript for a Wi-Fi landing page (called Splash.html). With Splash.html I need to get variable names with document.getElementById and then set name with sessionStorage.setItem. This information is then retrieved by another html page (called Test.html) but when I am redirected to Test.html it replies with "0". I am not an expert but that says to me that the variable names are not being stored properly. Could someone please look at my code and offer some help?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-TileColor" content="#0061da">
<meta name="theme-color" content="#1643a3">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<title>
SmartPlay TV
</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="jquery.mCustomScrollbar.css" rel="stylesheet">
<link href="wifi_landing.css" rel="stylesheet">
<script>
var rootPath = "/xxx/";
var defaultImgPath = "/xxx/assets/front/assets/images/products/7.png"
var firstPath = "http://xxx/xxx/";
</script>
</head>
<body>
<div id="login-form-bg-image-tablet">
<img id="back" src="back_5dc4a0740c93eclouds-1586540_960_720.jpg" onerror="this.src = '/xxx/assets/img/tablet.jpg'"></div>
<div class="page">
<div class="page-main">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 landing-left">
<div class="row mark-img row-logo">
<div class="col-md-12 mark-img-rect">
<img id="logo" src="logo_5dc4a05f10a24201906271242crop479976885.jpg" onerror="this.src = '/xxx/assets/img/wifilanding-mark.png'"></div>
</div>
<div class="row mark-img row-url">
<div class="col-md-12 mark-mark-rect text-center">
<span id="url" style="word-break: break-word;">www.basicplasticsurgery.com</span>
</div>
</div>
<div class="row">
<div class="col-md-12 textarea-rect" style="display: flex;">
<span id="box_title" class="text3 text" style="padding: 20px 30px; background: white; width: 100%; position: unset; word-break: break-word; border: 2px solid grey;"><p>Welcome to Basic Plastic Surgery!<br><br>Your decision to improve your appearance can be one of the most important investments you make for yourself–and your self-confidence. Our staff take every measure to ensure that you receive the highest quality care in a professional, comfortable environment.</p></span>
</div>
</div>
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 landing-right">
<div class="row">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" id="gallery">
<div class="row media-rect">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 media-ele-wrapper">
<img src="upload1_5dbb7ff59f88074670796_10219304255335727_5029165459597950976_o.jpg" class="file-rect" id="upload1" onerror="noExitImg(this);">
<div class="textbox-rect text-overflow-ellipsis" style="min-height:80px; display:flex; justify-content:center; align-items:center;">
<span class="title" id="upload1_desc">CoolSculpting.
Please see front desk for more info</span>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 media-ele-wrapper">
<img src="upload2_5dc4a2905bfdb209508_4516468915805_534071624_o.jpg" class="file-rect" id="upload2" onerror="noExitImg(this);">
<div class="textbox-rect text-overflow-ellipsis" style="min-height:80px; display:flex; justify-content:center; align-items:center;">
<span class="title" id="upload2_desc">Me playing soccer.</span>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 media-ele-wrapper">
<img src="upload3_5dc4a2976ac89IMG_5313.JPG" class="file-rect" id="upload3" onerror="noExitImg(this);">
<div class="textbox-rect text-overflow-ellipsis" style="min-height:80px; display:flex; justify-content:center; align-items:center;">
<span class="title" id="upload3_desc">BPS Background</span>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 media-ele-wrapper">
<img src="upload4_5dcddf7d5131a20191017_220631.jpg" class="file-rect" id="upload4" onerror="noExitImg(this);">
<div class="textbox-rect text-overflow-ellipsis" style="min-height:80px; display:flex; justify-content:center; align-items:center;">
<span class="title" id="upload4_desc">BPS
Test</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 landing-sign-rect">
<div class="landing-sign-rect-form">
<div class="menu1">
<span id="box_text" style="word-break: break-word;">In order to access the internet we need some information. Please submit the following info to use our wifi network.
If you don't submit information you cannot use our network.</span>
</div>
<div class="form-group">
<textarea class="form-control autosize" onkeydown="resize(this)" onkeyup="resize(this)" rows="1" id="user_name" style="resize:none;" placeholder="First Name">Full Name</textarea></div>
<div class="form-group ">
<textarea class="form-control autosize" onkeydown="resize(this)" onkeyup="resize(this)" rows="1" id="user_name1" style="resize:none;" placeholder="Last Name">Email</textarea></div>
<div class="form-group">
<textarea class="form-control autosize" onkeydown="resize(this)" onkeyup="resize(this)" rows="1" id="user_email" style="resize:none;" placeholder="Email Address">Tell us what products you're interested in learning about:
</textarea></div>
<div class="form-group text-center">
<!-- <button class = "btn" type = "button" style = "background:#0073c3;color: white;">Sign In</button> -->
<!-- <form method="get" action="$authaction" onsubmit="SubmitFunc()"> -->
<form method="get" action="http://192.168.50.10:2050/nodogsplash_auth/" onsubmit="SubmitFunc()">
<input type="hidden" name="tok" value="$tok"><input type="hidden" name="redir" value="$redir"><input style="background:#0073c3;color: white;" type="submit" value="Sign In"></form>
</div>
<div class="menu3">
Powered by SmartPlay TV
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It continues with JavaScript section:
<script>
function SubmitFunc() {
sessionStorage.clear();
var name = document.getElementById("user_name").value;
var name1 = document.getElementById("user_name1").value;
var email = document.getElementById("user_email").value;
sessionStorage.setItem("name", name);
sessionStorage.setItem("name1", name1);
sessionStorage.setItem("email", email);
}
function resize(obj) {
obj.style.height = "1px";
obj.style.height = (25 + obj.scrollHeight) + "px";
}
</script>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script src="custom_new.js"></script>
<script src="common.js"></script>
<script src="jquery.validate.js"></script>
<script>
initResize();
function alignTextBox() {
if (jQuery(window).width() < 770) {
jQuery(".media-rect").css("height", "");
jQuery(".textarea-rect .text2").css("min-height", "");
return;
} else {
jQuery(".textarea-rect .text2").css("min-height", "680px");
}
}
function initResize() {
var fileRectObj = jQuery(".file-rect").eq(0);
var width = fileRectObj.width();
var height = width * 9 / 16; // 16:9 to width
jQuery(".file-rect").css("height", height + "px");
alignTextBox();
}
jQuery(window).resize(function() {
initResize();
})
jQuery(document).ready(function() {
jQuery('.autosize').each(function() {
resize(this);
});
});
</script>
</body>
</html>
And here is the Test.html script that includes the getItem part:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contact Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h3 style="margin-top: 100px; text-align: center;">Thank you for your submission. You can now browse the internet freely.</h3>
<script type="text/javascript">
function sendEmail1() {
console.log('sending email');
var name = localStorage.getItem("user_name");
var name1 = localStorage.getItem("user_name1");
var email = localStorage.getItem("user_email");
alert(name + name1 + email);
var xhr = new XMLHttpRequest();
// xhr.open('GET', 'sendEmail.php?name=john&name1=name1&email=test');
xhr.open('GET', 'http://192.168.50.10:8000/htdocs/sendEmail.php?name=' + name + '&name1=' + name1 + '&email=' + email);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {}
};
xhr.send();
}
function sendEmail2() {
console.log('sending email');
var name = localStorage.getItem("name");
var name1 = localStorage.getItem("name1");
var email = localStorage.getItem("email");
var xhr = new XMLHttpRequest();
// xhr.open('GET', 'sendEmail.php?name=john&name1=name1&email=test');
xhr.open('GET', 'sendEmail.php?name=' + name + '&name1=' + name1 + '&email=' + email);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.responseText);
// return false;
}
};
xhr.send();
}
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
// alert('ready');
// alert(localStorage.getItem("email") + ":" + sessionStorage.getItem("email"));
// alert(sessionStorage.getItem("email") + ":" + localStorage.getItem("email"));
sendEmail1();
});
</script>
</body>
</html>

Test.html is using localStorage instead of sessionStorage.

Vue js 2.5 does not work in safari under IOS 9

I’m using vue js 2.5.16. Mozilla, Chrome browser work perfectly but Safari Browser not working perfectly.
My Environment:
vue js: 2.5.16
Mobile: Iphone 5S (System Version: IOS(9.2))
Mobile Browser: Safari
Showing This Code
Title: {{dataInfo.sTitle}}
Desc: {{datainfo.sDesc}}
My complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/weui/jquery-weui.min.css" />
<link rel="stylesheet" href="css/weui/weui.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/MyCard.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/weui_js/jquery-weui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js"></script>
<title>Business Card</title>
</head>
<body>
<div class="container">
<div class="card_box">
<div class="top_line">
<img v-bind:src="dataInfo.sAvatar" />
<div class="top_right">
<div class="top_one">
<span class="name">{{dataInfo.sRealName}}</span>
<span class="name_e">{{dataInfo.sEnglishName}}</span>
</div>
<div class="top_two">
<span class="company">{{dataInfo.sCompanyName}}</span>
<span class="position">{{dataInfo.sPositionName}}</span>
</div>
</div>
</div>
<div class="bottom_line">
<div class="relation">
<div class="relation_one" v-if="dataInfo.sPhone">
<img src="img/MyCard/office_phone#3x.png" alt="" />
<span>({{dataInfo.iZoneNum}}) {{dataInfo.sPhone}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sWxAccount">
<img src="img/MyCard/office_wechat#3x.png" alt="" />
<span>{{dataInfo.sWxAccount}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sFbAccount">
<img src="img/MyCard/office_fb#3x.png" alt="" />
<span>{{dataInfo.sFbAccount}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sMail">
<img src="img/MyCard/office_email#3x.png" alt="" />
<span>{{dataInfo.sMail}}</span>
</div>
</div>
<div class="mdrt" v-if="hasMDRT">
<div class="mdrt_year">{{dataInfo.sMdrt.dtYear}}</div>
<img src="img/MyCard/mdrt_blue#3x.png" />
</div>
</div>
</div>
<div class="card_box" v-if="dataInfo.sDesc">
<div class="box_title">sDesc</div>
<div class="summary">{{dataInfo.sDesc}}</div>
</div>
<div class="card_box" v-if="hasCareer">
<div class="box_title">Experience</div>
<div class="experience_list" v-for="item in dataInfo.sCareer">
<div class="experience_company">{{item.sCompany}}</div>
<div class="experience_bottom">
<div class="experience_time">{{item.dtEntryTime | time}} - {{item.dtQuitTime | time}}</div>
<div class="experience_position">{{item.sPosition}}</div>
</div>
</div>
</div>
<div class="card_box" v-if="hasHonor">
<div class="box_title">Honor</div>
<div class="honor_list" v-for="item in dataInfo.sHonor">
<div class="honor_left">
<div class="honor_year">{{item.dtYear}}</div>
</div>
<div class="honor_right">
<div class="honor_one">{{item.sHonorTitle}}</div>
</div>
</div>
</div>
<div class="bottom_icon" align="center">
<img src="img/default_png_logo#3x.png" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '.container',
data: {
dataInfo: {},
hasCareer: false,
hasHonor: false,
hasMDRT: false,
},
})
Vue.filter('time', function(value) {
if(value == 0) return "now";
let newDate = new Date(parseInt(value) * 1000);
return newDate.format('yyyy.MM');
})
function getInfoData() {
var query = this.getParameterByName("query");
$.ajax({
type: "POST",
dataType: "json",
data: JSON.stringify({
'query': query
}),
contentType: "application/json",
url: 'https://app.example.com',
success: function(data) {
if(data) {
if(data.msg == "ok") {
vm.dataInfo = data.data;
if(data.data.sCareer.length > 0) {
vm.hasCareer = true;
}
if(data.data.sHonor.length > 0) {
vm.hasHonor = true;
}
if(data.data.sMdrt.dtYear.length > 0) {
vm.hasMDRT = true;
}
}
}
}
});
}
getInfoData();
function getParameterByName(field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
}
</script>
</body>
</html>
PS:
I have introduced babel-polyfill and es6-promise, But it still doesn't work! Anyone has met the same problem or could help to explain a little?
Thanks

KO "click" binding won't work for mobile device responsive

I am trying to create a responsive one page web application. On clicking the list of items on the side bar you the markers and on the map should animate and display info window. It seems to be working perfect on normal browser layout but when I toggle display to smaller screens or on a mobile device, The click function does not work. The logic seems to be correct. Please help me understand where I am going wrong and what I should do. Thank you.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/knockout-3.4.0.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-xs-12 col-sm-5 col-md-3">
<h1 class="center" > Chennai City Culture </h1>
<div class="input-group col-xs-12 col-sm-6 col-md-12" >
<input id="text-search" type="text" class="form-control" placeholder="Enter here" data-bind="textInput: query">
</div>
<div class= "list-box" data-bind="foreach: filteredItems">
<hr>
</div>
</div>
<div class="col-xs-16 col-sm-6 col-md-8">
<div id="map">
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBf9eFadPLrD3QIQT7ygrYN8aRO5YuAUyE&callback=initMap" onerror="error()">
</script>
</body>
</html>
JS:
function appViewModel(){
var self = this;
this.query = ko.observable('');
this.locationArray = ko.observableArray([]);
locations.forEach(function(item){
self.locationArray().push(item);
});
self.setLoc = function(clickedLoc) {
var clickedData = clickedLoc.marker;
google.maps.event.trigger(clickedData, 'click');
};
self.filteredItems = ko.computed(function(){
var filter = self.query().toLowerCase();
if(!filter){
for (i = 0; i < locations.length; i++) {
if (locations[i].marker) //checks to see that markers exist
locations[i].marker.setVisible(true);
}
return self.locationArray();
}
return this.locationArray().filter(function (item){
var passedFilter = item.title.toLowerCase().indexOf(filter) > -1;
item.marker.setVisible(passedFilter);
return passedFilter;
});
}, self);
}
ko.applyBindings(new appViewModel());

click events aren't the same as touch events; try including a library like touchpunch that will handle those events for you for mobile devices. I had the same issue with a KO app I was building and that seemed to solve it.

Categories