CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Mike Phils
Mike Phils

Reputation: 3505

Checking internet connection and change the content jquery/Javascript

This all happen on page load without click event call:-

Here is updated code, In this I am trying to check internet connection is on or not. If connection is off then 'link' on the will be automatically disable(non clickable) and it bgcolor changes to red.

And if connection is off 'link' will be automatically get enable(clickable) and it bgcolor changes to green. However I am missing some thing:

code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<style>
.connected{ background-color:green;}
.diconnected{background-color:red;}
#link1{
    width: 100px;
    height: 200px;
    border: #0FF 1px solid;
}
</style>
<body>
<a href="#" id="link1"><img src="images/network.png"> My status</a>

</body>
<script>
window.onload=function() {
   var tId = setInterval(function() {
     document.getElementById("link1").disabled=!navigator.onLine;
   },500);
   if (navigator.onLine) {
       $("link1").bind('click', true).addClass('connected').removeclass('diconnected');

} else {
   $('.link1').unbind('click', false);
   $(".link1").bind('click', true).addClass('diconnected').removeclass('diconnected');
}

}

</script>
</html>

Thanks for help.

Upvotes: 0

Views: 327

Answers (2)

Stewartside
Stewartside

Reputation: 20905

First of all, if the user doesn't have an internet connection, how can you load in the jQuery library from an outside source? No internet = no web page.

Im going to guess that this is located on an intranet/network of some sort which is accessible without an internet connection, and if so, you will need to download the jQuery libraries yourself and upload them to the local server where they can be accessed by the network.

Second of all, you've referenced your ID's and Class's wrong.

$("link1") // Wrong
$("#link1") // Right

These will need to be amended so that jQuery knows its pointing at the right thing.

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

you can write following just before closing body tag =>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

You can check reachability in following way

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
  var status;

  // Open new request as a HEAD to the root hostname with a random param to bust the cache
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );

  // Issue request and handle response
  try {
    xhr.send();
    return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
  } catch (error) {
    return false;
  }

}

Upvotes: 1

Related Questions