Javascript with jQuery mobile和phonegap没有像预期的那样工作

Question

我正在phonegap上开发一个iphone应用程序，我使用jQuery移动。我想在一个页面上实现一个简单的功能，就像在我的html页面上按下一个按钮，检查我是否有互联网连接。如果我做了，然后继续下一页，否则，显示错误页面。

包含库:

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

我的page1.html代码是:

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

现在function .js文件包含了connection()函数，该函数是根据phonegap的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); }

问题是，我从来没有得到连接()函数，甚至当我使用以下脚本在我的html页面:

$ (" # map_button")。点击(函数(事件){checkConnection ()});

我已经在这段代码上工作了好几天了，但还是没能使它工作。

Answer 1

我也有麻烦检查连接，但发现了使用var networkState = navigator.network.connection.type的替代方法;我的实现方式非常不同，将一个切换函数绑定到所有链接。因为它可能对deviceReady方法感兴趣，所以我将所有链接绑定到调用一个函数，该函数将决定该链接是否需要连接检查。跳转到第二个函数进行连接!

 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;
        }
    }); 
}

这个函数对我来说很好，如果你想的话，你可以在你的onclick事件上调用它。它也不依赖于jquery

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

我是jquery/jquery移动依赖

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

不是我知道的最优雅的例子，但我希望这对你有帮助;

Answer 2

您是否尝试过将您的HTML更改为:

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

没有() ?通常，如果您添加()，它将执行该函数并将其替换为该函数的返回值。不过，我不是100%肯定在HTML的onclick属性中会发生这种情况。值得一试。

您的第二次尝试看起来像错误的函数名称，checkConnection() vs connection()