I've been quite pleased with how remote pagination on Tabulator works with automatic ajax loading, but I can't seem to find a way to set the page that is displayed when the table is first loaded. table.setPage(pageNum) only works for me after the first page has been fetched and rendered; if I do something like
new Tabulator("#my-tabular-table", { lots of stuff }).setPage(5)
then I get a Pagination Error - Requested page is out of range of 1 - 1: because the page count hasn't been received from the server yet.
Is there some way of doing this? Am I missing something? I realize that I could hook into some callback and switch to the desired page immediately after the first page has been loaded, but I'd rather not wait for an extra server call.
You can use the paginationInitialPage option in the table definition to set the page number for the initial load:
var table = new Tabulator("#example-table", {
pagination:"remote", //enable remote pagination.
paginationInitialPage:2, // this option can take any positive integer value
});
Good day
I was wondering if it's possible to hook a Javascript onto a PXAction button. normally you can use the ClientEvents Property but with a button, these are not exposed.
The problem I am is every now and then there is a delay between the client and the server and the client will click the button a second time. I have server-side code to help stop this by disabling the button but I want to add a javascript to see if I can prevent it completely.
The code I want to add:
<script type="text/javascript">
var submit = 0;
function CheckDouble() {
if (++submit > 1) {
alert('This sometimes takes a few seconds - please be patient.');
return false;
}
}
</script>
Any ideas or workaround I can maybe try?
I believe the PXJavaScript control is what you are after.
I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed.
Dynamically Change Button Color
Let me know if this helps?
Robert
I'm implementing an auction system using jsf.
in the item page, I have a countdown showing how much time is left for this sale. I show it with <p:outputlabel value=#{itemBean.timeToEnd()} />.
the timeToEnd() method returns a string in the format: 1 days, 2 hours.. etc.
it calculates it on a Date object inside that bean.
I update the label with <p:poll>, on a 1 second interval.
my problem is, that when counter reaches 0 seconds, I want to refresh the whole page, where it will show that the sale is inactive.
in timeToEnd(), I added a logic that if the end date is passed, or seconds to end is 0, then execute the following code that suppose to refresh the page:
ExternalContext ec1 =FacesContext.getCurrentInstance().getExternalContext();
ec.redirect(((HttpServletRequest) ec.getRequest()).getRequestURI());
But it doesn't refresh the page.
I think it doesn't refresh since the page is "live" for some time. (user is on item page from a time where sale was active).
any ideas on how this could be implemented?
P.S
I also tried to implement this countdown on client level, when I store the end date with c:set and then use javascript or something for the view update. but then I noticed that also for the code
<c:set var = "enddate" value = "#{itemsBean.endDate}" scope="session" />
for every use of "enddate" the server is called, rather than storing the date locally and then perform the calculation without bothering the server. so I didn't even get to the javascript part.
if there's a way to implement locally, would be happy to hear about it.
Never do business/controller logic in a getter method. Also not if that getter represents EL 2.2 direct method invocation. It's after all still a value expression which is only evaluated during generating the HTML output and writing the response body during render response phase. That moment is clearly too late to set a response header (to instruct the client to perform a redirect).
Move that logic to an action(listener) method.
<p:poll ... listener="#{bean.onpoll}" />
public void onpoll() {
// ...
if (someCondition) {
redirect();
}
}
I am using <xpScriptBlock> to store the contents of two rather long client side functions that loads an ExtJS grid. I can call the function using clientside javascript just fine.
I discovered that I need to show a different grid based on a condition in the underlining document. To reference the backend I moved the code to serverside and then tried to call the grid using view.postScript. This does not work and is the basis of my question.
Is this approach even possible? I do not wish to put all the code into the event. The functions are quite long and better kept in a script block for readability and maintainability. The functions are definitely loaded in the client, as I can manually load them using the firebug console. Perhaps I am missing something simple so I wanted to ask before changing my approach.
var typePO = document1.getItemValueString("typePO");
if(typePO == "AFS"){
view.postScript("loadGridAFS();")
} else {
view.postScript("loadGridOther();")
}
This code is in the serverside onClientLoad event of a panel. I have tried adding the 'return' keyword and it makes no difference.
UPDATE: I can't even get simple alerts to work using view.postscript(). Does this method only work in certain types of events in SSJS???
After some experimenting using a simple alert I can say that view.postScript() does NOT work everywhere.
For a test, I put the same code in an six event of the xpage. Here is an example of the code I used: view.postScript("alert('onClientLoad');"); I just changed the message to match the event.
Here are the results:
onClientLoad = nothing
beforePageLoad = XSP error
afterPageLoad = WORKS!
afterRestoreView = nothing
beforeRenderResponse = WORKS!
afterRenderResponse = nothing
I haven't tried every available event out there, but the bottom line here is that you shouldn't count on view.postscript() to work everywhere. And if it does do nothing, try a simple alert first to see of the event supports view.postscript before questioning the client javascript code you are attempting to run.
I have this requirement:
The system will record the length of time the user displayed each page.
While trivial in a rich-client app, I have no idea how people usually go about tracking this.
Edited: By John Hartsock
I have always been curious about this and It seems to me that this could be possible with the use of document.onunload events, to accurately caputure star and stop times for all pages. Basically as long as a user stays on your site you will always be able to get the start and stop time for each page except the last one. Here is the scenario.
User enters your site. -- I have a
start time for the home page
User goes to page 2 of your site -- I have a stop time for the home page and a start time for page 2
User exits your site. -- How do you get the final stop time for page 2
The question becomes is it possible to track when a user closes the window or navigates away from your site? Would it be possible to use the onunload events? If not, then what are some other possibilities? Clearly AJAX would be one route, but what are some other routes?
I don't think you can capture every single page viewing, but I think you might be able to capture enough information to be worthwhile for analysis of website usage.
Create a database table with columns for: web page name, user name, start time, and end time.
On page load, INSERT a record into the table containing data for the first three fields. Return the ID of that record for future use.
On any navigation, UPDATE the record in the navigation event handler, using the ID returned earlier.
You will end up with a lot more records with start times than records with both start and end time. But, you can do these analyses from this simple data:
You can count the number of visits to each page by counting start times.
You can calculate the length of time the user displayed each page for the records that have both start and end time.
If you have other information about users, such as roles or locations, you can do more analysis of page viewing. For example, if you know roles, you can see which roles use which pages the most.
It is possible that your data will be distorted by the fact that some pages are abandoned more often than others.
However, you certainly can try to capture this data and see how reasonable it appears. Sometimes in the real world, we have to make due with less than perfect information. But that may be enough.
Edit: Either of these approaches might meet your needs.
1) Here's the HTML portion of an Ajax solution. It's from this page, which has PHP code for recording the information in a text file -- easy enough to change to writing to a database if you wish.
<html>
<head>
<title>Duration Logging Demo</title>
<script type=”text/javascript”>
var oRequest;
var tstart = new Date();
// ooooo, ajax. ooooooo …
if(window.XMLHttpRequest)
oRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
function sendAReq(sendStr)
// a generic function to send away any data to the server
// specifically ‘logtimefile.php’ in this case
{
oRequest.open(“POST”, “logtimefile.php”, true); //this is where the stuff is going
oRequest.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oRequest.send(sendStr);
}
function calcTime()
{
var tend = new Date();
var totTime = (tend.getTime() – tstart.getTime())/1000;
msg = “[URL:" location.href "] Time Spent: ” totTime ” seconds”;
sendAReq(‘tmsg=’ msg);
}
</script>
</head>
<body onbeforeunload=”javascript:calcTime();”>
Hi, navigate away from this page or Refresh this page to find the time you spent seeing
this page in a log file in the server.
</body>
</html>
2) Another fellow proposes creating a timer in Page_Load. Write the initial database record at that point. Then, on the timer's Elapsed event, do an update of that record. Do a final update in onbeforeunload. Then, if for some reason you miss the very last onbeforeunload event, at least you will have recorded most of the time the user spent on the page (depending upon the timer Interval). Of course, this solution will be relatively resource-intensive if you update every second and have hundreds or thousands of concurrent users. So, you could make it configurable that this feature be turned on and off for the application.
This has to be done with some javascript. As the other said, it is not completely reliable. But you should be able to get more than enough accurate data.
This will need to call your server from javascript code when the page is unloaded. The javascript event to hook is window.unload. Or you can use a nicer API, like jQuery. Or you could use a ready made solution, like WebTrends, or Google Analytics. I think that both record the length of time that the page was displayed.
Good web analytics is pretty hard. And it becomes harder if you have to manage a lot of traffic. You should try to find an existing solution and not reinvent your own ...
I've put some work into a small JavaScript library that times how long a user is on a web page. It has the added benefit of more accurately (not perfectly, though) tracking how long a user is actually interacting with the page. It ignores time that a user switches to different tabs, goes idle, minimizes the browser, etc. The Google Analytics method suggested has the shortcoming (as I understand it) that it only checks when a new request is handled by your domain. It compares the previous request time against the new request time, and calls that the 'time spent on your web page'. It doesn't actually know if someone is viewing your page, has minimized the browser, has switched tabs to 3 different web pages since last loading your page, etc.
As multiple others have mentioned, no solution is perfect. But hopefully this one provides value, too.
Edit: I have updated the example to include the current API usage.
http://timemejs.com
An example of its usage:
Include in your page:
<script src="http://timemejs.com/timeme.min.js"></script>
<script type="text/javascript">
TimeMe.initialize({
currentPageName: "home-page", // page name
idleTimeoutInSeconds: 15 // time before user considered idle
});
</script>
If you want to report the times yourself to your backend:
xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","ENTER_URL_HERE",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds();
xmlhttp.send(timeSpentOnPage);
TimeMe.js also supports sending timing data via websockets, so you don't have to try to force a full http request into the document.onbeforeunload event.
In a web based system, there's no way to reliably do this. Sure, you can record each page that a user displays and record the length of time between each view but what happens when they close the browser on the last page they're displaying on? That's just one of dozens of problems with this requirement.
What about an AJAX based approach? It would only work when Javascript is on the client side, but sending a POST to some script every 15 seconds will get you a reasonable amount of granularity.
There are also more complicated "reverse-AJAX" things you might be able to do... but I don't know much about them.
You can use onunload to do what you need. Have it send a AJAX request to your server to update a database. You may want to return false then do document.close once the AJAX request has completed such that it won't quit prematurely and the ajax won't get discarded.
In the database you'll just want to store the page, the ip address, the time of the event, and whether it was a onload or onunload event.
That is all there is too it.
I recently made a example of recording html page spent time.
refresh would not interrupt the recording, and close would
I use sessionStorage to sotre "time" that page spent
if refresh
I would put it in to sessionStorage
if close
I can not get it from sessionSotrage , so I set time=0
here is my code
`
<body>
time spent :<div id="txt"></div>
</body>
<script>
$(function () {
statisticsStay();
})
function statisticsStay(){
var second=0;
if(sessionStorage.getItem('testSecond')!=null)
second=sessionStorage.getItem('testSecond');
var timer = setInterval(function(){
second++;
document.getElementById('txt').innerHTML=second;
},1000);
window.onbeforeunload = function(){
sessionStorage.setItem('testSecond',second);
};
}
</script>
`