Phonegap onDeviceOnline

Question

I am using the folowing script to check if device is online or offline:

function checkConnection() {
    document.addEventListener("online", onDeviceOnline, false);
    document.addEventListener("offline",onDeviceOffline, false);
    function onDeviceOnline(){
        loadZive();
        loadMobil();
        loadAuto();
    };
    function onDeviceOffline(){
        alert("deviceIsOffline");
    };
};
checkConnection();

Then I have this function to load feed:

function loadZive(publishedDateConverted){

    google.load("feeds", "1");  
        function initialize() {
            var feed = new google.feeds.Feed("http://www.zive.sk/rss/sc-47/default.aspx");
            feed.setNumEntries(window.localStorage.getItem("entriesNumber"));
            feed.load(function(result) {
                if (!result.error) {
                    var feedlist = document.getElementById("feedZive");
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var li = document.createElement("li");
                        var entry = result.feed.entries[i];
                        var A = document.createElement("A");
                        var descriptionSettings = window.localStorage.getItem("descriptionSettings");
                        if (descriptionSettings=="true"){
                            var h3 = document.createElement("h3");
                            var p = document.createElement("p");
                            var pDate = document.createElement("p");
                            pDate.setAttribute("style","text-align: right; margin-top: 5px;");
                            var publishedDate = new Date(entry.publishedDate);
                            publishedDateConverted = convertTime(publishedDate);
                            pDate.appendChild(document.createTextNode(publishedDateConverted));
                            h3.setAttribute("style","white-space: normal;")
                            h3.appendChild(document.createTextNode(entry.title));
                            p.setAttribute("style","white-space: normal;")
                            p.appendChild(document.createTextNode(entry.content));
                            A.setAttribute("href",entry.link);
                            A.appendChild(h3);
                            A.appendChild(p);
                            A.appendChild(pDate);
                            }
                        else{
                            A.setAttribute("href",entry.link);
                            A.setAttribute("style","white-space: normal;")
                            A.appendChild(document.createTextNode(entry.title));
                        };
                        li.appendChild(A);
                        feedlist.appendChild(li);
                    }
                    $("#feedZive").listview("refresh");
                }
            });
        }
        google.setOnLoadCallback(initialize);   
    };

First I load second script, then first. But I cant see anything. If I turn my app on then I see page layout for abou 1 sec then (probably after loading first script) function onDeviceOnline() happens and I can see only blank page. But it should load feeds into existing template.

IMHO onDeviceOnline function happens after loading the page template and therefore it cant import feeds. If I create function like this:

function loadFeeds(){
    loadZive();
    loadMobil();
    loadAuto();
};

then everything works fine so I think it has something to do with online and offline eventlisteners. It also didnt work when I put checkconnection into onDeviceReady function so it should not be the problem. So is there any way to check if device is online and if it is then use js file to load feeds?

EDIT: I have used Simon McDonald suggestion and created code like this: function onDeviceReady(){

    document.addEventListener("backbutton", onBackKeyDown, false);
        function onBackKeyDown(){
                navigator.app.exitApp();
        }
    function checkConnection() {
        var networkState = navigator.network.connection.type;
        if (networkState == "none"){
            alert("no network connection");
        }
        else{
            loadZive();
            loadMobil();
            loadAuto();
        };
    };
    checkConnection();  
};

With this code alerts are working perfectly for device online and device offline but when I try to loadFeed I get the same result as before (page layout loads and then everything changes to blank page).

Answer 1

The problem is that you are adding a "online" event listener in device ready event listener but the device is already on line so the event will not fire again until there is a change in connectivity. In your device ready event listener you should check the value of navigator.connection.network.type and make sure it isn't NONE.

http://docs.phonegap.com/en/2.0.0/cordova_connection_connection.md.html#connection.type