Javascript 在基于 PrimeFaces 的页面中搞砸了导航
Javascript Screwing-up Navigation in PrimeFaces-Based Page
我正在使用一些第三方连接监控代码（Denis Radin的在线JS），它与我页面上的导航元素进行了交互，我根本不理解。 我希望有人能阐明一些可能的原因，这样我就可以更好地纠正这个问题。
当Javascript代码到位时，我有一个PrimeFaces commandButton元素，它开始间歇性地失败;有时它会把我带到我想要的页面，有时它什么也不做。
<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代码如下所示。 （澄清一下，当此代码不存在时，该页面确实可以完美运行。 它以五秒的间隔 ping 服务器;如果无法连接，它会弹出一个小部件，禁用页面并停止计时器（假设计时器正在运行）。 当连接恢复时，它会重新启动计时器，并允许用户再次访问该页面。 有没有人对给我带来麻烦的互动有任何可能的理论/建议？ （当然，如果您还可以建议如何纠正它，那么奖励积分/一个闪亮的复选标记，但在这一点上，我会更好地理解我试图解决的问题。
除了麻烦的导航交互之外，Javascript代码在其他方面可以完美运行。
<小时 />编辑：根据BalusC的评论，我用jQuery实现替换了旧版本，这导致了一些改进; 命令按钮现在可以可靠地工作，但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;
};
啊哈！
这是 ajax 调用 - 具体来说，是对 window.location 的 ajax 调用。 这与背豆（或附近的某些东西）的状态有关，导致导航混乱。
所以，如果有其他绝望的灵魂遇到这个问题，请将ajax指向其他地方。
相关文章：
- 单击顶部导航时如何进行向下滚动效果(向下滑动）.
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 当我点击jsf中的primefaces命令按钮时，如何获得点击事件
- 引导程序:在导航栏中，显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- primefaces日历可以禁用过去的日期和时间吗
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name＝“;最新主题”></a>
- 带有url的单页网站导航
- 父页面的角度路由器导航高亮显示
- 如何正确编程jQuery动画与平滑(导航栏）
- 动态更改'汉堡包'导航取决于BG图像
- JSF和Primefaces条件导航
- Javascript.导航不能与JSF Primefaces一起工作
- Javascript 在基于 PrimeFaces 的页面中搞砸了导航
