I am trying to store a few KB of data on a windows phone. I am using phonegap and jquery mobile.
So far I worked with jStorage and that worked well on iOS and Android. jStorage tries localStorage, globalStorage and userData behavior. I also tried cookies.
But nothing worked. Any solution to this? Maybe using PhoneGap.exec, again?
I store & read some small amount of data using phonegap & jQm & wp7
Store some data:
window.localStorage.setItem(key, JSON.stringify(value));
Read some data:
JSON.parse(window.localStorage.getItem(key))
Check if you are using the newest jquery.mobile.js from jQm beta page - there was a new release yesterday
Try this
<html>
<head>
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
var db = window.openDatabase("test", "1.0", "Test DB", 1000000);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Open Database</p>
</body>
</html>
Source: docs.phonegap.com
Related
I using Benalman JS to control the back button window redirect url to home.
I tested in normal browser and Android phone, it work accordingly.
But it does not work in Ipad,
here is a part of the code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
// control back button
// includes in js mean contains
if(!window.location.href.includes('#state')){
history.pushState(null ,document.title, '#state'); // forwards
}
// Bind an event handler.
jQuery(window).bind('hashchange', function(e) {
window.location = _contextPath + "/home/";
});
</script>
</html>
I notice that in Ipad the url will not append the "#state".
I suspect history.pushState not work in Ipad.
How can I fix this?
Thank you
The problem fixed after I change
includes
To
indexOf
Nothing to do with Benalman Js library. This js can excluded.
Thank you.
I'm a little bit confused about how cordova works (i'm using android)...i've got an html page with this button:
<button id="mannaggia">mannaggia</button>
i'm trying to insert a javascript tag:
<script>
document.getElementById("mannaggia").addEventListener("click", myFunction);
myFunction(){
alert('is anybody out there?');
window.location="pag2.html";
}
</script>
nothing happens..
trying to insert a function in index.js outside this page is the same result...thank you
The function is declared after you added the event listener, so myFunction was undefined. Try putting the function before you add listener.
Revisit your html file once again.
best place to start your code are inside the device ready event
read more here Phonegap
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
This question is already asked on stackoverflow here but I didn't found any answer to it, so I raised again this. Please can anyone able reply for this?
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.compass.getCurrentHeading(onSuccess, onError);
}
function onSuccess(heading)
{
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError)
{
alert('Compass Error: ' + compassError.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
Either your device does not have a magnetic sensor, or the vendor has not implemented support for it in the OS.
Looking at the Android source code for the device-orientation plugin, the startup code is written like this (modified for brevity):
List<Sensor> list = this.sensorManager.getSensorList(Sensor.TYPE_ORIENTATION);
// If found, then register as listener
if (list != null)
this.setStatus(CompassListener.STARTING);
// If error, then set status to error
else
this.setStatus(CompassListener.ERROR_FAILED_TO_START);
Not sure why they made up their own error code there (public static int ERROR_FAILED_TO_START = 3), but really they should be reporting COMPASS_NOT_SUPPORTED as defined in the documentation.
I have a Firefox OS app that makes calls to cross domain pages and downloads data to display on the app, wich all works fine because I used the systemXHR permission and appended the { mozSystem: true } on every XMLHttpRequest.
Then I attached the Flurry script, made the FlurryAgent calls in the .js of the app and started recieving the info from the events on the Flurry Event Logs when I ran it on the Firefox OS Simulator. When I tried to install my app on a Firefox OS device, the Flurry session never starts and the app never loads.
I don't understand why Flurry works on the simulator and not on the device. I checked a lot of times for the internet connection on the device, wich works fine for the browser and other apps that were already installed. And my app worked fine on the device before I had attached Flurry.
Here is a sample of my code:
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="css/mystyle.css" />
<script src="https://cdn.flurry.com/js/flurry.js"></script>
<script src="js/app.js"></script>
</head>
<body>
.js
$(document).on('pagebeforecreate', '[data-role="page"]', function(){
if ($(this).attr('id')=="splash"){
$.mobile.allowCrossDomainPages = true;
}
});
$(document).on('pageinit', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pageinit!!");
if ($(this).attr('id')=="splash"){
FlurryAgent.startSession("7ZFX9Z4CVT66KJBVP7CF"); //Here is were it crashes
alert("Inicio sesion flurry");
console && console.log($(this).attr('id') + "- Entro al if para el timer");
var timer = window.setTimeout(next, 10000);
}
});
If there is anything else that you need to help me figure out what happens, let me know.
The device I'm using is a Qualcomm model, especifically Peak and has the OS version: Boot2Gecko 1.1.1.0hd-GP
This may be a CSP issue. Have a look at: https://developer.mozilla.org/en-US/Apps/CSP?redirectlocale=en-US&redirectslug=Apps%2FCSP Specifically Remote scripts are banned.
I'm new to phonegap so I just tried something out and was starting with the onDeviceReady method. The problem I'm encountering is, that the method doesn't fire.
This is my complete code, pretty basic.
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body>
<div id="texttest" style="display:block">text</div>
</body>
</html>
So now, when the app is launched the text should be hidden right? Well, the entire div should, but the device still shows me the "text". What am I doing wrong there? I also tried some other basic methods like
$("#texttest").hide()
but that didn't work either. This is the MainActivity.java
package de.activevaluetenthousandfliesphonegap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Ensure you have the correct version of cordova.js for the platform you are targetting.
Also what version of Phonegap are you using ?
Please try removing the font-awesome, if included. They have some compatibily issues with its css file.
<link rel="stylesheet" href="css/font-awesome.min.css" />
I had the same problem once and solved when I removed the above line from my code,
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body onload="onLoad()">
<div id="texttest" style="display:block">text</div>
</body>
</html>
Here is what I think you need to do:
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
}
Because when your device ready triggers jQuery hasn't loaded - this will ensure you do the following:
1. Get jQuery
2. Trigger PhoneGap deviceready
Also remove your onLoad() function ! :)
First of all You need to test it as an application in the emulator/mobile and not on the web browser. Secondly if you want to use geolocation then you can use it like this
function onDeviceReady() {
console.log("we are an app");
MyApp.initialize_phonegap();
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onload="onBodyLoad()">
It is working on my ripple emulator. But I use jquery-1.9.1.js and cordova 2.7 ?
I was using the cordova.js shared by my colleague who is an iOS developer. I replaced that with the latest cordova.js from the Cordova site and it started to work pretty well.
After creating your app using cordova, the index.js (or build.js) contains something like
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
in the default event handler function "receivedEvent".
These lines only work fine for the Hello-World-Dummy of Cordova. As soon as you replace the content of the index.html "parentElement" will be undefined. That leads to a javascript error
Uncaught TypeError: Cannot read property 'querySelector' of null
at Object.receivedEvent (index.js:37)
at Object.onDeviceReady (index.js:31)
at Channel.fire (cordova.js:846)
at cordova.js:231
The index.html of the cordova Hello-World contains a container
<div id="deviceready" class="blink">
As soon as you remove this, the build of the app failes with the mentioned JavaScript-Error.
You can simply replace the lines above with something like
if (id=="deviceready")
{
console.log("addEventListener for backbutton");
$("#texttest").css("display", "none");
// ... whatever
}