I’m using some third-party connection monitoring code (Online JS by Denis Radin), and it’s having an interaction with navigation elements on my page that I simply do not understand. I was hoping somebody could shed some light on probable reasons so I can do a better job of correcting the problem.
When the Javascript code is in place, I have a PrimeFaces commandButton element that starts failing intermittently; sometimes it takes me to the page I want, other times it does nothing.
<p:commandButton
icon="icon-back"
value="#{appMsgs['button.back.to.inbox']}"
rendered="#{viewBean.back}"
actionListener="#{controllerBean.selectState}"
update=":frmMain:mainContent" />
I also have a PrimeFaces dataTable with a rowSelect listener that sometimes takes me to the wrong page when clicked.
<p:dataTable
id="widgets"
value="#{cc.attrs.widgetList}"
var="widget"
widgetVar="widgetTable"
rowKey="#{widget.widgetId}"
selectionMode="single"
<p:ajax
event="rowSelect"
listener="#{controllerBean.handleWidget}"
update=":frmMain:mainContent"
onstart="widgetTable.clearSelection()"
process=":frmMain:txtInputTimeElapsed :frmMain:txtInputTimeRemaining :frmMain:mainContent" />
...
</p:dataTable>
The troublesome Javascript code appears below. (And to clarify, the page does work perfectly when this code is not present.) It’s pinging the server at five-second intervals; if it can’t connect, it brings up a widget that disables the page and stops the timer (assuming a timer is running). When the connection comes back, it restarts the timer and lets the user access the page again. Does anybody have any likely theories/suggestions on the interaction that’s getting me in trouble? (Bonus points/a shiny checkmark if you can also suggest how to correct it, of course, but at this point I’d settle for a better understanding of what problem I’m trying to solve.)
Aside from the troublesome navigation interaction, the Javascript code otherwise works perfectly.
Edit: Per BalusC’s comment, I replaced the old version with a jQuery implementation, which resulted in some improvement; the commandButton now works reliably, but the rowSelect listener still is prone to flaking-out and taking me to the wrong page.
I’m including the new code, as it’s considerably more concise. The original Javascript code is at the bottom of the post.
Edit 2: It’s definitely the e.ajax call that’s hosing me. If I go to the page with the dataTable object, wait for the e.ajax call to fire, then click on a row, I always go to the wrong place.
Adding async:false to the ajax call not only doesn’t work, it breaks the navigation completely; the rows in the dataTable are suddenly no longer selectable.
So, anybody got any suggestions for why ajax and PrimeFaces aren’t playing nice with each other and how I can correct it?
New jQuery Code:
(function(e){
e.fn.checknet=function(config){
function connectionLost(){
wdgNoConnection.show();
if(#{bizSimViewBean.started}) {
pauseTimer();
}
}
function connectionExtablished(){
wdgNoConnection.hide();
if(#{bizSimViewBean.started}) {
startTimer();
}
}
function checkConnection(url){
e.ajax({
url:url,
cache:false,
success:function(){
if (!window.checknet.conIsActive) {
window.checknet.statusChange = true;
}
window.checknet.conIsActive=true
},
error:function(){
if (window.checknet.conIsActive) {
window.checknet.statusChange = true;
}
window.checknet.conIsActive=false
},
complete:function(){
if (window.checknet.statusChange) {
if(window.checknet.conIsActive){
connectionExtablished()
}
else{
connectionLost()
}
window.checknet.statusChange = false;
}
}
})
setTimeout(
function(){checkConnection(window.checknet.config.checkURL)},
window.checknet.config.checkInterval
)
}
if(typeof t==="undefined"){
var t={}
}
if(typeof config.checkInterval==="undefined"){
t.checkInterval=5e3
}
if(typeof config.checkURL==="undefined"){
t.checkURL=window.location
}
else if(config.checkURL.indexOf("http")===-1){
t.checkURL="http://"+t.checkURL
}
checkConnection(config.checkURL)
}
})(jQuery);
$(document).ready(function(){
window.checknet={};
window.checknet.config={};
$.fn.checknet(window.checknet.config);
});
Old non-jQuery Code:
(function (w){
w.internetConnection = w.internetConnection || {};
w.internetConnection.addEvent = function(obj, type, callback){
if (window.attachEvent){
obj.attachEvent('on' + type, callback);
} else {
obj.addEventListener(type, callback);
}
};
var xmlhttp = new XMLHttpRequest();
w.internetConnection.isXMLHttp = function(){
return "withCredentials" in xmlhttp;
};
w.internetConnection.isXDomain = function(){
return typeof XDomainRequest != "undefined";
};
//For IE we use XDomainRequest and sometimes it uses a bit different logic, so adding decorator for this
w.internetConnection.XDomainLogic = {
init: function(){
xmlhttp = new XDomainRequest();
xmlhttp.onerror = function(){
xmlhttp.status = 404;
w.internetConnection.processXmlhttpStatus();
};
xmlhttp.ontimeout = function(){
xmlhttp.status = 404;
w.internetConnection.processXmlhttpStatus();
};
},
onInternetAsyncStatus: function(){
try {
xmlhttp.status = 200;
w.internetConnection.processXmlhttpStatus();
} catch(err){
w.internetConnection.fireHandlerDependOnStatus(false);
w.onLine = false;
}
},
checkConnectionWithRequest: function(async){
xmlhttp.onload = w.internetConnection.logic.onInternetAsyncStatus;
var url = w.onLineCheckURL();
xmlhttp.open("GET", url);
xmlhttp.send();
}
};
//Another case for decoration is XMLHttpRequest
w.internetConnection.XMLHttpLogic = {
init: function(){
},
onInternetAsyncStatus: function(){
if (xmlhttp.readyState === 4){
try {
w.internetConnection.processXmlhttpStatus();
} catch(err){
w.internetConnection.fireHandlerDependOnStatus(false);
w.onLine = false;
}
}
},
checkConnectionWithRequest: function(async){
if (async) {
xmlhttp.onreadystatechange = w.internetConnection.logic.onInternetAsyncStatus;
} else {
xmlhttp.onreadystatechange = undefined;
}
var url = w.onLineCheckURL();
xmlhttp.open("HEAD", url, async);
xmlhttp.send();
if (async === false) {
w.internetConnection.processXmlhttpStatus();
return w.onLine;
}
}
};
if (w.internetConnection.isXDomain()) {
w.internetConnection.logic = w.internetConnection.XDomainLogic;
} else {
w.internetConnection.logic = w.internetConnection.XMLHttpLogic;
}
w.internetConnection.logic.init();
w.internetConnection.processXmlhttpStatus = function(){
var tempOnLine = w.internetConnection.verifyStatus(xmlhttp.status);
w.internetConnection.fireHandlerDependOnStatus(tempOnLine);
w.onLine = tempOnLine;
};
w.internetConnection.verifyStatus = function(status){
return ( status >= 200 && status < 300 || status === 304 );
};
w.internetConnection.fireHandlerDependOnStatus = function (newStatus){
if (newStatus === true && w.onLineHandler !== undefined && (w.onLine !== true || w.internetConnection.handlerFired === false)){
w.onLineHandler();
}
if (newStatus === false && w.offLineHandler !== undefined && (w.onLine !== false || w.internetConnection.handlerFired === false)){
w.offLineHandler();
}
w.internetConnection.handlerFired = true;
};
w.internetConnection.startCheck = function (){
setInterval("window.internetConnection.logic.checkConnectionWithRequest(true)",w.onLineCheckTimeout);
};
w.internetConnection.stopCheck = function (){
clearInterval("window.internetConnection.logic.checkConnectionWithRequest(true)",w.onLineCheckTimeout);
};
w.checkOnLine = function(){
w.internetConnection.logic.checkConnectionWithRequest(false);
};
w.onLineCheckURL = function(){
return window.location.href;
};
w.onLineCheckTimeout = 5000;
w.checkOnLine();
w.internetConnection.startCheck();
w.internetConnection.handlerFired = false;
w.internetConnection.addEvent(w, 'load', function(){
w.internetConnection.fireHandlerDependOnStatus(w.onLine);
});
w.internetConnection.addEvent(w, 'online', function(){
window.internetConnection.logic.checkConnectionWithRequest(true);
});
w.internetConnection.addEvent(w, 'offline', function(){
window.internetConnection.logic.checkConnectionWithRequest(true);
});
})(window);
var offline = false;
window.onLineHandler = function(){
if (offline) {
wdgNoConnection.hide();
if(#{bizSimViewBean.started}) {
startTimer();
}
}
offline = false;
};
window.offLineHandler = function(){
if (!offline) {
wdgNoConnection.show();
if(#{bizSimViewBean.started}) {
pauseTimer();
}
}
offline = true;
};
AH-HA!
It’s the ajax call — specifically, the ajax call to window.location. That screws with the state of the backing bean (or something in that neighborhood), resulting in navigational mayhem.
So, if any other desperate souls hit this problem, point ajax someplace else.