Can you disable links when there is no internet connection and enable them when internet connection returns?

Question

When connection returns, all I get is NULL for the anchors.

  <script type="text/javascript"> 
  setInterval(function(){  /*check ~every second*/
  var status = navigator.onLine?'Menu Enabled!':'Menu Disabled!';

the first part sets an attribute when the connection is lost

            var anchors = document.getElementsByTagName("a");
        if(status == 'Menu Disabled!') {   /*if connection is lost*/            
            for (var i = 0; i < anchors.length; i++) {
            var href = anchors[i].href;
            anchors[i].setAttribute("rel", href);
            anchors[i].href = "javascript:;"              
                                                     }
                                        }

this part is supposed to remove the attribute and restore the anchor

       if(status == 'Menu Enabled!') {    /* if connection is reconnected */   
            for (var i = 0; i < anchors.length; i++) {
            var href = anchors[i].getAttribute("rel");
            anchors[i].removeAttribute("rel");
            anchors[i].href = href
                                                     }        
                                      }
 }, 1000);
 </script

Yes, you can accomplish your goal - but not with that code. How are you "notifying" the application that `status` has changed? — Randy Casburn, Oct 27 '20 at 21:48
Isn't it polling the script every second with the interval? The first part works to disable the anchors, but I cant seem to return it to original state. — EPH, Oct 27 '20 at 21:52
Does this answer your question? [Check if Internet Connection Exists with jQuery?](https://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-jquery) — Thomas Cayne, Oct 27 '20 at 21:52
Sorry I was trying to apply the code, I can't seem to get it to work. status doesn't seem to be defined — EPH, Oct 27 '20 at 22:18
You do see it work in my answer snippet right? By work, I mean it literally Changs the attributes as you designed. — Randy Casburn, Oct 27 '20 at 22:19
I see the two links and when I click on the links they don't resolve. Thats the state I need them in when there is no internet connection. I need them to change back to clickable when the internet connection returns. Thats why I was using navigator. — EPH, Oct 27 '20 at 22:24
Yes, change `false` to `navigator.onLine` - I changed it to force the offline condition - it works the way you want it to. — Randy Casburn, Oct 27 '20 at 22:32

JSmart523 · Answer 1 · 2020-10-27T22:56:05.863

Wow. So many great answers between when I started writing and testing it vs when I finished!

Here's a way to disable only the links via a function that does nothing if accidentally executed a second time thanks to a technique posted by Ted Hopp.

const setItUp = (function() {
    let executed = false;
    return function() {
        if (!executed) {
            executed = true;
            
            const linkList = document.querySelectorAll('a');
            for (let link of linkList) {
                link.addEventListener(
                    "click",
                    function(event) {
                        if (!window.navigator.onLine) { //not a perfect check. See https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine for more.
                            alert('Sorry! Your browser seems to be off-line!');
                            event.preventDefault();
                    }    },
                    false
                );
    }    }    }
})();
setItUp();

<html>
    <body>
        <a href="https://cnn.com/">cnn.com</a><br>
        <a href="https://google.com/">google.com</a><br>
        <div>standard text that's not a link</div>
    </body>
</html>

Beware that window.navigator.onLine is not universal. See https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine for details.

Super, I thinks this is better than window.onclick. – lissettdm Oct 27 '20 at 22:52 — lissettdm, Oct 27 '20 at 22:52

score 1 · Answer 2 · answered Oct 27 '20 at 21:53

You simply were missing a couple of { } here and there. The code below is your code but edited.

Additionally, you could make your code much more efficient by changing a couple things here or there, but this answers your question.

Note is set the ternary to false to force the offline condition

setInterval(
  function() {
    var status = false ? 'Menu Enabled!' : 'Menu Disabled!';
    var anchors = document.getElementsByTagName("a");
    if (status == 'Menu Disabled!') { /*if connection is lost*/
      for (var i = 0; i < anchors.length; i++) {
        var href = anchors[i].href;
        anchors[i].setAttribute("rel", href);
        anchors[i].href = "javascript:;"
      }
    }
    if (status == 'Menu Enabled!') { /* if connection is reconnected */
      for (var i = 0; i < anchors.length; i++) {
        var href = anchors[i].getAttribute("rel");
        anchors[i].removeAttribute("rel");
        anchors[i].href = href
      }
    }
  }, 1000);

<a href="google.com">Google</a>
<a href="yahoo.com">Google</a>

John · Accepted Answer · 2020-10-27T22:52:43.470

0

Event handlers should be defined at the bottom of your JavaScript which should all be contained within the head element. If properly positioned this code will work in strict conditions. You can read more at MDN.

window.onclick = function(event)
{
 if (!navigator.onLine)
 {
  event.preventDefault();
  alert('Notice: you are no longer connected to the Internet, please check your connection and try again.');
 }
}

edited Oct 27 '20 at 22:52

answered Oct 27 '20 at 21:51

John

1
13
98
177

1

John, this is what I was looking for! How simple! I really wasted a lot of time on un-needed code. Thanks a bunch! – EPH Oct 27 '20 at 22:31
I'm glad to have helped. Keep in mind a good GUI will let the user know *why* something isn't working, e.g. `alert('Notice: you are no longer connected to the Internet, please check your connection and try again.');` and you will help your visitors and they'll be happy to have minimized the time wasted from their cat gnawing on their cables. – John Oct 27 '20 at 22:36
I've updated it to include the `alert`. If you want lots of good examples of snippets of code visit the link in to my site (JAB) and visit Documentation ⇨ JavaScript. You can click on the linked headers to view the code of any given function and most functions are already documented. – John Oct 27 '20 at 22:53

Can you disable links when there is no internet connection and enable them when internet connection returns?

3 Answers3