skrall/jquery-pubsub-bugreport-index.html

## jquery-pubsub-bugreport-index.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="jquery/jquery.form.js"></script>
    <script type="text/javascript" src="jquery/jquery.atmosphere.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var detectedTransport = null;
            var socket = $.atmosphere;
            var subSocket;

            function getKeyCode(ev) {
                if (window.event) return window.event.keyCode;
                return ev.keyCode;
            }

            function getElementById() {
                return document.getElementById(arguments[0]);
            }

            function getTransport(t) {
                transport = t.options[t.selectedIndex].value;
                if (transport == 'autodetect') {
                    transport = 'websocket';
                }

                return false;
            }

            function getElementByIdValue() {
                detectedTransport = null;
                return document.getElementById(arguments[0]).value;
            }

            function subscribe() {
                var request = { url : document.location.toString() + 'pubsub/' + getElementByIdValue('topic'),
                    transport: getElementByIdValue('transport'),
                    contentType : "text/html;charset=ISO-8859-1"};

                request.onMessage = function (response) {
                    detectedTransport = response.transport;
                    if (response.status == 200) {
                        var data = response.responseBody;
                        if (data.length > 0) {
                            $('ul').prepend($('<li></li>').text(" Message Received: " + data + " but detected transport is " + detectedTransport));
                        }
                    }
                };

                subSocket = socket.subscribe(request);
            }

            function unsubscribe(){
                socket.unsubscribe();
            }

            function connect() {
                unsubscribe();
                getElementById('phrase').value = '';
                getElementById('sendMessage').className = '';
                getElementById('phrase').focus();
                subscribe();
                getElementById('connect').value = "Switch transport";
            }

            getElementById('connect').onclick = function(event) {
                if (getElementById('topic').value == '') {
                    alert("Please enter a PubSub topic to subscribe");
                    return;
                }
                connect();
            }

            getElementById('topic').onkeyup = function(event) {
                getElementById('sendMessage').className = 'hidden';
                var keyc = getKeyCode(event);
                if (keyc == 13 || keyc == 10) {
                    connect();
                    return false;
                }
            }

            getElementById('phrase').setAttribute('autocomplete', 'OFF');
            getElementById('phrase').onkeyup = function(event) {
                var keyc = getKeyCode(event);
                if (keyc == 13 || keyc == 10) {

                    var m = " sent using " + detectedTransport;
                    if (detectedTransport == null) {
                        detectedTransport = getElementByIdValue('transport');
                        m = " sent trying to use " + detectedTransport;
                    }

                    subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

                    getElementById('phrase').value = '';
                    return false;
                }
                return true;
            };

            getElementById('send_message').onclick = function(event) {
                if (getElementById('topic').value == '') {
                    alert("Please enter a message to publish");
                    return;
                }

                var m = " sent using " + detectedTransport;
                if (detectedTransport == null) {
                    detectedTransport = getElementByIdValue('transport');
                    m = " sent trying to use " + detectedTransport;
                }

                subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

                getElementById('phrase').value = '';
                return false;
            };

            getElementById('topic').focus();
            connect();
        });
    </script>
    <style type='text/css'>
        div {
            border: 0px solid black;
        }

        input#phrase {
            width: 30em;
            background-color: #e0f0f0;
        }

        input#topic {
            width: 14em;
            background-color: #e0f0f0;
        }atmosphere-jquery-pubsub

        div.hidden {
            display: none;
        }

        span.from {
            font-weight: bold;
        }

        span.alert {
            font-style: italic;
        }
    </style>
</head>
<body>
<h1>PubSub Sample using Atmosphere's JQuery Plug In. By default the sample use the DefaultBroadcaster.</h1>
<h2>To enable Redis, XMPP, Hazelcast of ActiveMQ (JMS), uncomments in pom.xml the associated dependency or put atmosphere-{hazelcast|jms|xmpp|redis}.jar under WEB-INF/lib</h2>

<h2>Select PubSub topic to subscribe</h2>

<div id='pubsub'>
    <input id='topic' type='text' value='test'/>
</div>
<h2>Select transport to use for subscribing</h2>

<h3>You can change the transport any time.</h3>

<div id='select_transport'>
    <select id="transport">
        <option id="autodetect" value="websocket">autodetect</option>
        <option id="websocket" value="websocket">websocket</option>
        <option id="sse" value="sse">sse</option>
        <option id="jsonp" value="jsonp">jsonp</option>
        <option selected id="long-polling" value="long-polling">long-polling</option>
        <option id="streaming" value="streaming">http streaming</option>
    </select>
    <input id='connect' class='button' type='submit' name='connect' value='Connect'/>
</div>
<br/>
<br/>

<h2 id="s_h" class='hidden'>Publish Topic</h2>

<div id='sendMessage' class='hidden'>
    <input id='phrase' type='text'/>
    <input id='send_message' class='button' type='submit' name='Publish' value='Publish Message'/>
</div>
<br/>

<h2>Real Time PubSub Update</h2>
<ul></ul>
</body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="jquery/jquery.form.js"></script>
	<script type="text/javascript" src="jquery/jquery.atmosphere.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	var detectedTransport = null;
	var socket = $.atmosphere;
	var subSocket;

	function getKeyCode(ev) {
	if (window.event) return window.event.keyCode;
	return ev.keyCode;
	}

	function getElementById() {
	return document.getElementById(arguments[0]);
	}

	function getTransport(t) {
	transport = t.options[t.selectedIndex].value;
	if (transport == 'autodetect') {
	transport = 'websocket';
	}

	return false;
	}

	function getElementByIdValue() {
	detectedTransport = null;
	return document.getElementById(arguments[0]).value;
	}

	function subscribe() {
	var request = { url : document.location.toString() + 'pubsub/' + getElementByIdValue('topic'),
	transport: getElementByIdValue('transport'),
	contentType : "text/html;charset=ISO-8859-1"};

	request.onMessage = function (response) {
	detectedTransport = response.transport;
	if (response.status == 200) {
	var data = response.responseBody;
	if (data.length > 0) {
	$('ul').prepend($('<li></li>').text(" Message Received: " + data + " but detected transport is " + detectedTransport));
	}
	}
	};

	subSocket = socket.subscribe(request);
	}

	function unsubscribe(){
	socket.unsubscribe();
	}

	function connect() {
	unsubscribe();
	getElementById('phrase').value = '';
	getElementById('sendMessage').className = '';
	getElementById('phrase').focus();
	subscribe();
	getElementById('connect').value = "Switch transport";
	}

	getElementById('connect').onclick = function(event) {
	if (getElementById('topic').value == '') {
	alert("Please enter a PubSub topic to subscribe");
	return;
	}
	connect();
	}

	getElementById('topic').onkeyup = function(event) {
	getElementById('sendMessage').className = 'hidden';
	var keyc = getKeyCode(event);
	if (keyc == 13 \|\| keyc == 10) {
	connect();
	return false;
	}
	}

	getElementById('phrase').setAttribute('autocomplete', 'OFF');
	getElementById('phrase').onkeyup = function(event) {
	var keyc = getKeyCode(event);
	if (keyc == 13 \|\| keyc == 10) {

	var m = " sent using " + detectedTransport;
	if (detectedTransport == null) {
	detectedTransport = getElementByIdValue('transport');
	m = " sent trying to use " + detectedTransport;
	}

	subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

	getElementById('phrase').value = '';
	return false;
	}
	return true;
	};

	getElementById('send_message').onclick = function(event) {
	if (getElementById('topic').value == '') {
	alert("Please enter a message to publish");
	return;
	}

	var m = " sent using " + detectedTransport;
	if (detectedTransport == null) {
	detectedTransport = getElementByIdValue('transport');
	m = " sent trying to use " + detectedTransport;
	}

	subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

	getElementById('phrase').value = '';
	return false;
	};

	getElementById('topic').focus();
	connect();
	});
	</script>
	<style type='text/css'>
	div {
	border: 0px solid black;
	}

	input#phrase {
	width: 30em;
	background-color: #e0f0f0;
	}

	input#topic {
	width: 14em;
	background-color: #e0f0f0;
	}atmosphere-jquery-pubsub

	div.hidden {
	display: none;
	}

	span.from {
	font-weight: bold;
	}

	span.alert {
	font-style: italic;
	}
	</style>
	</head>
	<body>
	<h1>PubSub Sample using Atmosphere's JQuery Plug In. By default the sample use the DefaultBroadcaster.</h1>
	<h2>To enable Redis, XMPP, Hazelcast of ActiveMQ (JMS), uncomments in pom.xml the associated dependency or put atmosphere-{hazelcast\|jms\|xmpp\|redis}.jar under WEB-INF/lib</h2>

	<h2>Select PubSub topic to subscribe</h2>

	<div id='pubsub'>
	<input id='topic' type='text' value='test'/>
	</div>
	<h2>Select transport to use for subscribing</h2>

	<h3>You can change the transport any time.</h3>

	<div id='select_transport'>
	<select id="transport">
	<option id="autodetect" value="websocket">autodetect</option>
	<option id="websocket" value="websocket">websocket</option>
	<option id="sse" value="sse">sse</option>
	<option id="jsonp" value="jsonp">jsonp</option>
	<option selected id="long-polling" value="long-polling">long-polling</option>
	<option id="streaming" value="streaming">http streaming</option>
	</select>
	<input id='connect' class='button' type='submit' name='connect' value='Connect'/>
	</div>
	<br/>
	<br/>

	<h2 id="s_h" class='hidden'>Publish Topic</h2>

	<div id='sendMessage' class='hidden'>
	<input id='phrase' type='text'/>
	<input id='send_message' class='button' type='submit' name='Publish' value='Publish Message'/>
	</div>
	<br/>

	<h2>Real Time PubSub Update</h2>
	<ul></ul>
	</body>
	</html>