I have implemented third-party connection monitoring code called Online JS by Denis Radin and it seems to be causing unexpected interactions with the navigation elements on my webpage. I am seeking insight into possible reasons for this behavior in order to address the issue more effectively.
With the Javascript code in place, a PrimeFaces commandButton element intermittently fails - sometimes it redirects me to the desired page, while 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" />
In addition, a PrimeFaces dataTable with a rowSelect listener also exhibits erratic behavior, occasionally redirecting me to an incorrect 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 problematic Javascript code below pings the server every five seconds. If the connection fails, a widget appears that disables the page and pauses any running timer. Once the connection is reestablished, the timer resumes, and the user regains access to the page. Any insights or suggestions on how these interactions could be causing issues would be greatly appreciated.
Besides the navigation problems, the JavaScript code functions perfectly otherwise.
Edit: Upon advice from BalusC, I replaced the old version with a jQuery implementation which improved the reliability of the commandButton. However, the rowSelect listener still tends to misdirect me to the wrong page.
Below is the updated concise code. The original JavaScript code is provided at the end of the post.
Edit 2: It appears that the issue lies within the e.ajax call. When I visit the dataTable page and wait for the e.ajax call to trigger before clicking on a row, it consistently directs me to the wrong destination.
Adding async:false to the ajax call not only fails to resolve the problem but also completely breaks the navigation functionality; the rows in the dataTable become unselectable.
Any suggestions on why Ajax and PrimeFaces are conflicting and how this can be rectified?
New jQuery Code:
[Updated jQuery code goes here]Old non-jQuery Code:
[Previous non-jQuery code goes here]