This question was raised several times already. But I am still struggling with the issue with no idea how to solve it.
My very primitive app code:
<!DOCTYPE html>
<html>
<head>
<title>Standalone 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);
var iabRef = null;
function onDeviceReady() {
iabRef = window.open('http://example.com', '_blank', 'location=no', 'zoom=no', 'hardwareback=yes');
iabRef.addEventListener('exit', iabClose);
}
function iabClose(event) {
iabRef.removeEventListener('exit', iabClose);
}
</script>
</head>
<body>
</body>
</html>
On phonegap forum I read that Android hardware back button functionality was added by default. But it doesn't work for me, still.
desired behaviour: navigate through several links on a page, tap back and see previous pages, according to history.
actual behaviour: after navigating through several links and tapping back inAppBrowser is closed, I see white screen instead of a previous page.
As you can see I added hardwareback property also, but with no luck. Also I tried ti hijack back button behaviour with putting this code inside onDeviceReady function:
document.addEventListener("backbutton", function(e){
e.preventDefault();
navigator.app.backHistory()
}, false);
And again no luck. Tried on several different devices, all the same. I guess there is a very simple thing I am missing. Any ideas?
If it matters, I build the app on build.phonegap.com.
Problem was that I called IAB in a wrong way, it should be
iabRef = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
Also I should have specified the source to npm for IAB plugin. Without this specification PGB uses old version from deprecated repo.
Related
I know how to open Multiple Tabs using JavaScript but my solution does not seem not to work on "Bing for mobile".
I'm trying to achieve the following.
Whenever a user clicks on the Call Now button, a call to specified number should be made and the page should redirect to some other page.
For this, the sample code I used is,
<a id="makeCall" onclick="callNRedirect()"> <!-- Target blank, if you want to open in new tab -->
<img alt="Call icon" src="https://static.wixstatic.com/media/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png/v1/fill/w_354,h_212,al_c,usm_0.66_1.00_0.01/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png" style="width: 170px;" />
</a>
<script type="text/javascript">
let callNRedirect = function(){
makeCall().then(function() {
window.top.location.href = 'http://www.business-insurance-now.com/call2';
});
}
async function makeCall() {
window.open("tel:989898", “_blank”);
}
</script>
The thing is, it is working fine on Webkit based browsers, but Bing for mobile and Microsoft Edge are not working as expected.
Live link for the demo: https://codestroke.blogspot.com/2018/10/samples-samples-everywhere.html
The Bing app won't open the dial app.
The Edge app won't redirect to the page.
Update: Looks like the Edge was blocking the redirection, so it is kinda solved. Not sure of bing though!
Below is a simple example to open 2 links using HREF.
<a href="http://Microsoft.com" onclick="window.open('http://Bing.com');
return true;">multiopen</a>
If you want to open more then 2 links then you can try to refer example below.
<!DOCTYPE html>
<head>
<script>
function demo()
{
window.open('http://yahoo.com');
window.open('http://bing.com');
window.open('http://microsoft.com');
};
</script>
</head>
<body>
multiopen
</body>
</html>
I have the following jQuery in a user control using a Telerik RadGrid:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
var warnMessage = "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save and Continue button, your changes will be lost. Are you sure you want to exit this page?";
$(document).ready(function () {
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:not(:button,:submit),textarea,select').on('DOMNodeRemoved', function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:submit').click(function (e) {
warnMessage = null;
});
});
</script>
What it's meant to do is to keep a user from clicking away from the page using several of these controls without saving their changes. When I run this in VS2013, it works fine, triggering the pop-up when anything is added/updated/deleted in the RadGrid and the user attempts to leave the page without saving. However after publishing to the test server,the .click is never hit, so when a user tries to add another entry to the grid, the warning message fires again, and the on DOMNodeRemoved never works. Is there something I'm doing wrong in the code? Or is there something wrong with the server? I'm new to jQuery, so any help would be greatly appreciated. I will post more info if needed.
After looking at the console fo rthe test-server site, I found I was getting an "object doesn't support property or method 'addeventlistener'" error. I went to the Master page of the site and added a meta to check for the compatibility mode and that fixed it right up.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="/Scripts/modernizr.js"></script></head>
UPDATE
After looking into this issue more, it's not that JQuery wasn't working per se, it was that the functionality did not exist for my solution to work in IE9.
I am creating phonegap application for android.
I want to check internet connection for application. I am using offline.js.
But it's not working at all for me.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>datePickerAngularTPLS</title>
<link href="css/offline.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/offline.js"></script>
</head>
<body>
<script>
$(function () {
function on(evt) {
alert("connected successfully");
}
function off(evt) {
alert("connection failed");
}
Offline.on("up", on);
Offline.on("off", off);
});
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
What is the problem in above code... ?
I just want to show alert on success and lose of internet connection.
I have also tried with navigator.isOnlie, but not reliable.
Please follow offline js LINK
Or other way is :
window.navigator.onLine
This will return true or false.
And one more way is using Phonegap available plugin:
Phonegap Plugin
In your first example you have forgotten to close the $ function. Its likely you would see an error message in the console, and those handlers would never have been created/attached.
If this is just a typo in your question and you are properly closing that function in your real code, then my guess is that you're adding the handlers after the up event has already occurred. Here it explains when these events are triggered.
If you load your page, then toggle your connection on and off do you see the events logged?
I was using phonegap and needed to use 'touchstart' to speed up click response, only to realize that none of 'touchstart', 'touchmove', 'touchend' is firing but 'click'.
I even tested a simple page in the built-in browser (7" android 4.0.3 tablet), and found it failed.
I tested on two tablets still the same.
In the following page, button2 shows only 'html_click', button3 shows only 'click':
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<title>Droid touch event test.</title>
</head>
<body>
<button id="button">touch it</button>
<button id="button2" ontouchstart="d_('html_touchstart')" onclick="d_('html_click')">html</button>
<button id="button3">touch 3</button>
<div id="db"></div>
<script>
function $(d){return document.getElementById(d)}
function d_(m){dbo.innerHTML=dbo.innerHTML+' '+m}
function ts1(e){d_('document touched')}
function ts2(e){d_('button touched')}
function eh(e){
d_(e.type);
}
var ets='touchstart',dbo=$('db');
document.addEventListener(ets,ts1,false);
$('button').addEventListener(ets,ts2,false);
$('button3').addEventListener(ets,eh,false);
$('button3').addEventListener('touchend',eh,false);
$('button3').addEventListener('click',eh,false);
</script>
</body>
</html>
Why 'touchstart isn't firing? Should I do anything to make touch events work?
Or is there any other way around to make click response faster?
I used mousedown event, worked but not notably fast.
(new Date()).getTime() difference (including some innerHTML change) between mousedown and click is only around 15.
Keeping only what was necessary to show you the concept, I wrote this and tested using Phonegap Build (default to Phonegap 2.0, but shouldn't matter) on an ICS device. Should work for you:
<!DOCTYPE html>
<html>
<body>
<button id="button1">1</button>
<button id="button2">2</button>
<script>
document.getElementById("button1").addEventListener('touchstart',button1Pressed);
document.getElementById("button2").addEventListener('touchstart',button2Pressed);
function button1Pressed ()
{
alert('Button 1 Pressed');
}
function button2Pressed ()
{
alert('Button 2 Pressed');
}
</script>
</body>
</html>
I also faced the same problem. On bellow first line i was getting error "Android WebView and NO_FAST_DRAW = false". After change to second line. it worked. the error was at createCustomAlert('wpt'). SO the function which I was called look like a string. This err was coming. So please check at place of function calling place
onclick = 'createCustomAlert('wpt')'
onclick = 'createCustomAlert(3)'
I also faced the same problem and messed it with almost three days. I put click events on my html input tags, (EditText) and tried, but it also didn't work. Finally, to my miracle, I just put a simple alert("Hello") to see with ontouchstart. To my surprise, I successfully got the alert and also softkeyboard, for which I was trying almost a week. You also try with this..
Best of Luck
I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.