Advanced Search

Return to Snippet

Revision: 12106
at March 2, 2009 16:23 by johnloy
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Network Detection With jQuery</title>
		<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
		<script type="text/javascript">
			
			// see article http://jamazon.co.uk/web/2008/06/17/publish-subscribe-with-jquery/
			
			$.networkDetection = function(url,interval){
				
				var url = url;
				var interval = interval;
				online = false;
				this.StartPolling = function(){
					this.StopPolling();
					this.timer = setInterval(poll, interval);
				};
				
				this.StopPolling = function(){
					clearInterval(this.timer);
				};
				
				this.setPollInterval= function(i) {
					interval = i;
				};
				
				this.getOnlineStatus = function(){
					return online;
				};
				
				function poll() {
					$.ajax({
						type: "POST",
						url: url,
						dataType: "text",
						error: function(){
							online = false; 
							$(document).trigger('status.networkDetection',[false]);
						},
						success: function(){
							online = true; 
							$(document).trigger('status.networkDetection',[true]);
						}
					});
				};
				
				
			};
						
			$(document).ready(function(){
				
				network = new $.networkDetection("poll.php", 5000);
				network.StartPolling();
				
				$(document).bind("status.networkDetection", function(e, status){	
					// subscribers can be namespaced with multiple classes
					subscribers = $('.subscriber.networkDetection');
					// publish notify.networkDetection to subscribers
					subscribers.trigger("notify.networkDetection", [status])
					/*
					other logic based on network connectivity could go here
					use google gears offline storage etc
					maybe trigger some other events
					*/
				});
				
				/* 
				Listen for notify.networkDetection events. This could equally be listening
				directly to status.networkDetection events
				*/
				$('#notifier').bind("notify.networkDetection",function(e, online){
					// the following simply demonstrates
					notifier = $(this);
					if(online){
						if (!notifier.hasClass("online")){
							$(this)
								.addClass("online")
								.removeClass("offline")
								.text("ONLINE");
						}
					}else{
						if (!notifier.hasClass("offline")){
							$(this)
								.addClass("offline")
								.removeClass("online")
								.text("OFFLINE");
						}
					};
				});
				
			});
		</script>

		
		<style type="text/css">
			
			* {
				font-family:verdana, arial, helvetica, sans-serif;
				font-weight:bold;
			}
			
			#notifier{
				margin:auto;
				margin-top:200px;
				border:1px solid #ccc;
				color:#333;
				width:300px;
				padding:20px;
				text-align:center;
			}
			
			#notifier.online{
				color:#fff;
				background:#3c3;
				border-color:#3c3;
			}
			
			#notifier.offline{
				color:#fff;
				background:#f66;
				border-color:#f66;
			}
			
			
		</style>
		
	</head>
<body>
	<ul id="listItems">
	</ul>
	
	<div id="notifier" class="subscriber networkDetection online">ONLINE</div>
	
</body>
</html>
Initial URL 









Initial Description














Initial Title





Implementation of a publisher-subscriber pattern in JQuery to poll network availability









Initial Tags





javascript, textmate, jquery









Initial Language





Other