Javascript with jQuery mobile and phonegap not working as expected

Question

I am developing an iphone app on phonegap and I am using jQuery mobile. I want to implement a simple functionality on a page like when press a button on my html page, check if I have internet connection. If I do, then proceed on the next page else, display the error page.

I include the libraries:

<link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
    <script type="text/javascript" src="functionality.js"></script>
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script> 

my html code of page1.html is:

<a href = "#map_page" id='map_button' data-role="button" onclick = "connection();">Go!</a>

Now the functionality.js file contains the connection() function which is written according to the phonegap's docs:

function connection(){
alert('checking...');
// check if there is internet connection
navigator.network.isReachable("google.com", isNetworkAvailable, {});

}

function isNetworkAvailable(status) {
     var networkState = status.code;
     alert('Connection Type ' + networkState + ' - ' + status.message); }

The problem is that I am never getting in the connection() function, not even when I use the following script in my html page:

$('#map_button').click (function(event) { checkConnection()});

I've been working on this piece of code for a few days without being able to make it work. I would really appreciate your help...

Answer 1

I was also having trouble getting checking for a connection but found an alternative method of doing it using var networkState = navigator.network.connection.type; I've implemented it quite differently binding a switched function to all my links. As it maybe on interest in the deviceReady method I bind all links to call a function that will decide whether or that link needs connection checking or not. Skip to second function for connection stuff!

 function onDeviceReady()
{

    //Bind all links and intercept them before they go anywhere //I'm jquery dependant 
    $('a').bind('click', function(event) {
        switch($(this).attr('id'))//using the id value of the link we help us decide what kidn of action we are doing
        {
            case "data-loader-page":
                return event;
            break;

            case "load-version-data": //I'm about to pull JSON data from a server

                if(!checkConnection()){return false}; //check for connection and exit if it fails.

                doJSON(); //at this point we have a connection so go get remote data.
                return false;
            break;

            //for un-handled links we will assume that you just want to hash bang
            default: return event;
        }
    }); 
}

This function works just fine for me and you can call it inline on your onclick event if you want. It doesn't depend on jquery either.

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';

    if(states[networkState]==states[Connection.NONE] || states[networkState]==states[Connection.UNKNOWN]){
        alert('A network connection is required to access this page.');
        return false;
    } else {
        return true;    
    }
}

I'm jquery / jquery mobile dependant

<div data-role="page" data-theme="b" id="sql-manager-page">
    <div data-role="header">
        <h1>SQL Manager</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#data-loader-page" id="data-loader-page">Data Loader</a></li>
                <li><a href="#load-version-data" id="load-version-data" rel="external">Load version data</a></li>
        </ul>


    </div>
    <div data-role="footer">
        <h4> <a href="#privacy-page">Privacy</a></h4>
    </div>
</div>

Not the most elegant example I know but I hope this helps;

Answer 2

Have you tried changing your HTML to:

<a href="#map_page" id='map_button' data-role="button" onclick="connection">Go!</a>

Without the () ? Usually if you add the () it will execute the function and replace it with the return value of that function. I'm not 100% positive that happens in the HTML onclick attribute though. Worth a shot.

Your second try looks like the wrong function name, checkConnection() vs connection()