change element proprierty according network status

[Jonathan Silva]

Hi there, I’m using a cordova plugin of network information in my project, the objective to apply the network information plugin it’s to change the following original element below:

<ons-sliding-menu id="world" var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>

to this:

<ons-sliding-menu id='world' var='app.slidingMenu' menu-page='menu.html' main-page='404.html' side='left' type='overlay' max-slide-distance='200px'></ons-sliding-menu>

so, if haven’t a good connection, instead shows the “page.1.html” the app will show the page=‘404.html’. by way, I used the plugin so:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
    checkConnection();
}

function checkConnection()
{
    var networkState = navigator.network.connection.type;
    
    
    var states = {};
    states[Connection.UNKNOWN]  = 'Conexão desconhecida';
    states[Connection.ETHERNET] = 'Conexão Ethernet';
    states[Connection.WIFI]     = 'Conexão WiFi';
    states[Connection.CELL_2G]  = 'Conexão 2G';
    states[Connection.CELL_3G]  = 'Conexão 3G';
    states[Connection.CELL_4G]  = 'Conexão 4G';
    states[Connection.NONE] = 'Sem rede de dados';
    
    alert('Connection type: ' + states[networkState]);
    
    document.addEventListener("offline", onOffline, false);
    
    function onOffline()
    {
        var p404 = "<ons-sliding-menu id='world' var='app.slidingMenu' menu-page='menu.html' main-page='404.html' side='left' type='overlay' max-slide-distance='200px'></ons-sliding-menu>";
        alert('Connection type: ' + states[networkState]);
        document.getElementById('world').innerHTML = p404;
        
    }
    
    document.addEventListener('online', onOnline, false);
    
    function onOnline()
    
    {
        console.log("dispositivo está online");
    }
    
    
}

but unfortunately, the main page (page1.html) wasn’t changed to 404.html.
Can someone help to solve it?

thankful regards,
Jonathan.

[Fran Diox]

@Jonathan-Silva ons-sliding-menu is part of Onsen UI 1.x. If you are using Onsen UI version 2, you should switch to ons-splitter component since the other one is deprecated in the last versions. In any case, both components have methods (load or setMenuPage) to change their menu pages. Check the reference page of each component (sliding-menu only exists in v1 category).

Apart from that, innerHTML only changes, as its name says, the inner part of the element’s HTML. The element itself remains unmodified. Which means that, in your onOffline function, you are adding an extra sliding menu inside the existing one.

[Jonathan Silva]

@Fran-Diox , thanks for your explanation.
Yes, my project is using the Onsen UI v1, but it’s possible to change the main-page content by a function on onsen ui framework?
I did it before, into a project-based in cordova 6, and worked well.