I am testing a simple script for a larger solution; Im retrieving information from an external JSON file and displaying it within a PhoneGap app. The script works as needed, except when I change the content (not the structure) of the external JSON file. In fact I can even remove the JSON file from the server and the script still displays the original JSON content. Apparently there is something caching somewhere. Is there a way to disable such?
BTW Im running this on a local device via USB debugging not an emulator.
Here is the code (the console log is present for earlier debugging via the browser):
<!DOCTYPE html>
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
$.getJSON( "http://www.serverxyz.com/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and here is the JSON content:
{
"Goal One": "Activity One Completed",
"Goal Two": "Activity Two Completed",
"Goal Three": "Activity Three Completed",
}
Looks like I can use the cache:false for this. Hope someone finds this helpful.
Related
I am trying to create a simple add to home screen button for react app but the promt is working on windows but when i try to click in android it doesn't work what should i do ? the main code is shown below. I have added all the required files and the content as shown on https://web.dev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Vedic Wellness | Lucky Drawer</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="installer">
<button id="mkbutton">Add to homescreen</button>
</div>
<script>
let buttonInstall = document.getElementById("mkbutton");
let installerPromo = document.getElementById("installer");
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(reg) {
}).catch(function(err) {
console.log(err);
});
}
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
});
buttonInstall.addEventListener('click', async() => {
deferredPrompt.prompt();
const {
outcome
} = await deferredPrompt.userChoice;
deferredPrompt = null;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm a veteran programmer but am new to the whole mobile phone app programming and have just delved into PhoneGap. I have a pretty simple page I've put together using JQuery Mobile, PhoneGap, and Jquery but I've run into a snag. When I click on the href to load the "news" page, the .ajax() method doesn't seem to execute. I've got it in the traditional document ready wrapper and removing that doesn't seem to help the issue like I thought. So maybe I'm all screwed up but I cannot figure out why it wont fire UNLESS you refresh the page, then it works fine. Might be an newbie question but I feel like I am first year programmer.
Update: To be clear about what my issue is, I am testing in Firefox and have the PhoneGap desktop app serving the code. When I click on the News button the page loads but the elements that are added by Ajax don't appear. If I hit refresh on the browser, the page reloads and the elements appear. They never show up on the mobile phone unless I make a change to the code which forces the phonegap desktop app to cause the page to reload on the phone. So it's always the reload which causes it to happen.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:"" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.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.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-position="fixed">
<h1>My App</h1>
</div>
<div role="main" class="ui-content">
News
Gigs
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Here is news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var output = $('#news');
$.ajax({
url: 'http://xxxxxx.com/api/news/getnews',
dataType: 'jsonp',
cache : false,
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
+ '<p>'+item.body+'<br><small>'
+ item.date+'</small></p></div>';
output.append(story).enhanceWithin();
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
</script>
<title>News</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div role="main" class="ui-content" id="news">
<div data-role="collapsible">
<h1>Hi</h1>
<p>Am I collapsible?</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Can someone tell me why the ajax wont execute unless I refresh the page first? Thanks in advance.
I finally figured it out. The news.html page shouldn't have had the html, head section, or body tags.... just simply the contents of the body. After getting rid of that jQuery mobile loaded the new page into the "template" that was already there.
I did go ahead and replace the jquery's document onready event with:
document.addEventListener("deviceready", function(){
so now my new news.html page looks like this:
<div id="home" data-role="page">
<script type="text/javascript">
document.addEventListener("deviceready", function(){
var output = $('#news');
$.ajax({
url: 'http://xxxxxx.com/api/news/getnews',
dataType: 'jsonp',
cache : false,
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
+ '<p>'+item.body+'<br><small>'
+ item.date+'</small></p></div>';
output.append(story).enhanceWithin();
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
</script>
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div role="main" class="ui-content" id="news">
<div data-role="collapsible">
<h1>Hi</h1>
<p>Am I collapsible?</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer content</h4>
</div>
</div>
That's the content of the entire page. I will say that after I fixed this I began getting errors with my Content-Security-Policy and that's a whole other question but it seems to be working now and loading the ajax like it is supposed to.
I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that
MobileFirst app with Ionic crashes upon tapping android back button (which I override with App.overrideBackButton() ).
I wrote a very simple test app (new project, new workspace), first without Ionic then adding Ionic references: without Ionic everything works fine, no inherent errors in the console, with ionic I get two errors:
As soon as the app starts:
"Error in Success callbackId: App1084986710 : Error: Unknown event action undefined", source: file:///android_asset/www/default/worklight/cordova.js (309)
When I tap the back button (from page 2)
W/UnimplementedWebViewApi(21373): Unimplemented WebView method onKeyDown called from: android.webkit.WebView.onKeyDown(WebView.java:2389)
Updates:
If I remove WL.App.overrideBackButton(goBack); and WL.App.resetBackButton(); from the js functions both errors persist, and the app still crashes upon tapping the back button.
If I link/include the Ionic css and js but remove any Ionic content (no ng-app property, no app.js reference from index.html) the back button override works fine.
index.html
<!DOCTYPE HTML>
<html style="height:100%" ng-app="myTryOut" id="content">
<head>
<meta charset="UTF-8">
<title>TryOut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/ionic.css">
<link rel="stylesheet" href="css/ionicons.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body onload="initLoad()">
<div id="container">
<!-- content will be loaded here -->
</div>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/ionic-bundle.js"></script>
<script src="js/app.js"></script>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<h2>Page 1</h2>
<button class="button button-block button-assertive" onclick="goToPage2()">Go</button>
</html>
page2.html
<!DOCTYPE html>
<html>
<h2>Page 2</h2>
<button class="button button-block button-assertive" onclick="goBack()">Back</button>
</html>
main.js
function wlCommonInit(){
}
function initLoad() {
goBack();
}
function goToPage2() {
$("#container").load("html/derp.html",function(){
console.log("I'm in page 2");
WL.App.overrideBackButton(goBack);
});
}
function goBack() {
$("#container").load("html/dorp.html",function(){
console.log("I'm in page 1");
WL.App.resetBackButton();
});
}
app.js
var myModule = angular.module('myTryOut', ['ionic']);
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>