サードパーティの接続監視コード( Denis RadinによるオンラインJS)を使用していますが、ページ上のナビゲーション要素と相互作用しているため、理解できません。問題を修正するためのより良い仕事ができるように、誰かが考えられる理由に光を当てることができることを望んでいました。
Javascriptコードを配置すると、PrimeFacescommandButton要素が断続的に失敗し始めます。必要なページに移動することもあれば、何もしないこともあります。
<p:commandButton
icon="icon-back"
value="#{appMsgs['button.back.to.inbox']}"
rendered="#{viewBean.back}"
actionListener="#{controllerBean.selectState}"
update=":frmMain:mainContent" />
また、rowSelectリスナーを備えたPrimeFaces dataTableがあり、クリックすると間違ったページに移動することがあります。
<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>
面倒なJavascriptコードを以下に示します。(明確にするために、このコードが存在しない場合、ページは完全に機能します。)5秒間隔でサーバーにpingを実行しています。接続できない場合は、ページを無効にしてタイマーを停止するウィジェットが表示されます(タイマーが実行されていると想定)。接続が回復すると、タイマーが再起動し、ユーザーがページに再度アクセスできるようになります。誰かが私を困らせている相互作用についての可能性のある理論/提案を持っていますか?(もちろん、ボーナスポイント/修正方法も提案できる場合は光沢のあるチェックマークですが、この時点で、解決しようとしている問題をよりよく理解するために解決します。)
面倒なナビゲーション操作を除けば、Javascriptコードはそれ以外の点では完全に機能します。
編集: BalusCのコメントによると、古いバージョンをjQueryの実装に置き換えたため、改善が見られました。commandButtonは確実に機能するようになりましたが、rowSelectリスナーは依然としてフレークアウトして、間違ったページに移動する傾向があります。
かなり簡潔なので、新しいコードを含めています。元のJavascriptコードは投稿の下部にあります。
編集2: 私を悩ませているのは間違いなくe.ajaxの呼び出しです。dataTableオブジェクトのあるページに移動し、e.ajax呼び出しが起動するのを待ってから、行をクリックすると、常に間違った場所に移動します。
ajax呼び出しに追加async:false
すると、機能しないだけでなく、ナビゲーションが完全に中断されます。dataTableの行が突然選択できなくなります。
それで、なぜajaxとPrimeFacesがお互いにうまく機能していないのか、そしてどうすればそれを修正できるのかについて、誰かが何か提案をしましたか?
新しいjQueryコード:
(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);
});
古い非jQueryコード:
(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;
};