Check internet connection with offline.js - javascript

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?

Related

Error when verify install chrome extension

I have an error "Uncaught Chrome Web Store installations can only be initated by a user gesture."
With this code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ajhifddimkapgcifgcodmmfdlknahffk">
<script type="text/javascript">
chrome.webstore.install();
</script>
</head>
<body>
test Chrome
</body>
</html>
I don't understand why as i follow the google tuto : https://developer.chrome.com/webstore/inline_installation.
Someone has an idea?
Thanks.
From the documentation (I have italicized the important part):
Triggering inline installation
To actually begin inline installation, the chrome.webstore.install(url, successCallback, failureCallback) function must be called. This function can only be called in response to a user gesture, for example within a click event handler; an exception will be thrown if it is not.
You cannot just put the install() call in a script tag and have it run automatically.

Callback not fired on google-sign-in

<html>
<head>
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com" />
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script type="text/javascript">
function onSignIn(googleUser) {
console.log("Succesfully Singed in!!!");
}
</script>
</body>
</html>
With the above I can see a google-sign-in button which opens a pop-up accepts credential and signs me in. But I expect onSignIn method to be triggered when the sign in is successful, which is NOT happening.
Does anyone have any pointers at this?
Tried it on apache server on osx with safari, chrome and firefox browsers
You should add your platform.js script in head tag
<html>
<head>
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com" />
<script src="https://apis.google.com/js/platform.js" async defer> </script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script type="text/javascript">
function onSignIn(googleUser) {
console.log("Succesfully Singed in!!!");
}
</script>
</body>
</html>
In my case : The callback function was inside the body tag.
Callback function not work if it is in body tag, move it to head tag.
Check Developers Console and see if Authorized redirect URIs is pointing to the origin you are running the JavaScript?
In my case, the success event wasn't firing because I was trying to hook up a function from an external js file, included on the page. For some reason, the callbacks will only work if the hooked-up functions appear on the very same page.
Never seen anything like this before. I wonder how they check for this.
It's so late to answer but I think somebody will need this:
Remember to add origin URI at google console
If you don't see anything of onSignIn on the terminal, let check at the console of your browser

jQuery not functioning right after publish to test server

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.

simple play sound from soundcloud by clicking button

Trying to stream sound on page from soundcloud, as it said on API, but unfortunately there's no sound when I'm click on button.
Otherwise, when I "run" this code here or on jsfiddle - it works!
It must be problem that I'm trying to run it from local disc?
How can I solve it?
SC.initialize({
client_id: '53902af7a344bb0351898c47bc3d786f'
});
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>
You need to execute your call to the SDK while your files are hosted on a web server. But you can have the web server running form your local machine.
The problem is trying to run things from the filesystem. When doing so, you get the error:
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
To ensure you do have this error, please try the basic example from SoundCloud.
See also this question.
What technology to choose then depends on what you feel comfortable with...
For instance I do most of my local apps with Node.JS. Maybe the simplest way would be to use http-server as noted in your comment.
Launch it on the command line with: http-server <your-directory> -o. With -o your default browser will open and list the files in your-directory.
Notice that the SoundCloud docs are using the JQuery .live() function call but it is deprecated! That made their code work despite the DOM not being ready yet.
Here, you want to use the regular .on() function and have the binding of the click event handler done once the DOM is ready. For that you use $(document).ready(function() { ... });
Here's the code I used.
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<script>
SC.initialize({
client_id: "53902af7a344bb0351898c47bc3d786f"
});
$(document).ready(function() {
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
});
</script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>

appMobi onClick does not work

I am really new to appMobi, HTML and JavaScript. The only thing I want to do is that I have a button with an onClick method and this method should do anything.
I have defined a Script, I have a button but the method doesn't get called. Can someone please tell my why? The examples provided by appMobi don't do anything different - I think.
Here is my code:
<head>
<!-- the line below is required for access to the appMobi JS library -->
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
<script type="text/javascript">
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
</head>
<body >
<br>
<button onclick="myfunction();">MyButton</button>
</body>
Finally, I found the solution!
Instead of onclick="myfunction" you have to use ontouchstart="myfunction"!
Would be nice if someone could tell me why.

Categories