Can't get Connection State on page load with my phonegap jquery app

Question

I am trying to load a data feed when my phonegap app loads. It works fine, except that when I don't have a data connection, I want the system to sense this and then give a nice message like, "Sorry you don't have a data connection.". Once the page is all loaded I can click a button and run a function that tells me my connection state. However, it simply won't run this code automatically when the page loads, and I can't figure out why. I have the same problem when I test this on iOS or Android. I've stripped out only the basics, so hopefully someone can't discover the problem.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css" />   
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
    <script src="js/jquery.jsonp-2.1.4.min.js"></script>    
<script>
function checkConnection() {
    var networkState = navigator.network.connection.type;
    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';
    alert('Connection type: ' + states[networkState]);
    if(states[networkState] == 'No network connection') { show_no_connection(); }
}

$(document).ready(function(){
    checkConnection();
});

function show_no_connection() {
        $('#status').html('You Have No Data Connection!');  
}   


</script>       

</head>
<body>

 <div id="status">SO FAR, YOU HAVE A CONNECTION.</div>
     <a href='javascript:void(0);' onclick='checkConnection();'>Check your connection</a><br/><br/> 
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>       
</body>

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Classic jQuery syntax $(document).ready(function(){ should not be used with jQuery Mobile, it will not work correctly not to mention it can't be used to initialize Phonegap code. More about this topic can be found in this ARTICLE. Or find it HERE.

This should be used to solve this problem:

document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady() {
    checkConnection();
}

function checkConnection() {
    var networkState = navigator.network.connection.type;
    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';
    alert('Connection type: ' + states[networkState]);
    if(states[networkState] == 'No network connection') { show_no_connection();
}

function show_no_connection() {
    $('#status').html('You Have No Data Connection!');  
}

Code needs to wait for Phonegap framework initialization and it is done like this:

document.addEventListener("deviceready", onDeviceReady, false);

Can't get Connection State on page load with my phonegap jquery app

1 Answers1