Javascript с мобильным jQuery и телефонной пробел не работает, как ожидалось

Question

Я занимаюсь разработкой приложения для 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> 

мой HTML-код page1.html:

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

Теперь файл functions.js содержит функцию connection (), которая написана в соответствии с документами телефонного разрыва:

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

Проблема в том, что я никогда не получаю функцию connection (), даже когда использую следующий скрипт на своей html-странице:

$ ('# map_button'). click (функция (событие) { Проверьте подключение()});

Я работал над этим фрагментом кода несколько дней, но не смог заставить его работать. Буду очень признателен за вашу помощь ...

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() против connection()