Develop Reference

TIme the period between two actions on separate pages

I have 2 pages. On page-a.php a user clicks a button, which creates page-2.php and after completing some tasks on that second page the user click "Submit" button, at which point I would like to turn off the timer. I would like to record that time using Google Analytics which I think I can do with something like that:
// Feature detects Navigation Timing API support.
if (window.performance) {
// Gets the number of milliseconds since page load
// (and rounds the result since the value must be an integer).
var timeSincePageLoad = Math.round(performance.now());
// Sends the timing event to Google Analytics.
gtag('event', 'timing_complete', {
'name': 'load',
'value': timeSincePageLoad,
'event_category': 'JS Dependencies'
});
}
The question is how do I start that timer and keep it across pages?

Across pages you can use cookie storage. I think in your case you should save in cookie timestamp of first page view and timestamp of button "Submit" click on second page. Cookie expiration time - 30 min, for example. Then calculate time difference and send event with custom metric to GA triggered by click "Submit" just after calculating. In report you'll have time from view page one to click "Submit" within one session, if I understood correctly what do you need.

JSP/Servlet keeps old session values on back button (browser)

So the problem is that i have a InitialPage.jsp page, that does the next thing when load:
if (<%=(Boolean) session.getAttribute("error")%>) {
showPopupWithError();
}
Login.jsp submits a form that calls ValidationServlet.java, that manages the validations for InitialPage.jsp, so, at the beginning of doPost(...) i set session.setAttribute("error", false), and start doing the validations.
If any input is wrong, the servlet will do session.setAttribute("error", true), and redirect to InitialPage.jsp, continuing with the cycle. As the scriptlets load, the .jsp will get the following code:
if (true) {
showPopupWithError();
}
And show the message.
So i continue loading data to inputs, and when everything is ok, i submit the form again.
The servlet validates correctly (so, the attribute "error" keeps set to false, as i had done at the beginning of the doPost(...)).
The problem comes as, when the next page shows (MainPage.jsp), the user should be able to press the back button of the browser and go back to InitialPage.jsp.
When it goes back to InitialPage.jsp, the attribute "error" is set to true, ignoring the last call to the servlet (when it validated correctly, set it to false, and redirected to the next page), and it automatically shows up the error message popup.
So basically the idea is to find a way to conserve session values after pressing the back button of the browser, and i couldn't manage to do that.
Thanks!

Reload existing angularJS page with stateParams intact

I have a function that shows or hides a button in relation to a value pulled from an API
I load a record with a parameter of 'id' ($stateParams.id)
If this value is 1 a button appears that fires a function that sets it to 0
If this value is 0 a button appears that fires a function that sets it to 1
These functions work fine however after the functions fire I want to reload the existing page but have the button change dynamically. If I leave the page and come back, or set state.go to any other page the button is changing no problem
I am using the following to try and reload the page after the function fires but nothing happens.. not even an error
$state.go($state.current, {id : $stateParams.id}, {reload: true});

Well... that was easier than expected. Just used
$state.reload()

Twice refreshed in p:commandButton, race condtition with oncomplete

I'm executing the server action with p:commandButton. After those action is completed, I'm refreshing the form (to show hidden fields) and I show dialog. I've tried also to refresh only the panels with hidden buttons, but the effect was the same:
There is second refresh launched, after I call dialog.show(). The problem is, that the widgets defined inside the dialog and the dialog itself is not existing in the moment! So, when my JavaScript code runs too fast, before the post with update of the dialog finishes, I'm getting an exception, because the object I want to modify doesn't exist in DOM tree.
So my first question, is it possible to avoid such situation and second refresh, can't the dialog be refreshed along with page?
And second, if the first can't be answered, how can I launch my code after those second post finishes? I need simply a callback when refreshing of the dialog component will be completed, and than run my operations.
<p:commandButton id="doTask" value="Do task" widgetVar="doTaskButton"
action="#{service.doTask}" update="#form"
onclick="disableMainButtons()"
oncomplete="async.showAsyncDialog()" />
The HTTP sequence:
// button click
POST http://localhost:9080/myapp/order.xhtml 200 OK
// oncomplete launches dialog.show()
// I receive answer from COMET before the dialog to display it is shown
POST http://localhost:9080/myapp/channel/async 200 OK
// refresh triggered by dialog.show(), only now the dialog is shown and it's widgets are rendered
POST http://localhost:9080/myapp/order.xhtml 200 OK

The workaround, that isn't beautiful from programming point of view is to check if the dialog is rendered and if not, delay my procedure. In case the dialog is still not rendered, delay once again etc.
waitForDialogRendered: function() {
var visible = asyncDialog.jq.css('visibility') == 'visible';
if (!visible) {
setTimeout(waitForDialogRendered, 250);
return;
}
runComet();
}
Not that asyncDialog.jq.is(':visible') returns true even if dialog is not visible for user!
Still, I'd be happier without the need to write such code.

ASP.NET button server side logic not being executed after javascript

I am having a great deal of trouble with client side validation using JavaScript and jQuery.
I have 2 user controls (.ascx) on a page (.aspx) each with its own button defined as follows
Page
user control 1
textbox 1
textbox 2
Button 1
user control 2
textbox 3
textbox 4
Button 2
Both button 1 and button 2 have the same CSS class.
I also have a JavaScript script that is referenced by the page.
Using jQuery I can accurately select the buttons and bind click events to them as follows:
$('.buttonCssClass').click(function() {
// If the user control fields are not valid then do nothing
if (typeof (Page_IsValid) == 'undefined' || Page_IsValid) {
return false;
}
// If the user control fields are valid then
// disable the button and replace the CSS class and add an image (progress spindle)
// until the processing is over - this is to prevent the user from clicking multiple
// times for long running and async processes.
});
When I click on button 1 I only want to check the fields in that user control for validity - not the all the fields in the page. Right now, all fields in all controls on the page are checked for validity - this means that my JavaScript function always returns false.
Could someone help me out with this?

Specify ValidationGroups so that not the whole page is validated. That works also on clientside:
if(typeof(Page_ClientValidate) == 'function')
return Page_ClientValidate("MyValidationGroup");
ASP.NET Validation in Depth(clientside)

maybe you can check in the click function which control raise the event.