Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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!</p> <pre><code> 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; } }); } </code></pre> <p>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.</p> <pre><code>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; } } </code></pre> <p>I'm jquery / jquery mobile dependant</p> <pre><code>&lt;div data-role="page" data-theme="b" id="sql-manager-page"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;SQL Manager&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview"&gt; &lt;li&gt;&lt;a href="#data-loader-page" id="data-loader-page"&gt;Data Loader&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#load-version-data" id="load-version-data" rel="external"&gt;Load version data&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt; &lt;a href="#privacy-page"&gt;Privacy&lt;/a&gt;&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Not the most elegant example I know but I hope this helps;</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload